百度编辑器(UEditor)自定义工具栏

百度编辑器(UEditor)自定义工具栏的自定义

百度编辑器默认功能比较齐全,但是不一定是我们所需要的,有的功能可以去掉,用自己想要的就可以了,可以参考百度官方文档!

百度编辑器默认配置展示界面

如何自定义工具栏:

方法一:在实例化编辑器的时候红色文字部分便是你所需要的
[javascript]  view plain  copy
  1. toolbars:[['FullScreen''Source''Undo''Redo','bold','test']],   

[javascript]  view plain  copy
  1. <script type="text/Javascript">    
  2.     var editor = UE.getEditor('container',{    
  3.         //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个    
  4.         toolbars:[['FullScreen''Source''Undo''Redo','bold','test']],    
  5.         //focus时自动清空初始化时的内容    
  6.         autoClearinitialContent:true,    
  7.         //关闭字数统计    
  8.         wordCount:false,    
  9.         //关闭elementPath    
  10.         elementPathEnabled:false,    
  11.         //默认的编辑区域高度    
  12.         initialFrameHeight:300    
  13.         //更多其他参数,请参考ueditor.config.js中的配置项    
  14.     });    
  15. </script>  

方法二:

直接修改ueditor.config.js配置文件

 找到:红色框中的内容并注释掉重新选中自己需要的


第一步:

第二步:修改成你所需要的比如

[javascript]  view plain  copy
  1. , toolbars: [[  
  2.         'link'//超链接  
  3.         'unlink'//取消链接  
  4.         '|',  
  5.         'forecolor'//字体颜色  
  6.         'backcolor'//背景色  
  7.         'fontfamily'//字体  
  8.         'fontsize'//字号          
  9.         '|',        
  10.         'bold'//加粗  
  11.         'italic'//斜体  
  12.         'underline'//下划线  
  13.         'strikethrough'//删除线  
  14.         '|',  
  15.         'formatmatch'//格式刷  
  16.         'removeformat'//清除格式  
  17.         '|',  
  18.         'insertorderedlist'//有序列表  
  19.         'insertunorderedlist'//无序列表  
  20.         '|',  
  21.         'inserttable'//插入表格  
  22.         'paragraph'//段落格式  
  23.         'simpleupload'//单图上传  
  24.         'imagecenter'//居中  
  25.         'attachment'//附件  
  26.           
  27.         '|',  
  28.         'justifyleft'//居左对齐  
  29.         'justifycenter'//居中对齐  
  30.         'horizontal'//分隔线  
  31.         '|',  
  32.         'blockquote'//引用  
  33.         'insertcode'//代码语言  
  34.           
  35.         '|',  
  36.         'source'//源代码  
  37.         'preview'//预览  
  38.         'fullscreen'//全屏  
  39.         ]]  

展现效果:

完整的按钮列表参考:

[javascript]  view plain  copy
  1. toolbars: [  
  2.     [  
  3.         'anchor'//锚点  
  4.         'undo'//撤销  
  5.         'redo'//重做  
  6.         'bold'//加粗  
  7.         'indent'//首行缩进  
  8.         'snapscreen'//截图  
  9.         'italic'//斜体  
  10.         'underline'//下划线  
  11.         'strikethrough'//删除线  
  12.         'subscript'//下标  
  13.         'fontborder'//字符边框  
  14.         'superscript'//上标  
  15.         'formatmatch'//格式刷  
  16.         'source'//源代码  
  17.         'blockquote'//引用  
  18.         'pasteplain'//纯文本粘贴模式  
  19.         'selectall'//全选  
  20.         'print'//打印  
  21.         'preview'//预览  
  22.         'horizontal'//分隔线  
  23.         'removeformat'//清除格式  
  24.         'time'//时间  
  25.         'date'//日期  
  26.         'unlink'//取消链接  
  27.         'insertrow'//前插入行  
  28.         'insertcol'//前插入列  
  29.         'mergeright'//右合并单元格  
  30.         'mergedown'//下合并单元格  
  31.         'deleterow'//删除行  
  32.         'deletecol'//删除列  
  33.         'splittorows'//拆分成行  
  34.         'splittocols'//拆分成列  
  35.         'splittocells'//完全拆分单元格  
  36.         'deletecaption'//删除表格标题  
  37.         'inserttitle'//插入标题  
  38.         'mergecells'//合并多个单元格  
  39.         'deletetable'//删除表格  
  40.         'cleardoc'//清空文档  
  41.         'insertparagraphbeforetable'//"表格前插入行"  
  42.         'insertcode'//代码语言  
  43.         'fontfamily'//字体  
  44.         'fontsize'//字号  
  45.         'paragraph'//段落格式  
  46.         'simpleupload'//单图上传  
  47.         'insertimage'//多图上传  
  48.         'edittable'//表格属性  
  49.         'edittd'//单元格属性  
  50.         'link'//超链接  
  51.         'emotion'//表情  
  52.         'spechars'//特殊字符  
  53.         'searchreplace'//查询替换  
  54.         'map'//Baidu地图  
  55.         'gmap'//Google地图  
  56.         'insertvideo'//视频  
  57.         'help'//帮助  
  58.         'justifyleft'//居左对齐  
  59.         'justifyright'//居右对齐  
  60.         'justifycenter'//居中对齐  
  61.         'justifyjustify'//两端对齐  
  62.         'forecolor'//字体颜色  
  63.         'backcolor'//背景色  
  64.         'insertorderedlist'//有序列表  
  65.         'insertunorderedlist'//无序列表  
  66.         'fullscreen'//全屏  
  67.         'directionalityltr'//从左向右输入  
  68.         'directionalityrtl'//从右向左输入  
  69.         'rowspacingtop'//段前距  
  70.         'rowspacingbottom'//段后距  
  71.         'pagebreak'//分页  
  72.         'insertframe'//插入Iframe  
  73.         'imagenone'//默认  
  74.         'imageleft'//左浮动  
  75.         'imageright'//右浮动  
  76.         'attachment'//附件  
  77.         'imagecenter'//居中  
  78.         'wordimage'//图片转存  
  79.         'lineheight'//行间距  
  80.         'edittip '//编辑提示  
  81.         'customstyle'//自定义标题  
  82.         'autotypeset'//自动排版  
  83.         'webapp'//百度应用  
  84.         'touppercase'//字母大写  
  85.         'tolowercase'//字母小写  
  86.         'background'//背景  
  87.         'template'//模板  
  88.         'scrawl'//涂鸦  
  89.         'music'//音乐  
  90.         'inserttable'//插入表格  
  91.         'drafts'// 从草稿箱加载  
  92.         'charts'// 图表  
  93.     ]  
  94. ]  
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页