ueditor文本编辑器[参照].pdfVIP

百度编辑器 UEditor 演示地址 : /website/onlinedemo.html Ueditor 是由百度 web 前端研发部开发所见即所得的编辑器，具有轻量，可定制，注重 用户体验等特点。 Ueditor 基于 BSD开源协议，除了具有代码精简、加载迅速的轻量级特质 外，还采用了分层理念，使开发者可以根据实际应用和需求自由定制。 Ueditor 编辑器划分为了三层架构。其中，核心层为开发者提供了诸如 range 、 selection 、domUtils 类的底层 API 接口，中间的命令插件层不仅提供了大量的基础 command， 还允许开发者基于核心层进行 command命令的开发， 而面向用户端的界面层则可以提供自由 定制的用户交互界面。 Ueditor 开源编辑器这种拥有可配性的模式，令开发者能够根据自身 需要接入任何一层进行开发。 完整版的部署与体验 一、官网上下载完整源码包，解压到任意目录，解压后的源码目录结构如下所示： _examples：编辑器完整版的示例页面 _demos：编辑器的各种使用案例 dialogs ：弹出对话框对应的资源和 JS 文件 themes：样式图片和样式文件 server：涉及到服务器端操作的 PHP、JSP 等文件 third-party ：第三方插件 editor_all.js ：_src 目录下所有文件的打包文件 editor_all_min.js ：editor_all.js 文件的压缩版，建议在正式部署时才采用 editor_config.js ：编辑器的配置文件，建议和编辑器实例化页面置于同一目录 二、部署 UEditor 到实际项目（ UETest ）中的步骤 : 图表 1 第一步：在项目的任一文件夹中建立一个用于存放 UEditor 相关资源和文件的目录，此 处在项目根目录下建立，起名为 ueditor 。 第二步：拷贝源码包中的 dialogs 、themes、third-party 、editor_all.js 和 editor_config.js 到 ueditor 文夹中。其中，除了 ueditor 目录之外的其余文件均为具体项目文件，此处所列仅供 示例。 第三步：为简单起见，此处将以根目录下的 index.jsp 页面作为编辑器的实例化页面，用 来展示 UEditor 的完整版效果。在 index.jsp 文件中，首先导入编辑器需要的三个入口文件， 示例代码如下： HEAD SCRIPTtype=text/javascriptsrc=ueditor/editor_config.js/SCRIPT SCRIPTtype=text/javascriptsrc=ueditor/editor_all.js/SCRIPT LINKrel=stylesheethref=ueditor/themes/default/ueditor.css 第四步：然后在 index.jsp 文件中创建编辑器实例及其 DOM 容器。具体代码示例如下： DIVid=myEditor/DIV SCRIPTtype=text/javascript var editor = new baidu.editor.ui.Editor(); editor.render(myEditor); /SCRIPT 最后一步： 在/UETest/ueditor/ editor_config.js 中查找 URL 变量配置编辑器在你项目中 的路径。 // 强烈推荐以这种方式进行绝对路径配置 URL= window.UEDITOR_HOME_URL||/UETest/ueditor/; 至此，一个完整的编辑器实例就已经部署到咱们的项目中了！在浏览器中输