百度ueditor 编辑器使用问题收集

百度ueditor 编辑器使用问题收集

1 setContent 有时不起作用

页面区显示编辑内容的控件如下

<textarea id="contents" name="contents" style="width: 100%; height: 300px"></textarea>

js中

在创建编辑器后，setContent 内容显示不出来，但偶尔有可以的时候，如下

var ue = UE.getEditor("contents"); // contents 为textarea 的id

ue.setContent(“待显示内容”);

改成如下方式即可

var ue = UE.getEditor("contents");

ue.addListener("ready", function() {

                        // editor准备好之后才可以使用

                        ue.setContent(“待显示内容”);
                    });

一般情况下上面的是没有问题，但偶尔还是会有内容赋值不上的情况索性再加了一个，如下：

ue.addListener("ready", function () {

                        // editor准备好之后才可以使用

                        ue.setContent(result.Contents);

                    });

                    ue.ready(function () {

                        // editor准备好之后才可以使用

                        ue.setContent(result.Contents);

                    });

这样后基本上没有问题了，至少目前还没发现

2 添加的html元素样式不起作用,div等元素被替换了

首先在ueditor.all.js文件内搜索allowDivTransToP,找到如下的代码，将true设置为false

me.setOpt('allowDivTransToP',false);

//默认的过滤处理

//进入编辑器的内容处理

然后再接着下边的addInputRule方法中将switch代码段中的case style,script都给注释或者删掉。

me.addInputRule(function (root) {

//删除switch下的case style 和script

switch (node.tagName) {

case 'a':

if (val = node.getAttr('href')) {

node.setAttr('_href', val)

}

break;

完成以上操作之后，保存即可。再次插入html时，样式就可以显示了。

解释一下以上操作的意义。

第一步将allowDivTransToP设置为false是因为默认的设置是将div自动转换为p，这样写好的样式就找不到相应的div

了，所以才渲染不上的。

第二步将addInputRule函数中的switch 代码段中的case style ，script选择给删除或者注释，是为了避免出现编辑器将style或script自动的转换成别的标签。

好了，大家可以试一试，看看效果。

3 隐藏部分不要的按钮

在ueditor.config.js文件中，找到 toolbars: [[

里面的内容就是各个工具了，比如：

, toolbars: [[

            'fullscreen', 'source', '|', 'undo', 'redo', '|',

            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall',
'cleardoc', '|',

            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',

            'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',

            'directionalityltr', 'directionalityrtl', 'indent', '|',

            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',

            'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',

            'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',

            'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',

            'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',

            'print', 'preview', 'searchreplace', 'help', 'drafts'

        ]]

直接去掉不想要显示的按钮的名字，

也可以用下面的方法，在页面引用编辑器实例化的时候，如下：

var ue = UE.getEditor('container', {

    toolbars: [

        ['fullscreen', 'source', 'undo', 'redo', 'bold']

    ],

    autoHeightEnabled: true,

    autoFloatEnabled: true

});

这样去实例化 然后toolbars里面的单词就是你要显示的按钮

toolbars所有按钮单词对应说明文档地址
http://fex.baidu.com/ueditor/#start-toolbar

4 UEditor编辑器如何关闭抓取远程图片本地化功能

解决办法：

1、打开ueditor.all.js

   搜索“抓取”的时候出现以下代码：

   

// plugins/catchremoteimage.js  

///import core  

///commands 远程图片抓取  

///commandsName  catchRemoteImage,catchremoteimageenable  

///commandsTitle  远程图片抓取  

/** 

 * 远程图片抓取,当开启本插件时所有不符合本地域名的图片都将被抓取成为本地服务器上的图片 

 */  

UE.plugins['catchremoteimage'] = function () {  

    var me = this,  

        ajax = UE.ajax;  

    /* 设置默认值 */  

    if (me.options.catchRemoteImageEnable === false) return;  

    me.setOpt({  

        catchRemoteImageEnable: false  

    });  

    //.......  

};  

发现：catchRemoteImageEnable

2、打开ueditor.config.js

    在空白处添加

    

//抓取远程图片是否开启,默认true  

,catchRemoteImageEnable:false 

=== end ===