如何在同一个页面加载两个或多个百度的 UEditor HTML 编辑器

如何在同一个页面加载两个或多个百度的 UEditor HTML 编辑器,第1张

出现的问题:在同一个页面中,创建了两个以上百度的 UEditor 编辑器,但是只有一个起作用了,在向第二个中插入内容时,总插入到第一个中去了。

解决方法:

  editorcontent = new baidueditoruiEditor();

//只对第一个起作用

//        editorcontentrender('content'); 

//        editorcontentrender('content1');

//        editorcontentrender('content2');

//所有的都起作用

        UEgetEditor("content");

        UEgetEditor("content1");

        UEgetEditor("content2");

  百度的Ueditor编辑器出于安全性考虑,用户在html模式下粘贴进去的html文档会自动被去除样式和转义。虽然安全的,但是非常不方便。

  做一下修改把这个功能去掉。

  一、打开ueditoralljs

  二、大概9300行找到 ///plugin 编辑器默认的过滤转换机制,把下面的

  'allowDivTransToP':true

  值改成false。为true的时候会自动把div转成p。

  三、大概9429行,有个case 'li',这个是把li里面的样式去掉,把这个case注释掉。

  四、大概14058行,下面的第一个utilseach功能注释掉,这个是自动给li里面的内容增加一个p。

  五、大概14220行,

  nodeclassName = utilstrim(nodeclassNamereplace(/list-paddingleft-\w+/,'')) + ' list-paddingleft-' + type;

  注释掉,这个是自动给ul增加一个内置的样式。

  下面的14222行

  listylecssText && (listylecssText = '');

  注释掉,这个是自动去除粘贴进去的代码的li的style样式

  至此,我们粘贴进去的html格式的ul和li就不会被转义了。

这个富文本编辑器实例化时候你传递的id不一样就可以了。

如题,一个页面上使用两个百度编辑器ueditor

能够保证 提交时两个数据不冲突,各管各的,初始化时后一个不会对前一个产生影响。

<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/ueditorconfigjsv={:SITE_VERSION}"></script>

<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/ueditoralljsv={:SITE_VERSION}"></script>

<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/lang/zh-cn/zh-cnjsv={:SITE_VERSION}"></script>

<script type="text/javascript">

$('textarea[name="{$addons_dataname}"]')attr('id', 'editor_id_{$addons_dataname}'); windowUEDITOR_HOME_URL = "__STATIC__/ueditor/"; windowUEDITOR_CONFIGinitialFrameHeight = parseInt('{$addons_configeditor_height}'); windowUEDITOR_CONFIGscaleEnabled = <eq name="addons_configeditor_resize_type" value="1">true<else />false</eq>; windowUEDITOR_CONFIGimageUrl = '{:addons_url("EditorForAdmin://Upload/ue_upimg")}'; windowUEDITOR_CONFIGimagePath = ''; windowUEDITOR_CONFIGimageFieldName = 'imgFile'; //在这里扫描

windowUEDITOR_CONFIGimageManagerUrl='{:addons_url("EditorForAdmin://Upload/ue_mgimg")}';//在线管理的处理地址

windowUEDITOR_CONFIGimageManagerPath='';

var imageEditor{$addons_dataid} = UEgetEditor('editor_id_{$addons_dataname}'); //添加一下判断是否是单个按钮管理 需要执行一下代码

<if condition="isset($addons_data['btnClassName'])" >

imageEditor{$addons_dataid}ready(function () { //设置编辑器不可用

imageEditor{$addons_dataid}setDisabled(); //隐藏编辑器,因为不会用到这个编辑器实例,所以要隐藏

imageEditor{$addons_dataid}hide(); //侦听上传

imageEditor{$addons_dataid}addListener('beforeInsertImage', function (t, arg) { //将地址赋值给相应的input,只去第一张的路径

//consolelog(t);

//consolelog(arg);

<if condition="empty($addons_data['is_mult'])" > //单张情况

$("{$addons_dataname}_preview")html(""); var imghtml = $("<img src="+arg[0]src+" width='100' height='100'/>");

$("{$addons_dataname}_preview")append(imghtml); //储存路劲

//单张存储id

$("#editor_id_{$addons_dataname}")text(arg[0]id); //预览

$("{$addons_dataname}_preview")show(); //微信预览

$('weixin-cover-pic')attr('src',arg[0]src); //consolelog(arg);

<else /> //多张情况

var srcs = ""; var srcIds = ""; //$("{$addons_dataname}_preview")html("");

for(var i=0;i<arglength;i++){ if(i==arglength-1){

srcs = srcs + arg[i]src;

srcIds = arg[i]id;

}else{

srcs = srcs + arg[i]src+"|";

srcIds = srcIds + arg[i]id+",";

} var imghtml = $("<img src="+arg[i]src+" width='100' height='100'/>");

$("{$addons_dataname}_preview")append(imghtml); //consolelog(arg[i]src);

}

$("{$addons_dataname}_preview")append(imghtml);

$("{$addons_dataname}_preview")show(); var oldIds = $("#editor_id_{$addons_dataname}")text(); //多张存储一逗号分隔的id串

$("#editor_id_{$addons_dataname}")text(oldIds+","+srcIds); </if>

}) //增加按钮className

$('{$addons_databtnClassName}')bind('click',function(){ var uploadImage = imageEditor{$addons_dataid}getDialog("insertimage");

uploadImageopen();

})

});

这是源代码了,请问各位,应该如何该

百度UEditor编辑器官方并没有出WordPress的插件,但是网上的大神们还是做出来了。

百度搜索“成航先森”进入博客,在博客右上角搜索“百度UEditor编辑器”就有百度UEditor编辑器1431版本的下载,以及如何自己将最新版本的1433版本集成到WordPress。

首页的轮播图中也有下载链接。

加油。

百度编辑器支持一键排版。

请登录百度编辑器官网的API栏目查看。http://ueditorbaiducom/doc/#COMMAND::autotypeset

DABAN RP主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
网站模板库 » 如何在同一个页面加载两个或多个百度的 UEditor HTML 编辑器

0条评论

发表评论

提供最优质的资源集合

立即查看 了解详情