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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值