UEditor(百度编辑器)的使用

来源:互联网 发布:unity3d下载安装教程 编辑:程序博客网 时间:2024/05/21 11:23

首先我们需要来认识下UEditor,它是由百度web前端研发部开发所见即所得富文本web编辑器,并且是基于BSD协议的开源产品,允许自由使用和修改,这也是小编最看中它的地方,开源就意味着可以自己来定制这个编辑器。

接着我们来下载这个编辑器,百度一下UEditor,第一个就是它的官网。我们点击下载选项,我们发现一共有三个版本供我们选择,一个是UBuilder,一个是开发版,一个是Mini版,通过下面注释的红色小字我们可以了解到UBuilder,开发版和Mini版的区别。一般情况下我会选择开发版本即可。


1,从官网上下载完整源码包,解压到任意目录,解压后的源码目录结构如下所示:


2,在MyEclipse中创建WEB项目(UEditor),设置项目编码为UTF-8


3,在WebRoot目录下创建名为ueditor的文件夹,将解压后的文件及文件夹全部复制到ueditor下


4,将ueditor\jsp\lib下jar文件复制到WebRoot/WEB-INF/lib下


5,打开WebRoot/index.jsp页面


6,分别打开WebRoot/ueditor/jsp/config.json和WebRoot/ueditor/ueditor.config.js文件


7,在ueditor.config.js文件中添加window.UEDITOR_HOME_URL = "/UEditor/ueditor/";


8,修改config.json文件中imageUrlPrefix和imagePathFormat属性


9,将项目部署到服务器,这里用的是Tomcat8


10,运行服务器,在浏览器中打开http://localhost:8080/UEditor


11,点击多图上传按钮


12,点击选择图片按钮


13,选择图片


14,点击开始上传


15,上传成功后图片会有提示信息


16,点击确定按钮,在编译器中将显示上传图片


17,点击页面提交按钮,会显示编译器的内容


github地址 https://github.com/ChenTao-Ji/UEditor.git

原创粉丝点击