Question

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

Answer 1

这个富文本编辑器实例化时候你传递的id不一样就可以了。
如题，一个页面上使用两个百度编辑器ueditor
能够保证 提交时两个数据不冲突，各管各的，初始化时后一个不会对前一个产生影响。
<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/ueditor.config.js?v={:SITE_VERSION}"></script>
<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/ueditor.all.js?v={:SITE_VERSION}"></script>
<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/lang/zh-cn/zh-cn.js?v={:SITE_VERSION}"></script>

<script type="text/javascript">
$('textarea[name="{$addons_data.name}"]').attr('id', 'editor_id_{$addons_data.name}'); window.UEDITOR_HOME_URL = "__STATIC__/ueditor/"; window.UEDITOR_CONFIG.initialFrameHeight = parseInt('{$addons_config.editor_height}'); window.UEDITOR_CONFIG.scaleEnabled = <eq name="addons_config.editor_resize_type" value="1">true<else />false</eq>; window.UEDITOR_CONFIG.imageUrl = '{:addons_url("EditorForAdmin://Upload/ue_upimg")}'; window.UEDITOR_CONFIG.imagePath = ''; window.UEDITOR_CONFIG.imageFieldName = 'imgFile'; //在这里扫描图片
window.UEDITOR_CONFIG.imageManagerUrl='{:addons_url("EditorForAdmin://Upload/ue_mgimg")}';//图片在线管理的处理地址
window.UEDITOR_CONFIG.imageManagerPath='';
var imageEditor{$addons_data.id} = UE.getEditor('editor_id_{$addons_data.name}'); //添加一下判断是否是单个按钮管理图片 需要执行一下代码
<if condition="isset($addons_data['btnClassName'])" >
imageEditor{$addons_data.id}.ready(function () { //设置编辑器不可用
imageEditor{$addons_data.id}.setDisabled(); //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
imageEditor{$addons_data.id}.hide(); //侦听图片上传
imageEditor{$addons_data.id}.addListener('beforeInsertImage', function (t, arg) { //将地址赋值给相应的input,只去第一张图片的路径
//console.log(t);
//console.log(arg);
<if condition="empty($addons_data['is_mult'])" > //单张情况
$(".{$addons_data.name}_preview").html(""); var imghtml = $("<img src="+arg[0].src+" width='100' height='100'/>");

$(".{$addons_data.name}_preview").append(imghtml); //储存路劲
//单张图片存储图片id
$("#editor_id_{$addons_data.name}").text(arg[0].id); //图片预览
$(".{$addons_data.name}_preview").show(); //微信预览
$('.weixin-cover-pic').attr('src',arg[0].src); //console.log(arg);

<else /> //多张情况
var srcs = ""; var srcIds = ""; //$(".{$addons_data.name}_preview").html("");
for(var i=0;i<arg.length;i++){ if(i==arg.length-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_data.name}_preview").append(imghtml); //console.log(arg[i].src);
}
$(".{$addons_data.name}_preview").append(imghtml);
$(".{$addons_data.name}_preview").show(); var oldIds = $("#editor_id_{$addons_data.name}").text(); //多张图片存储一逗号分隔的id串
$("#editor_id_{$addons_data.name}").text(oldIds+","+srcIds); </if>
}) //增加按钮className
$('.{$addons_data.btnClassName}').bind('click',function(){ var uploadImage = imageEditor{$addons_data.id}.getDialog("insertimage");
uploadImage.open();
})

});

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

Answer 2

用iframe框架。把你的UEditor HTML 编辑器放在另一个页面然后用iframe标签嵌入到当前页面。

Answer 3

朋友 我看到你这个问题摆着很久了,,并且一直都有在更新,,看来是问题还没有解决

所以我驻足依据过往经验，给你些建议。

1. 引入百度编辑器的必要js文件ueditor.config.js、ueditor.all.min.js、zh-cn.js

2. 引入编辑器css文件ueditor.css

3. <div id="myEditor"></div>
   

4. <script type="text/javascript">var editor= UE.getEditor('myEditor');</script>

5. 当然你的疑问是要多个编辑器，看下面------6. 7. 这两点

6. <div id="myEditor2"></div>

7. <script type="text/javascript">var editor= UE.getEditor('myEditor2');</script>

8. 在id项尾部加个系数做唯一标识即可

如果还有什么疑问，可以留言，看到就回你

Answer 4

第八十回　曹丕废帝篡炎刘　汉王正位继大统第八十一回　急兄仇张飞遇害　雪弟恨先主兴兵

Answer 5

可以参考：http://www.cftea.com/c/2014/06/6245.asp?utm_source=tuicool&utm_medium=referral