首页 > 百度编辑器如何设置能够在一个页面中使用两个

百度编辑器如何设置能够在一个页面中使用两个

如题,一个页面上使用两个百度编辑器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();
                          })

                 });

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


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


你好,这个问题不是百度编辑器的问题,是onethink的bug(不确定一定是onethink造成的,我现在用的是一个基于onethink二次开发的框架,也是这个问题)。我昨晚尝试修复了一下,问题是由于框架没有考虑到一个页面多个uditor实例,所以框架中的写法是读取模型字段的时候,有编辑器类型的字段就引入ueditor的js文件,并创建1个imageEditor对象变量。但是这样有多个编辑器的情况下,ueditor初始化js文件和imageEditor肯定是会相互覆盖的。
我的解决方法是重写框架的加载方法,用静态变量判断是否已经加载了ueditor.all.js这个文件,如果加载了不重复加载。另外编辑器实例的创建使用!function(){}()风格,把imageEditor这个变量封装到函数中作为局部变量,千万不能放在全局中。
看你发帖已经过去两年了,不知道对你是否还有用。

【热门文章】
【热门文章】