Ueditor 百度编辑器自定义工具栏与功能(ueditor+layui+ci)

最近由于项目需要在富文本中，添加专题模块（固定样式）插入到富文本的某个地方。根据思路，分为以下几步。

第一步：样式及JS修改

在ueditor.css中添加按钮样式

在ueditor.config.js设置按钮KEY

重要的一步，在ueditor.all.js 中添加按钮，搜索 btnCmds，不然不会显示到工具栏上。

基础配置完成，接下来就是完成按钮功能，我的功能是弹出一个层，选择好数据之后，把整个层的HTML插入到焦点位置

第二步，按钮功能

直接在ueditor.all.js 末尾添加如下JS：


/*** 插入专题* @command craftsmanspecial* @method execCommand* @param { String } cmd 命令字符串* @example* ```javascript* editor.execCommand('craftsmanspecial');* ```*/
UE.commands['craftsmanspecial'] = {execCommand : function() {var me = this;try {if(typeof SpecialLookup === "function") {SpecialLookup(me.key);//回传富文本所在的元素ID} else {console.log("SpecialLookup is not full");}} catch(e) {console.log("SpecialLookup:"+e);    }},queryCommandState : function() {return false;}};

在使用富文本的页面，加入layui弹框方法

window.SpecialLookup = function(div_id){layui.use(['form', 'upload'],function(){layer.open({type:2,content: 'select_special_lookup.html?hd_id=hd_special_'+div_id+'&jq_fn=selectSpecialLookup&hd_css='+div_id,title:'插入专题',area: ['900px', '700px'],cancel: function(){}});});}

在弹框里面，查找、组合所需数据，通过回调方法，回传到父页面的方法

window.selectSpecialLookup = function(hd_id,hd_css,special_type,special_html,special_json){var special_html_div = "<div data-type='"+special_type+"' data-json='"+special_json+"' class='special_ueditor_css_craftsman'>专题效果，需预览查看！</div>";if(hd_id.indexOf('edit_')>-1){edit_ue.execCommand('inserthtml',special_html_div,true);}else{add_ue.execCommand('inserthtml',special_html_div,true);}}

注：inserthtml命令，第三个参数传true，表示原样插入html代码，否则会【官方：

警告：注意:该命令会对当前选区的位置，对插入的内容进行过滤转换处理。过滤的规则遵循html语意化的原则。

】

最终的效果如下：

PS：欢迎留言交流学习！

Ueditor 百度编辑器自定义工具栏与功能(ueditor+layui+ci)相关推荐

ueditor 工具栏配置_百度ueditor编辑器自定义工具栏
百度ueditor编辑器自定义工具栏: //引入编辑器配置文件和核心文件 //内容容器 var ue = UE.getEditor('content', { toolbars: [ [ //自定义的工 ...
ueditor百度编辑器destoon的word图片转存功能
destoon6.0或destoon7.0整合ueditor百度编辑器后,需要把word中的图片直接复制到编辑器,然后点击转存按钮,即可批量保存上传,如下图新版的百度编辑器可能要修改ueditor. ...
ueditor百度编辑器常见报错的解决方法
如果是第一次使用ueditor百度编辑器,或者对它不熟悉的情况下使用,会出现一些常见问题和报错.怎么使用建议参考ueditor官网,这里只谈一些常见错误. 问题:'UE' is not defind ...
百度在线编辑器显示html,UEditor百度编辑器中JS/html代码（script标签）被过滤的解决办法...
作为一名程序员,在文章中经常会插入各种代码,大部分代码都不会发生问题,但div和script标签是经常会被使用到的. 而在之前的文章编写过程中,插入JS代码后,第一次文章会显示正常,而之后在后台编辑器 ...
Vue使用UEditor百度编辑器，上传图片服务配置问题，查看版本
文章目录 Vue使用UEditor百度编辑器,上传图片服务配置问题,查看版本 1.前言 2.环境配置 3.查看版本 4.配置demo 4-1.制作demo模块 4-2.配置后端服务 4-3.重启Tom ...
UEditor 百度编辑器工具栏新增自定义按钮及功能
由于项目中用到了强大的UEditor富文本在线编辑器,因项目相关功能需求,而在UEditor编辑器原有的功能插件中没有我们想要的功能,所以就要在UEditor中新增一个(多个方法也一样)按扭并添加相应 ...
ueditor百度编辑器工具栏乱码
项目中使用的是百度编辑器1.4.3:我是从另外一个在使用的项目中复制过来的,但就很神奇的出现了工具栏乱码,百度了很多方法也没解决,后面终于解决了首先,需要检查一下开发工具的编码格式,还有就是调用u ...
ueditor抓取远程图片php版,Ueditor百度编辑器远程抓取图片的开启与关闭
前言这几天一直被百度编辑器自动抓取远程图片的功能困扰.因为这个功能吧,总是时灵时不灵的.有时候会抓取远程图片,有时候又不会抓取远程图片.相信各位都有遇到过.本人对编辑器没有太多的了解,下面如果有讲错 ...
Ueditor百度编辑器中的 setContent()方法的使用
百度编辑器Ueditor所提供的setContent()方法作用是:设置或者改变编辑器里面的文字内容或html内容函数说明:setContent(string,boolean); 参数string ...

Ueditor 百度编辑器自定义工具栏与功能(ueditor+layui+ci)

Ueditor 百度编辑器自定义工具栏与功能(ueditor+layui+ci)相关推荐

最新文章

热门文章

Ueditor 百度编辑器 自定义工具栏与功能(ueditor+layui+ci)

Ueditor 百度编辑器 自定义工具栏与功能(ueditor+layui+ci)相关推荐

最新文章

热门文章

Ueditor 百度编辑器自定义工具栏与功能(ueditor+layui+ci)

Ueditor 百度编辑器自定义工具栏与功能(ueditor+layui+ci)相关推荐