Ueditor的两种定制方式
2013-12-25 19:10
435 查看
引言
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码...官网:http://ueditor.baidu.com/website/
在线定制:http://ueditor.baidu.com/website/download.html#ubuilder
Asp.Net和Ueditor
在项目中的应用,除非你知道,你需要的富文本框需要哪些功能,你才有可以在线定制,然后下载,但是多数情况下,对需求还是不肯定的,这种情况下,就需要将所有的功能都下载下来,然后根据实际需求,修改配置文件,添加或者移除功能。在官网中你可以下载:
完整的demo如下:
在应用的时候需要引入:
其中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在项目中的具体应用。如果您使用过,不妨留个脚印,或者加入楼主的qq群,一起学习,ueditor的使用,个人认为,最头疼的莫过于路径的配置了。相关文章推荐
- Ueditor的两种定制方式
- Yii定制分页,两种分页方式CLinkPager和CListPager
- Yii定制分页,两种分页方式CLinkPager和CListPager
- Yii定制分页,两种分页方式CLinkPager和CListPager
- 两种定制行为的方式:使用参数和使…
- Yii定制分页,两种分页方式CLinkPager和CListPager
- Android Studio 中两种方式定制自己的代码注释头
- 实现TreeSet定制排序两种方式
- Android Studio 中两种方式定制自己的代码注释头
- 入门——创建桌面快捷方式两种方法
- Service的两种启动方式
- 软件公司的两种管理方式
- JSP连接数据库的两种方式:Jdbc-Odbc桥和Jdbc直连(转)
- struts2 接受参数的两种方式(属性驱动和模型驱动)
- Map元素的两种取出方式练习
- Struts2的获取Session的两种方式
- iOS开发小技巧--自定义带有占位文字的TextView(两种方式)
- 轮播广告两种方式
- RDD转换DataFrame的两种方式的比较
- C++定义类和对象的两种方式–对比Java