Ueditor的两种定制方式

时间:2024-04-08 11:34:19

引言

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

官网:http://ueditor.baidu.com/website/

在线定制:http://ueditor.baidu.com/website/download.html#ubuilder

Asp.Net和Ueditor

在项目中的应用,除非你知道,你需要的富文本框需要哪些功能,你才有可以在线定制,然后下载,但是多数情况下,对需求还是不肯定的,这种情况下,就需要将所有的功能都下载下来,然后根据实际需求,修改配置文件,添加或者移除功能。

在官网中你可以下载:

Ueditor的两种定制方式

完整的demo如下:

Ueditor的两种定制方式

在应用的时候需要引入:

Ueditor的两种定制方式

其中ueditor.config.js就是ueditor的配置文件。找到toolbars(为了方便这里,将toobars重新排版了),这里加了注释,你可以根据需要,将不需要的功能注释,就可以定制你需要的富文本编辑器了。这里lz已添加注释,助于理解。

 , toolbars: [
[
'fullscreen'//全屏
, 'source'//html源代码
, '|'
, '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'//居中
, '|'
, 'insertimage'//图片
, 'emotion'//表情
, 'scrawl'//涂鸦
, 'insertvideo'//视频
, 'music'//音乐
, 'attachment'//附件
, 'map'//百度地图
, 'gmap'//google地图
, 'insertframe'//插入Iframe
, 'insertcode'//代码语言
, 'webapp'//百度应用
, 'pagebreak'//分页
, 'template'//模版
, 'background'//背景
, '|'
, 'horizontal'//分割线
, 'date'//日期
, 'time'//时间
, 'spechars'//特殊字符
, 'snapscreen'//截图
, 'wordimage'//图片转存
, '|'
, 'inserttable'//插入表格
, 'deletetable'//删除表格
, 'insertparagraphbeforetable'//表格前插入行
, 'insertrow'//前插入行
, 'deleterow'//删除行
, 'insertcol'//前插入列
, 'deletecol'//删除列
, 'mergecells'//合并多个单元格
, 'mergeright'//右合并单元格
, 'mergedown'//下合并单元格
, 'splittocells'//完全拆分单元格
, 'splittorows'//拆分成行
, 'splittocols'//拆分成列
, 'charts'//图表
, '|'
, 'print'//打印
, 'preview'//预览
, 'searchreplace'//查找与替换
, 'help'//帮助
, 'drafts'//草稿箱
]
]

里面的内容,也很好理解,顺序,也是按照ueditor上面按钮的现实顺序排列的。测试,将后面几行注释。
Ueditor的两种定制方式

结果

Ueditor的两种定制方式

这样,你就可以定制自己希望的功能了。

总结

项目中,有用到,虽然很简单,还是硬着头皮总结了一下,以后会总结一下ueditor在项目中的具体应用。如果您使用过,不妨留个脚印,或者加入楼主的qq群,一起学习,ueditor的使用,个人认为,最头疼的莫过于路径的配置了。