UEditor---富文本编辑器基本使用_kmz编辑器-优快云博客

本文链接：https://blog.youkuaiyun.com/q79030/article/details/95385002

博主在项目中需使用富文本编辑器，选择了使用较多的百度UEditor，记录使用过程。下载JSP版本，解压后拷贝到maven项目的webapp/static目录，在JSP页面导入JS文件、构造显示元素并在JS中初始化，最终将编辑器显示在页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目中要搞一个富文本编辑器的东西，网上搜了一下，使用百度的UEditor的比较多，所以没想太多就业使用了它，使用中踩了不少坑，今天做个记录。

首先下载UEditor：我这里下载的是JSP版本的。

解压后将文件夹拷贝到静态目录，我这里是maven项目，所以放在webapp/static下面了。大概的目录结构：

在JSP页面中的使用：

首先导入JS文件：

<script type="text/javascript" charset="UTF-8"
            src="<c:url value="/statics/js/ueditor/ueditor.config.js"/>"></script>
    <script type="text/javascript" charset="UTF-8" src="<c:url value="/statics/js/ueditor/ueditor.all.js"/>"></script>
    <script type="text/javascript" charset="UTF-8" src="<c:url value="/statics/js/ueditor/ueditor.parse.js"/>"></script>
    <script type="text/javascript" charset="UTF-8"
            src="<c:url value="/statics/js/ueditor/lang/zh-cn/zh-cn.js"/>"></script>

构造一个显示富文本编辑器的元素：我这里使用的是textarea。

<textarea id="postContent" name="postContent" style="width: 90%; height: 200px;"></textarea>

在JS中进行初始化

$(function(){
        bindEvent();
});

function bindEvent(){
    var ue = UE.getEditor('postContent',{autoHeightEnabled:false});
}

这样我们在页面上就能看到这个富文本编辑器了，如下：

本篇仅仅是简单的将富文本编辑器显示在页面上。