ueditor插件简单使用

最新推荐文章于 2019-07-09 19:57:54 发布

weixin_30951743

最新推荐文章于 2019-07-09 19:57:54 发布

阅读量235

点赞数

文章标签： ui javascript ViewUI

原文链接：http://www.cnblogs.com/chiangfai/p/5830262.html

版权

下载地址：http://ueditor.baidu.com/website/download.html

建议同时下载所需版本及完整源码。 [ 1.4.3 JSP + 完整源码src ]

简单配置说明

解压JSP版，放置项目中。

1，引入所需文件；

<@script type="text/javascript" src="${page.url.context}/res/components/ueditor/ueditor.config.js"></@script>
<@script type="text/javascript" src="${page.url.context}/res/components/ueditor/ueditor.all.js"></@script>
<@script type="text/javascript" src="${page.url.context}/res/components/ueditor/lang/zh-cn/zh-cn.js"></@script>

2，实例化编辑器；

方法一：

<body>

    <div>
        <script id="editor" type="text/plain"></script>
    </div>

</body>
<script type="text/javascript">
    var ue = UE.getEditor( 'editor',{
        autoHeightEnabled: true,

        autoFloatEnabled: true,

        initialFrameWidth: 690,

        initialFrameHeight:483
        
    });
</script>

View Code

方法二：

<textarea name="后台取值的key" id="myEditor">这里写你的初始化内容</textarea> 

var editor = new UE.ui.Editor(); 

editor.render("myEditor");

View Code

效果图；

通过ueditor.config.js文件简单进行自己所需配置。

自定义按钮）

1，将addCustomizeButton.js文件拷贝至项目，引入。（解压完整源码包_examples目录可找到该文件）

<@script type="text/javascript" src="${page.url.context}/res/components/ueditor/addCustomizeButton.js"></@script>

根据注释修改addCustomizeButton.js文件，（以下自定义添加图片按钮）

// 如果要注册多个按钮以空格标识隔开，例如注册按钮1 按钮2 按钮3  UE.registerUI('1 2 3',function(editor,uiName){}
UE.registerUI('\u63d2\u5165\u56fe\u7247',function(editor,uiName){

    //上传成功回调函数
    var onFileUploadComplete = function(res)
    {
        var length = res.successful.length;
        if( length > 0 )
        {
            var nodes = res.successful;
            for (var i = 0 ; i < nodes.length ; i++)
            {
                var url = Alfresco.constants.PROXY_URI;
                var nodeID = nodes[i].nodeRef.replace("workspace://SpacesStore/","api/node/workspace/SpacesStore/");
                url = url + nodeID + "/content/doclib?c=force&ph=true";
                //追加编辑器预览图片效果
                editor.setContent('<img style="width:650px;" src="'+url+'" alt="'+nodes[i].fileName+'" title="'+nodes[i].fileName+'"/>',true);
                //editor.setContent("content...",boolean); 如果boolean为true ,追加编辑器内容，否则编辑器内容写入。
            }
        }
    };
    //注册按钮执行时的command命令，使用命令默认就会带有回退操作
    editor.registerCommand(uiName,{
        execCommand:function(){
            //alert('execCommand:' + uiName)

            // TODO self something
            this.fileUpload = Alfresco.getFileUploadInstance();
            var multiUploadConfig = {
                //destination:"workspace://SpacesStore/56b62ff0-d06d-4928-ba7a-7c4e4a17aaab",
                destination: "JY",
                thumbnails: "doclib",
                filter: [//限制只能上传*.jpg;*.png;*.gif
                {
                    description:"images", 
                    extensions:"*.jpg;*.png;*.gif"
                }],
                mode: this.fileUpload.MODE_MULTI_UPLOAD_FUJIAN,
                viewdetail:false,
                onFileUploadComplete: {
                    fn: onFileUploadComplete,
                    scope: this
                }
            };
            this.fileUpload.show(multiUploadConfig);
        }
    });

    //创建一个button
    var btn = new UE.ui.Button({
        //按钮的名字
        name:uiName,
        //提示
        title:uiName,
        //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
        cssRules :'background-position: -726px -77px;',// 使用多图上传icon
        //点击时执行的命令
        onclick:function () {
            //这里可以不用执行命令,做你自己的操作也可
           editor.execCommand(uiName);
        }
    });

    //当点到编辑内容上时，按钮要做的状态反射
    editor.addListener('selectionchange', function () {
        var state = editor.queryCommandState(uiName);
        if (state == -1) {
            btn.setDisabled(true);
            btn.setChecked(false);
        } else {
            btn.setDisabled(false);
            btn.setChecked(state);
        }
    });

    //因为你是添加button,所以需要返回这个button
    return btn;
}/*index 指定添加到工具栏上的那个位置，默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮*/);

View Code

效果图；

UEditor1.4.3版本存在系列问题处理：

1,启动自动保存；enableAutoSave: false设置无效。解决办法；修改ueditor.all.js文件；添加代码：if (!me.getOpt('enableAutoSave')) {return;}

'contentchange': function () {
                // 去掉本地保存 1.4.3 enableAutoSave: false设置无效
                if (!me.getOpt('enableAutoSave')) {
                    return;
                }
                //
                if ( !saveKey ) {
                    return;
                }

                if ( me._saveFlag ) {
                    window.clearTimeout( me._saveFlag );
                }

                if ( me.options.saveInterval > 0 ) {

                    me._saveFlag = window.setTimeout( function () {

                        save( me );

                    }, me.options.saveInterval );

                } else {

                    save(me);

                }


            }

View Code

2，插入表格保存后，获取保存内容预览表格边框不显示。修改ueditor.all.js文件以下几处。

UE.commands['inserttable'] = {
        queryCommandState: function () {
            return getTableItemsByRange(this).table ? -1 : 0;
        },
        execCommand: function (cmd, opt) {
            function createTable(opt, tdWidth) {
                var html = [],
                    rowsNum = opt.numRows,
                    colsNum = opt.numCols;
                for (var r = 0; r < rowsNum; r++) {
                    html.push('<tr' + (r == 0 ? ' class="firstRow"':'') + '>');
                    /* old code
                    for (var c = 0; c < colsNum; c++) {
                        html.push('<td width="' + tdWidth + '"  vAlign="' + opt.tdvalign + '" >' + (browser.ie && browser.version < 11 ? domUtils.fillChar : '<br/>') + '</td>')
                    }*/

                    // new code
                    for (var c = 0; c < colsNum; c++) {
                        html.push('<td style="border:1px solid #ccc;" width="' + tdWidth + '"  vAlign="' + opt.tdvalign + '" >' + (browser.ie ? domUtils.fillChar : '<br/>') + '</td>')
                    }
                    
                    html.push('</tr>')
                }
                //禁止指定table-width

                // old code
                //return '<table><tbody>' + html.join('') + '</tbody></table>' 

                // new code
                return '<table style="border-collapse:collapse;"><tbody>' + html.join('') + '</tbody></table>' 
            }

            if (!opt) {
                opt = utils.extend({}, {
                    numCols: this.options.defaultCols,
                    numRows: this.options.defaultRows,
                    tdvalign: this.options.tdvalign
                })
            }
            var me = this;
            var range = this.selection.getRange(),
                start = range.startContainer,
                firstParentBlock = domUtils.findParent(start, function (node) {
                    return domUtils.isBlockElm(node);
                }, true) || me.body;

            var defaultValue = getDefaultValue(me),
                tableWidth = firstParentBlock.offsetWidth,
                tdWidth = Math.floor(tableWidth / opt.numCols - defaultValue.tdPadding * 2 - defaultValue.tdBorder);

            //todo其他属性
            !opt.tdvalign && (opt.tdvalign = me.options.tdvalign);
            me.execCommand("inserthtml", createTable(opt, tdWidth));
        }
    };

View Code

//设置表格可排序,清除表格可排序
    UE.commands["enablesort"] = UE.commands["disablesort"] = {
        queryCommandState: function (cmd) {
            var table = getTableItemsByRange(this).table;
            if(table && cmd=='enablesort') {
                var cells = domUtils.getElementsByTagName(table, 'th td');
                for(var i = 0; i<cells.length; i++) {
                    if(cells[i].getAttribute('colspan')>1 || cells[i].getAttribute('rowspan')>1) return -1;
                }
            }

            return !table ? -1: cmd=='enablesort' ^ table.getAttribute('data-sort')!='sortEnabled' ? -1:0;
        },
        execCommand: function (cmd) {
            var table = getTableItemsByRange(this).table;
            table.setAttribute("data-sort", cmd == "enablesort" ? "sortEnabled" : "sortDisabled");
            
            table.setAttribute("style", "border-collapse:collapse;");// append new code

            cmd == "enablesort" ? domUtils.addClass(table,"sortEnabled"):domUtils.removeClasses(table,"sortEnabled");
        }
    };
};

View Code

转载于:https://www.cnblogs.com/chiangfai/p/5830262.html

weixin_30951743

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ueditor插件简单使用

下载地址：http://ueditor.baidu.com/website/download.html建议同时下载所需版本及完整源码。 [ 1.4.3 JSP + 完整源码src ]简单配置说明解压JSP版，放置项目中。1，引入所需文件；<@script type="text/javascript" src="${page.url.conte...
复制链接

扫一扫