文档章节

百度编辑器ueditor的简单使用

白志华
 白志华
发布于 2015/10/18 10:57
字数 892
阅读 24
收藏 0
点赞 0
评论 0


    最近刚被分配了以个消息发布的任务,其中用到了富文本编辑器。以前也用过,不过这次我选择的是百度富文本编辑器ueditor1_4_3-utf8-jsp版的。

    其实看ueditor功能很强大,不过百度的设计还是很不错的。只需要稍微配置一下就可以用了。

    首先下载到 ueditor1_4_3-utf8-jsp.rar,连接地址是:http://ueditor.baidu.com/website/。我选择的是utf-8版本的。

    解压以后整体拷贝到java web项目的网页根目录下。我这里是用myeclipse建的项目,所以把ueditor拷贝到了WebRoot下即可。

    第二步,引用ueditor/jsp/lib下的jar包。你可以选择直接在Java Build Path中配置,或者直接放入WebRoot/WEB-INF/lib文件夹中,项目会自动引用该文件夹下的jar。推荐使用直接放到WEB-INF/lib下,这样你的jar是随着项目移动的,系统会按照相对路径加载项目下的jar。如果选择第一种,如果当jar文件移动了,那么这个功能就会失效的。

    第三步,在页面上引入2个js文件

<scripttype="text/javascript"src="ueditor/ueditor.config.js"></script>
<scripttype="text/javascript"src="ueditor/ueditor.all.js"></script>
    第四步,在页面的编辑器位置,添加html代码

<textareaname="content" id="myEditor"></textarea>
 <scripttype="text/javascript">
 UEDITOR_CONFIG.UEDITOR_HOME_URL = './ueditor/'; //一定要用这句话,否则你需要去ueditor.config.js修改路径的配置信息
 UE.getEditor('myEditor');
 </script>

    第五步,ueditor支持图片、文档、音乐等文件上传功能,如果你想要配置上传路径,可以修改 ueditor/jsp/config.json。

    这个文件对于每一个配置项,都明确的文字说明。附上一段图片上传的配置吧:

/* 上传图片配置项 */
   "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
   "imageFieldName": "upfile", /* 提交的图片表单名称 */
   "imageMaxSize": 2048000, /* 上传大小限制,单位B */
   "imageAllowFiles": [".png", ".jpg",".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
   "imageCompressEnable": true, /* 是否压缩图片,默认是true*/
   "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
   "imageInsertAlign": "none", /* 插入的图片浮动方式 */
   "imageUrlPrefix": "", /* 图片访问路径前缀 */
   "imagePathFormat":"_images/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

第六步,ueditor支持自定义功能,界面上显示的功能都是可配置的,只要在ueditor/ueditor.config.js的toolbar中删改配置即可,代码如下:

//工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义 
        , toolbars: [[ 
            'fullscreen', 'source', '|', 'undo', 'redo', '|', 
            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 
            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 
            'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 
            'directionalityltr', 'directionalityrtl', 'indent', '|', 
            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|', 
            'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', 
            'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'pagebreak', 'template', 'background', '|', 
            'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|', 
            'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|', 
            'searchreplace', 'help', 'drafts' 
        ]]
    看起来是6步,其实每一步都很简单了。为了让小伙伴们看得更清楚些,来张效果图吧:



    效果还不错吧,其实,看起来复杂的功能,实现起来却很简单。而简单的功能,实现起来可能会很复杂。我们不只是使用那么看起来复杂,使用起来简单的各种开源组件,更要学习,如何把复杂的功能封装起来,对外提供简单的接口,让别人也能简单使用。

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

© 著作权归作者所有

共有 人打赏支持
白志华
粉丝 29
博文 260
码字总数 57524
作品 0
长沙
程序员
量子幽灵/Ueditor For WordPress

强大的百度开源富文本编辑器Ueditor正式登陆wordpress! 此插件最早由taoqili开发,SamLiu改进,但两位作者均不再发布更新版本,大山在此基础上更新到Ueditor1.4.3。在此感谢两位前辈的付出。...

量子幽灵 ⋅ 2016/02/04 ⋅ 0

【军哥谈CI框架】之CI中集成百度UEditor

Hello,各位亲,话说上一回,军哥带大家用 JQuery写了一个全国城市级联菜单的例子 ,不知道亲们学会了多少,是否自己可以独立写出来了呢。 军哥很是期待大家学有所获的,有不明白的地方随时留...

jayjun0805 ⋅ 2012/11/14 ⋅ 6

网站如何集成百度UEditor编辑器

在平时的网站维护使用过程中,富文本编辑器是网站必不可少的元素之一。现在市面上各种编辑器功能设计参差不齐,自己做了几个网站都是用蝉知建站系统做的,而蝉知默认内置的编辑器是KindEdito...

it1000001001 ⋅ 2017/06/20 ⋅ 1

010.UEditor文档

UEditor的简单使用 在Java Web阶段和SSM框架阶段,我们的课程设计中都会使用到富文本编辑器,目前流行的编辑器很多 KindEditor/CKEditor/UEditor/WangEditor等,这里我们使用的是百度开源的,这里...

胖先森 ⋅ 2017/11/27 ⋅ 0

百度编辑器-Ueditor

 前段时间发表过一篇关于“KindEditor在JSP中使用”的博文。这几天在沈阳东软进行JavaWeb方面的实习工作,在一个CMS系统的后台和博客板块中又要用到文本编辑器,突然发现了这个——百度编辑...

zyt_1978 ⋅ 2016/05/28 ⋅ 1

Ueditor实现分页问题!

大家好,我是一名程序汪,在此使用百度编辑器,却发现页面分页不知如何呈现,查看Ueditor的技术文档,似乎也仅仅只是说会提交给后台做处理,请问是否有更详细的代码提供参考?我在官方的编辑...

亡灵_Undead ⋅ 2015/05/06 ⋅ 3

百度推富文本开源编辑器 Ueditor ,采用BSD授权

腾讯科技讯(乐天)7月12日消息,百度近日正式发布Ueditor富文本Web编辑器(ueditor.baidu.com),向第三方开发者和团队开放编辑器源代码。 据了解,这款所见即所得的编辑器由百度web前端研发...

红薯 ⋅ 2011/07/12 ⋅ 27

OSChina 写博客增加 UEditor 编辑器选项

各位 OSCers 们,OSChina 的博客编辑页面已经为大家准备了使用了来自百度的 UEditor 编辑器的选项。现在你可以使用包括 Markdown、Kindeditor 和 UEditor 三种编辑器。 UEditor 编辑器在处理...

oschina ⋅ 2013/12/05 ⋅ 61

集成到 Django 的 Ueditor HTML 编辑器--DUEditor

DUEditor 是 Django 的 UEditor 插件。 本项目改造自DjangoUeditor,Ueditor HTML编辑器是百度开源的HTML编辑器。 本模块帮助在Django应用中集成百度Ueditor HTML编辑器,支持Python3,上传...

dhcn ⋅ 2017/10/02 ⋅ 0

UEditor 1.2.1 发布,百度开源富文本编辑器

UEditor1.2.1 发布了,UEditor是由百度Web前端研发部开发的所见即所得的富文本在线编辑器,具有轻量,可定制,注重用户体 验等特点,开源基于BSD协议,允许互联网开发者自由传播和使用代码。...

oschina ⋅ 2012/05/31 ⋅ 18

没有更多内容

加载失败,请刷新页面

加载更多

下一页

RabbitMQ学习以及与Spring的集成(三)

本文介绍RabbitMQ与Spring的简单集成以及消息的发送和接收。 在RabbitMQ的Spring配置文件中,首先需要增加命名空间。 xmlns:rabbit="http://www.springframework.org/schema/rabbit" 其次是模...

onedotdot ⋅ 13分钟前 ⋅ 0

JAVA实现仿微信红包分配规则

最近过年发红包拜年成为一种新的潮流,作为程序猿对算法的好奇远远要大于对红包的好奇,这里介绍一种自己想到的一种随机红包分配策略,还请大家多多指教。 算法介绍 一、红包金额限制 对于微...

楠木楠 ⋅ 25分钟前 ⋅ 0

Python 数电表格格式化 xlutils xlwt xlrd的使用

需要安装 xlutils xlwt xlrd 格式化前 格式化后 代码 先copy读取的表格,然后按照一定的规则修改,将昵称中的学号提取出来替换昵称即可 from xlrd import open_workbookfrom xlutils.copy ...

阿豪boy ⋅ 55分钟前 ⋅ 0

面试题:使用rand5()生成rand7()

前言 读研究生这3 年,思维与本科相比变化挺大的,这几年除了看论文、设计方案,更重要的是学会注重先思考、再实现,感觉更加成熟吧,不再像个小P孩,人年轻时总会心高气傲。有1 道面试题:给...

初雪之音 ⋅ 55分钟前 ⋅ 0

Docker Toolbox Looks like something went wrong

Docker Toolbox 重新安装后提示错误:Looks like something went wrong in step ´Checking if machine default exists´ 控制面板-->程序与应用-->启用或关闭windows功能:找到Hyper-V,如果处......

随你疯 ⋅ 今天 ⋅ 0

Guacamole 远程桌面

本文将Apache的guacamole服务的部署和应用,http://guacamole.apache.org/doc/gug/ 该链接下有全部相关知识的英文文档,如果水平ok,可以去这里仔细查看。 一、简介 Apache Guacamole 是无客...

千里明月 ⋅ 今天 ⋅ 0

nagios 安装

Nagios简介:监控网络并排除网络故障的工具:nagios,Ntop,OpenVAS,OCS,OSSIM等开源监控工具。 可以实现对网络上的服务器进行全面的监控,包括服务(apache、mysql、ntp、ftp、disk、qmail和h...

寰宇01 ⋅ 今天 ⋅ 0

AngularDart注意事项

默认情况下创建Dart项目应出现以下列表: 有时会因为不知明的原因导致列表项缺失: 此时可以通过以下步骤解决: 1.创建项目涉及到的包:stagehand 2.执行pub global activate stagehand或pub...

scooplol ⋅ 今天 ⋅ 0

Java Web如何操作Cookie的添加修改和删除

创建Cookie对象 Cookie cookie = new Cookie("id", "1"); 修改Cookie值 cookie.setValue("2"); 设置Cookie有效期和删除Cookie cookie.setMaxAge(24*60*60); // Cookie有效时间 co......

二营长意大利炮 ⋅ 今天 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部