在项目中使用富文本编辑器UEditor(开源文本编辑器插件)

时间：2022-12-25 19:03:53

第一步：下载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则已经可以正常使用。
标签：

相关文章