关于UEditor富文本编辑器的使用

第一步:首先下载ueditor编译器,地址http://ueditor.baidu.com/website/

下载完解压之后就这个:

第二步:我会把文件名utf-8-jsp这个文件名改为ueditor,然后把这个ueditor文件夹拷贝到Eclipse项目的WebContent目录下



     注意:

             其中的zh-ch.js我是从lang文件夹里面拷贝出来的,目的是为了方便引入,不拷贝出来完全可以,到时候引入jsp的时候注意下路径就好了。

             当Ueditor添加到WebContent中时候回报一个错误,是config.json文件有错,这个是校验的错误,可以不用管它,如果有强迫症,那么你就右键项名,修改properties,找出Builders 中Validation去掉勾。然后删除ueditor,再重新复制粘贴。

第三步:当然是要导入这个编译器所需要的依赖了,在ueditor/jsp/lib下




第四步:然后就是在指定的jsp页面中引入三个js,分别是ueditor.all.js和ueditor.config.js和zh-cn.js,其中ueditor.all.js官网是建议用ueditor.all.min.js,但是导入项目时这个ueditor.all.min.js会报错,我就直接用ueditor.all.js了,内容都一样,只不过文件大一点点。无关紧要啦。


注意:

    这里的导入顺序不能变,不然会报错

第五步:通过上面的步骤之后基本的环境就已经搭完了,下面就是画龙点睛之笔了,找到要添加编译器的textarea标签,获取其id,在下面添加上这一段就欧了,效果立马上演。



效果如图:

时间: 2024-12-22 00:40:41

关于UEditor富文本编辑器的使用的相关文章

YII中Ueditor富文本编辑器文件和图片上传的配置图文教程

将Ueditor集成到YII框架中后,参照editor_config.js中的toolbars中的内容,更改options中标签可以给编辑器添加想要的功能: 因此要想添加文件和图片上传功能,应该加入以下两个标签: 文本编辑器中便出现了对应的两个选项: 但是点击上传图片按钮后发现,无法正常进行图片上传,文件上传也是失败的,问题都是Flash Player需要升级, 因此在火狐浏览器中安装对应的flash player组件,选择其中一个工作: 此时,文件上传和图片上传功能就能正常使用了: 上传路径的

ThinkPHP中使用Ueditor富文本编辑器_php实例

具体插件下载: http://ueditor.baidu.com/website/download.html UEditor官方文档: http://ueditor.baidu.com/website/document.html 之前于 "ThinkPHP-代码" 案例中发布版本: http://www.thinkphp.cn/code/175.html UEditor解压于:PUBLIC/Ueditor下(同级目录有:Common,Conf,Lib,Tpl等) 例:在Tpl/mode

百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明

  ======================================================================   [百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明]                                         ----by 夏春涛 2014-02-20   =====================================================================

手机端--富文本编辑器

问题描述 各位大神,手机端想弄一个富文本编辑器,有没有好的推荐:不是安卓...是基于浏览器的[有过成功经验的大虾,给点提示,,,谢谢] 解决方案 解决方案二:先从业务角度把东西想明白.在手机上弄一个Html编辑器,进行十几.二十几项编辑,如何操作?用手指头吗?先把这个业务设计出来,才好找实现.解决方案三:需求挺逗解决方案四: 解决方案五:楼上更逗,人家需求怎么就逗了?手机端富文本编辑器很多场景都有需求解决方案六:百度的富文本编辑器ueditor,之前用了还不错.解决方案七:没看清是手机端使用.手

web 富文本编辑器总结

前言 富文本编辑器,就是除了能输入不同的文本之外,还可以之间粘贴图画等其他的多媒体信息.也可说是所见即所得的编辑器. 目前可以使用的编辑器有很多, 在网络上有找到这样一份比较表格: 编辑器 产地 稳定 是否 轻量 技术 支持 主要优点 主要不足 Ver 速度 肥瘦 (MB) CKEditor 国外老牌 稳定 否 团队 功能强大,稳定 臃肿,加载慢 3.6 4 0.90 KindEditor 国产(上海-浩跃软件)   轻量   插件扩展   4.0 2 0.24 xhEditor 国产(台州-[

iOS实现富文本编辑器的方法详解_IOS

前言 富文本编辑器不同于文本编辑器,国内做的比较好的比如有百度的UEditor和kindEditor.但是这两个也有它的缺点:界面过于复杂.不够简洁.UI设计也比较落后.不够轻量化,这篇文章我们将给大家介绍利用iOS如何实现富文本编辑器. 实现的效果 解决思路 采用webview加载一个本地html文件,该html内部编写好js方法用于与oc相互调用 最终输出该富文本字符串传输给服务器 为什么选择这样的方式 服务端要求我最终返回的数据格式为: { @"Id":"当时新建模板这

ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法_php技巧

ThinkPHP的conf文件中的Convention.php有一个配置选项 'DEFAULT_FILTER'        =>  'htmlspecialchars', // 默认参数过滤方法 用于I函数... 默认这个方法是开启的.也就是说,我们往数据库里面存储的数据中都会经过htmlspecialchars这个函数的转义处理. 我在我的项目中使用了Kindeditor富文本编辑器(或许你使用的是Ueditor\ckeditor),通过富文本编辑器编辑文章的内容然后存储到数据库中,再从数据

基于jquery实现可定制的web在线富文本编辑器附源码下载_jquery

今天给大家介绍一款非常棒的WEB在线富文本编辑器--UMeditor,它是由百度web前端研发部开发所见即所得富文本web编辑器UEditor演变的迷你版编辑器,具有轻量,可定制,注重用户体验等特点,允许自由使用和修改代码,适用于前台快速简单回复框或后台内容编辑器. 在线预览     源码下载 如何使用? 建立一个demo.html文件,首先在需要添加编辑器的地方加入以下代码,使用style可以设置编辑器的宽度和高度. <script type="text/plain" id=&

在线富文本编辑器UMeditor使用例子

今天给大家介绍一款非常棒的WEB在线富文本编辑器--UMeditor,它是由百度web前端研发部开发所见即所得富文本web编辑器UEditor演变的迷你版编辑器,具有轻量,可定制,注重用户体验等特点,允许自由使用和修改代码,适用于前台快速简单回复框或后台内容编辑器. 如何使用? 建立一个demo.html文件,首先在需要添加编辑器的地方加入以下代码,使用style可以设置编辑器的宽度和高度. <script type="text/plain" id="myEditor&