在项目中使用富文本编辑器UEditor(开源文本编辑器插件)
程序员文章站
2024-02-23 14:10:58
...
第一步:下载UEditor所需要的所有文件
此处用的是JSP-UTF-8版本
下载链接:http://ueditor.baidu.com/website/download.html
第二步:将下载文件解压至项目web目录下
第三步:将文件夹下/jsp/lib目录下的五个jar包拷贝至项目中的WEB-INF/lib下,并添加至项目结构中
第四步:修改ueditor.config.js
将var URL = window.UEDITOR_HOME_URL || getUEBasePath();
修改为var URL = "/项目名称/utf8-jsp/";
第五步:修改图片上传路径前缀——UEditor目录下的jsp/config.json
将imageUrlPrefix后面的""修改为"/项目名称"
图片上传路径则是可改可不改
第六步:测试index.html看文本编辑器是否能够正常显示在网页上
第七步:将UEditor加载到网页中
第一步:在要添加文本编辑器的页面上添加如下两行代码,将文本编辑器的配置及源码文件引入
<!-- 配置文件 -->
<script type="text/javascript" src="/CMS/utf8-jsp/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/CMS/utf8-jsp/ueditor.all.js"></script>
第二步:用如下代码方式将文本编辑器引入
<div align="center">
<textarea id="newsEditor" name="content" style="width: 300px;height: 200px"> </textarea>
<br/>
<script type="text/javascript">
UE.getEditor('newsEditor');
</script>
</div>
此方式是先创建一个文本域作为容器,后用文本编辑器将其替换掉,如需显示已有内容,则在textarea标签与反标签中添加即可
第八步:打开编辑页面,测试文本编辑器是否能够正常显示,测试在文本中添加图片是否能够正常上传至服务器对应项目对应目录下,如果可以,UEditor则已经可以正常使用。
推荐阅读
-
在项目中使用富文本编辑器UEditor(开源文本编辑器插件)
-
关于富文本编辑器—UEditor(java版)的使用,以及如何将UEditor的文件/图片上传路径改成绝对路径
-
教你两分钟在Vue中使用富文本编辑器quill-editor
-
UEditor 1.2.0 发布,百度的开源富文本编辑器
-
Vue中Quill富文本编辑器的使用教程
-
在python web.py中使用百度富文本编辑器 UEditor
-
(转)java Springboot富文本编辑器ueditor的内容使用itext5导出为pdf文件
-
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
-
vue集成百度UEditor富文本编辑器使用教程
-
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码