php UEditor百度编辑器安装及使用分享

1.在官网下载完整的源代码包，解压到任意目录。提取的源代码目录的结构如下：

_ examples:editor _ demos完整版的示例页面：编辑器对话框的各种用例：弹出对话框对应的资源和JS文件主题：样式图片和样式文件服务器：涉及服务器端操作的PHP、JSP等文件第三方：第三方插件editor _ all.js:目录下所有文件的压缩版本_ src editor _ all _ min . JS:editor _ config . JS:正式部署建议使用editor的配置文件，建议放在同一个目录下

第二，将用户界面部署到实际项目的步骤：

第一步：创建一个目录，用于在项目的任何文件夹中存储与ueditor相关的资源和文件，该目录创建在项目的根目录下，名为UEditor。第二步：将源包中的对话框、主题、第三方、editor_all.js和editor_config.js复制到ueditor文件夹中。其中，除了ueditor目录之外的所有文件都是特定的项目文件，这里仅作为示例列出。第三步：为了简单起见，根目录下的index.php页面将作为编辑器的实例化页面，展示UEditor的完整版本效果。在index.php文件中，首先导入编辑器所需的三个条目文件。示例代码如下：

meta http-equiv=' Content-Type ' Content=' text/html；Charset=UTF-8'title editor完整版本示例/title script type=' text/JavaScript ' src=' http : u editor/editor _ config . js '/script script type=' text/JavaScript ' src=' http : ueditor/editor _ all . js '/script link rel='样式表' href=' ueditor/themes/default/ueditor . CSS ' rel=' externalnoflow '步骤4:然后创建一个编辑器实例及其DOM具体的代码示例如下：

div id=' myEditor '/div script type=' text/JavaScript ' var editor=new Baidu . editor . ui . editor()；editor . render(' myEditor ')；/script最后一步：将以下代码添加到编辑器实例的顶部：

脚本类型='text/javascript '窗口。UEDITOR _ HOME _ URL=' UEDITOR/'；//这是ueditor相对于实例页的路径。/使用上面的相对路径，也可以使用相对于网站根目录的绝对路径，例如：

脚本类型='text/javascript '窗口。UEDITOR _ HOME _ URL='/UC/UEDITOR/'；//这是ueditor相对于网站根目录的路径。/script建议使用相对于网站根目录的绝对路径。至此，一个完整的编辑器实例已经部署到我们的项目中！最后一步也可以通过修改以下地方来实现(不推荐不懂js的人使用):查找‘URL=window’。/uet est/UEDITOR/editor _ config . js中的UEDITOR_HOME_URL|| _ URL | | '，并将其修改为相应的路径。当然，如果你修改这个地方，窗口。不需要在实例页面上设置UEDITOR_HOME_URL。

//strong烈建议以这种方式配置绝对路径。URL=window . ueeditor _ home _ URL | | '/uetest/ueeditor/'；三、具体用途

1.向后端场景1提交编辑器内容：编辑器所在的表单中有一个提交按钮，点击该按钮完成提交动作。这个场景适合最常见的场合，需要注意的问题不多，只有三个解释：1)默认提交到后台的表单名称为“editorValue”，可以在editor_config.js中配置，参数名称为textarea。2)可以在容器标签(即脚本标签)上设置name属性，覆盖editor_config.js中的默认配置示例代码如下，这里的myContent将成为新的提交表单名称：

form action=' method=' post ' script type=' text/plain ' id=' editor ' name=' my content '/script input type=' submit ' name=' submit ' value=' submit '/form 3)后端接收器可以通过以下方式在编辑器中获取富文本内容。

//PHP get:$ _ POST[' myContent ']//JSP get:request . getparameter(' myContent ')；//ASP获取：请求(' MyContent ')；//NET获取： context . request . form[' my content ']；场景2:编辑器所在的表单中没有提交按钮，提交动作由外部事件触发。这个场景适合于在网站前端有很多交互的场合。主要要注意的是，在触发表单提交动作之前，先执行编辑器内容同步操作。一般代码模式如下：

//同步内容，满足提交条件时提交，其中编辑器为编辑器实例if(editor.hasContent()){ //以非空示例editor . sync()；//同步内容some form . submit()；//提交表单}这里的编辑器是编辑器实例对象。

场景3:编辑器不在任何表单中，提交动作由外部事件触发。

这种场景很少使用，但在特殊情况下可能需要。UEditor也提供了相应的处理方案。基本逻辑与场景2相同，只是执行同步操作时需要传入提交表单的id，如editor.sync(myFormID)。其他一切与场景2相同。2.从数据库中读取内容

Script type=' text/plain ' id=' editor '/从数据库中取出文章内容打印在这里/script在这里，script标签作为editor容器对象，其类型设置为纯文本，避免了标签内部JS代码的执行，解决了部分学生使用传统textarea标签作为容器带来的额外代码传递问题。

3.初始化编辑器内容(即在编辑器中设置富文本)

写新文章，并在编辑器中预设提示、问候等内容。在editor_config.js文件中找到initialContent参数，并将其值设置为所需的提示或问候语，例如initialContent:“欢迎使用UEditor！”。

4.上传图片

如果是新站，也就是说图像路径采用的是编辑器本身的路径，没有必要更改。如果旧工作站已经有了自己的图像文件夹，则有必要更改以下ueditor/php文件夹中的文件：