UEditor部署到个人站点

15989119660@163.com (Xiangtao XIAO) — Fri, 15 May 2020 00:00:00 +0000

一、下载UEditor

//ueditor.baidu.com/website/download.html

在以上链接下载，选择自己需要的语言版本，我用的是jsp，就下载jsp版本。将下载的压缩包解压，可以直接将解压的文件导入到Eclipse中自己的项目中，导入到文件夹WebContent中即可。

二、配置

将jsp/lib中的jar包全部复制到WEB-INF/lib下

修改输入字符数统计、上限，自定义工具栏可以参考官方说明文档，配置项可在ueditor.config.js中修改。

修改图片上传路径等在官方说明文档中有详细的介绍。

注：这里仅仅是在一个项目中使用UEditor，还用别的使用方法，也可以直接部署到tomcat中。

三、在页面中插入Ueditor编辑器

首先要引用文件

<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/thirdparts/utf8-jsp/themes/default/css/ueditor.change.css">
<script type="text/javascript" charset="utf-8" src="<%= request.getContextPath() %>/thirdparts/utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="<%= request.getContextPath() %>/thirdparts/utf8-jsp/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="<%= request.getContextPath() %>/thirdparts/utf8-jsp/lang/zh-cn/zh-cn.js"></script>

接着在需要插入编辑器的位置插入以下代码

<textarea id="content" name="content" style="width:100%;height:500px"></textarea>
<script type="text/javascript" charset="utf-8">
UE.getEditor('content',{toolbars: [[ 'fullscreen', 'source', '|', 'undo', 'redo', '|','bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']]});
</script>

toolbars控制工具栏显示哪些工具

textarea是显示编辑器的容器，其id与UE.getEditor(‘id’,{})要一致。

不一定要是textarea，div等都可以，可以自己试一试，我没有深入研究，凑合着用了。

Ueditor on Xiangtao's log

UEditor部署到个人站点

一、下载UEditor

二、配置

三、在页面中插入Ueditor编辑器