zoukankan      html  css  js  c++  java
  • 百度ueditor 编辑器使用问题收集

    1 setContent 有时不起作用
    页面区显示编辑内容的控件如下
    <textarea id="contents" name="contents" style=" 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 

    5 后端配置项没有正常加载,上传插件不能正常使用
    如果出现上面的问题,你在浏览器中打开
    http://你的域名/ueditor/net/controller.ashx
    就可以看到出现的信息,根据信息去修改即可,当打开没有问题后,打开下面的地址
    http://你的域名/ueditor/net/controller.ashx?action=config

    能正常显示配置信息说明配置成功了

    6 编辑时换行<p></p>问题
    在编辑器里换行后,在代码查看发现每个换行的内容都被<p></p>修饰,其实想要的就是<br>,可通过在ueditor.all.js里

    约6720行,找到如下这段:

        var Editor = UE.Editor = function (options) {
            var me = this;
            me.uid = uid++;
            EventBase.call(me);
            me.commands = {};
            me.options = utils.extend(utils.clone(options || {}), UEDITOR_CONFIG, true);
            //this is add by 20191029 enterTag
            me.options.enterTag = "br";

    增加的这行 me.options.enterTag = "br"; 的意思是以<br>作为换行符

    或者直接改默认配置:

    UE.Editor.defaultOptions = function(editor){

        var _url = editor.options.UEDITOR_HOME_URL;
        return {
            isShow: true,
            initialContent: '',
            initialStyle:'',
            autoClearinitialContent: false,
            iframeCssUrl: _url + 'themes/iframe.css',
            textarea: 'editorValue',
            focus: false,
            focusInEnd: true,
            autoClearEmptyNode: true,
            fullscreen: false,
            readonly: false,
            zIndex: 999,
            imagePopup: true,
            enterTag: 'p',
            customDomain: false,
            lang: 'zh-cn',
            langPath: _url + 'lang/',
            theme: 'default',
            themePath: _url + 'themes/',
            allHtmlEnabled: false,
            scaleEnabled: false,
            tableNativeEditInFF: false,
            autoSyncData : true,
            fileNameFormat: '{time}{rand:6}'
        }
    };

    enterTag: 默认为p 改为br
    ————————————————
    版权声明:本文为CSDN博主「Jack2013tong」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/huwei2003/java/article/details/51593211

  • 相关阅读:
    搭建自己的React+Typescript环境(一)
    搭建最简React环境
    react-router v5笔记
    React 教程:如何使用 webpack 4 和 Babel 7 构建 React 应用(2018)
    JavaScript 笔记
    JavaScript常用方法
    React和相关工具链的理解
    redux-thunk
    前端构建之NPM
    react-redux总结
  • 原文地址:https://www.cnblogs.com/ExMan/p/13158589.html
Copyright © 2011-2022 走看看