`
BryanMelody
  • 浏览: 60666 次
  • 性别: Icon_minigender_1
  • 来自: 长春
社区版块
存档分类
最新评论

在项目中使用富文本编辑器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则已经可以正常使用。

分享到:
评论

相关推荐

    富文本编辑器 ueditor

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码...

    C# .NET MVC UEditor富文本编辑器

    实现UEditor富文本编辑器与服务器的文件交互(图片,视频),该实例采用 C#后台开发语言完成! 请在vs2017中打开!

    百度富文本编辑器UEditor配置及功能实现详解

    百度开源富文本编辑器UEditor是一款功能齐全的插件,但是强大的功能也带来了配置复杂度提高的问题,最近使用到这款插件,自己总结了下使用经验。以jsp项目工程为例,内含详细配置说明,适合新手参考使用。

    百度富文本编辑器ueditor java引入.zip

    UEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 UEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本编辑器,这是java版,包含html段及js,以及前端文件...

    百度富文本编辑器jar ueditor-1.1.2.jar

    ueditor-1.1.2 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 UEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本

    百度开源在线文本编辑器(ueditor) demo

    百度文本编辑器的一个使用demo,供大家学习参考.这里只是做了一个实例.具体API还请参考百度http://ueditor.baidu.com/website/

    百度最新开源文本编辑器ueditor_1_0

    百度最新发布的开源文本编辑器ueditor_1_0,感觉还不错

    UEditor Plus开源编辑器是基于 UEditor 二次开发的富文本编辑器,让UEditor重新焕发活力

    UEditor Plus开源编辑器是基于 UEditor 二次开发的富文本编辑器,让UEditor重新焕发活力。 功能亮点 全新的UI外观,使用字体图标替换原有图片图标; 移除过时、无用的插件支持,不断完善使用体验; 图片、文件、视频...

    ueditor百度开源富文本编辑器

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码。

    百度 富文本 编辑器 Ueditor 最新 2013年10月版

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码... 涵盖流行富文本编辑器特色功能,独创多种全新编辑操作模式。 ...

    UEditor富文本编辑器.zip

    UEditor是由百度开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点。本人上传的是1.4.3.3JSP版本,lib中的common-fileupload包已经手动替换成最新的版本1.4

    开源文本编辑器UEditor

    一个开源的文本编辑器可自定义控件、功能支持多浏览器相当的强大

    UEditor富文本编辑器+内容转word导出整合经验分享(SpringMVC+Ueditor+mybatis+Maven)

    UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。 笔者使用Springmvc+mybatis+maven搭建,并实现插入图片...

    百度文本编辑器 ueditor

    百度文本编辑器 ueditor 源代码,免费,开源 功能强大

    富文本编辑器/UEditor 百度编辑器 PHP版 v1.4.3.3 GBK/UTF-8

    富文本编辑器/UEditor 百度编辑器 PHP版 v1.4.3.3 GBK/UTF-8 Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点。Ueditor基于BSD开源协议,除了具有代码精简、加载迅速的...

    百度编辑器UEditor .NET版 v1.4.3.2

    Ueditor是由百度web前端研发部开发所见即所得的编辑器...Ueditor开源编辑器这种拥有可配性的模式,令开发者能够根据自身需要接入任何一层进行开发。 百度编辑器 v1.4.3.2 更新日志:更新 video-js 以修复 XSS 安全漏洞

    ueditor百度富文本编辑器 (已编译,压缩包包含ueditor.all.js,可直接使用)

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。 ueditor百度富文本编辑器 (已编译,压缩包包含ueditor.all.js,...

    富文本编辑器ueditor-piggsoft.zip

    ueditor-piggsoft:对ueditor java工具包改写。 特征: 将所用到的部分类改成普通的 bean,去掉部分静态化,隐式加入 spring,用 DI 来管理类。 加入回调类,在文件在本地存储完...

    百度编辑器UEditor v1.4.3.2 asp版 GBK.zip

    百度编辑器UEditor v1.4.3.2 更新日志: ...Ueditor开源编辑器这种拥有可配性的模式,令开发者能够根据自身需要接入任何一层进行开发。 百度编辑器UEditor页面截图展示 相关阅读 同类推荐:站长常用源码

    百度编辑器UEditor v1.4.3.2 .NET版 GBK.zip

    百度编辑器UEditor v1.4.3.2 更新日志: ...Ueditor开源编辑器这种拥有可配性的模式,令开发者能够根据自身需要接入任何一层进行开发。 百度编辑器UEditor页面截图展示 相关阅读 同类推荐:站长常用源码

Global site tag (gtag.js) - Google Analytics