老框架--Uditor 插件编写

leoperfect 发布于2019-08-23 16:10 / 2490人阅读

摘要：搜索设置为方法中的的注释掉直接更改了中的源码，相当不友好，只是目前没找到其他搞法替换选中的字符串上并没有修改选中字符串的方法。

版本: 1.4

过程

仔细阅读github仓库readme,起手一个demo

阅读开发文档 ,基本插件开发如下：

新建js

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

    //因为你是添加button,所以需要返回这个button
    return btn;
})

开发API等查看文档

查看插件市场,阅读其他作者的插件源码

表单生成器插件

记录 生成弹窗

var dialog = new UE.ui.Dialog({
    iframeUrl: editor.options.UEDITOR_HOME_URL + "dialogs/popup.html", // url
    name: "popup",
    editor: editor,
    title: "写入批注", // iframe title
    cssRules: "width:600px;height:260px;", // iframe 宽高
    buttons: [
        {
            className: "edui-okbutton",
            label: "确定",
            onclick: function () {
                dialog.close(true);
                editor.execCommand("html");
            }
        },
        {
            className: "edui-cancelbutton",
            label: "取消",
            onclick: function () {
                dialog.close(false);
            }
        }]
})
dialog.render(); // 渲染
dialog.open(); // 打开

弹出

var popup = new baidu.editor.ui.Popup({
    editor: this,
    content: "",
    className: "edui-bubble",
    _edittext: function () {
        baidu.editor.plugins[thePlugins].editdom = popup.anchorEl;
        me.execCommand(thePlugins);
        this.hide();
    },
    _delete: function () {
        if (window.confirm("确认删除该控件吗？")) {
            baidu.editor.dom.domUtils.remove(this.anchorEl, false);
        }
        this.hide();
    }
})

popup.render();

$$含义

文本框: 编辑  <

中的$$含义?

全局查找得知:

baidu.$$ = window[baidu.guid] = window[baidu.guid] || {global:{}};

注册插件形式开发

之前registerUI注册UI开发, 为了实现更复杂的效果，使用plugins注册

UE.plugins["quote"] = function() {
    var me = this,thePlugins = "quote";
    me.commands[thePlugins] = {
        execCommand: function () {
            
        }
    }
}

生成弹窗后的值如何获取判断？

在弹窗所属的html中，已经全局暴露了一个dialog对象，就是之前new的new UE.ui.Dialog.dialog有一些钩子和方法:

var oNode = null, thePlugins = "quote";

window.onload = function () {
    if (UE.plugins[thePlugins].editdom) {
        oNode = UE.plugins[thePlugins].editdom;
        var gValue = oNode.getAttribute("value").replace(/"/g, """);
        gValue = gValue == null ? "" : gValue;
        $G("orgvalue").value = gValue;
    }
}

dialog.oncancel = function () {
    if (UE.plugins[thePlugins].editdom) {
        delete UE.plugins[thePlugins].editdom;
    }
}

dialog.onok = function () {
    if($G("orgvalue").value.trim() == "") {
        alert("请输入批注内容")
        return false;
    }

    var gValue=$G("orgvalue").value.replace(/"/g,""");
}

需要引入百度的工具文件

类似$G都是工具文件里定义的封装函数

解除html规则过滤

div会被解析成p标签，顺带style script也被屏蔽了。

ueditor.all.js搜索 allowDivTransToP设置为false

addInputRule方法中的style script的case注释掉

直接更改了ueditor.all.js中的源码，相当不友好，只是目前没找到其他搞法

替换选中的字符串

UE.editor上并没有修改选中字符串的方法。

range.deleteContents(); 删除选区的内容

range.insertNode(); 新增node节点可以是TextNode ElementNode fragment

var range = UE.getEditor("editor").selection.getRange();
range.select();
var node = document.createTextNode("你说你想要逃");
ue.selection.getRange().deleteContents().insertNode(node)

老实说：这个ueditor API比官网的全太多了，官网没有记录的API方法，这儿都能查到

使用命令来使用，因为命令可以有撤回和前进操作

命令名称必须是小写!!!

me.commands["quoteupdate"] = {
    execCommand: function (str) {
        console.log(str)
        var range = this.selection.getRange();
        range.select();
        var node = document.createTextNode("你说你想要逃");
        this.selection.getRange().deleteContents().insertNode(node)
    }
}

排序右侧的批注信息，使其不重叠,再次渲染

// obj: 排序的json对象, key: 排序的key值
function sort(obj, key) {
    var arr = []
    for (var item in obj) {
        var current = obj[item]
        if (arr.length === 0 && current[key]) {
            arr.push(current)
        } else {
            var pos = arr.length - 1
            var index = 0;
            while (pos >= 0) {
                if (arr[pos][key] < current[key]) {
                    arr.splice(pos + 1, 0, current)
                    break;
                } else {
                    if (pos == 0)
                        arr.splice(pos, 0, current)
                }
                pos--;
            }
        }
    }
    return arr;
}

function changeAndCalculator(store) {
    // 调用排序函数
    var arr = sort(store, "top")
    
    html = ""
    arr.forEach(function (v, i) {
        var style = []
        style.push("margin: 10px 0; padding: 10px; border: 1px solid #eee;")
        style.push("background: linear-gradient(0deg, #fafafa, #f8f8f8);")

        if (i == 0 || (i > 0 && v.top - 45 > arr[i - 1].top)) {
            style.push("position: absolute; top:" + v.top + "px;transition: all 1s;")
        } else {
            v.top = arr[i - 1].top + 45
            style.push("position: absolute; top:" + v.top + "px;transition: all 1s;")
        }
        html += "" + v.value + ""
    })
    html += ""
    UE.getEditor("editor").setContent(html + olddom)
}

GPU云服务器云服务器在js中怎样编写插件 scrapy框架编写爬虫 java 插件式框架 Uditor

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102755.html

2016年前端开发学习计划

摘要：年，软件开发界发生了很多变化。六数据存储是一个关系型数据库管理系统，由瑞典公司开发，目前属于旗下公司。最流行的关系型数据库管理系统，在应用方面是最好的，关系数据库管理系统应用软件之一。七是最新的修订版本，年月由万维网联盟完成标准制定。 2015年，软件开发界发生了很多变化。有很多流行的新语言发布了，也有很多重要的框架和工具发布了新版本。下面有一个我们觉得最重要的简短清单，同时也有我们觉...

asoren 2019-08-19 18:37 评论0 收藏0
2016年前端开发学习计划

摘要：年，软件开发界发生了很多变化。六数据存储是一个关系型数据库管理系统，由瑞典公司开发，目前属于旗下公司。最流行的关系型数据库管理系统，在应用方面是最好的，关系数据库管理系统应用软件之一。七是最新的修订版本，年月由万维网联盟完成标准制定。 2015年，软件开发界发生了很多变化。有很多流行的新语言发布了，也有很多重要的框架和工具发布了新版本。下面有一个我们觉得最重要的简短清单，同时也有我们觉...

Null 2019-06-26 17:04 评论0 收藏0
听说2017你想写前端？

摘要：前端的工作更具有挑战性，方向更多样化假设我今年要入前端开发的坑这里强调前端是因为，现在很多，安卓开发加入大前端的这个称呼。安卓版微信在截稿之前是大概的版本最新是并且持续了年不变，据说是为了稳定。作者：Jay（沪江开发工程师）本文为原创文章，转载请注明作者及出处不好意思，没有像其他公众号一样赶着发文章，每年到这个时候总有一大波什么今年前端预测，技术框架预测什么的。我这次写这篇文针对的...

legendmohe 2019-08-20 19:10 评论0 收藏0
听说2017你想写前端？

摘要：前端的工作更具有挑战性，方向更多样化假设我今年要入前端开发的坑这里强调前端是因为，现在很多，安卓开发加入大前端的这个称呼。安卓版微信在截稿之前是大概的版本最新是并且持续了年不变，据说是为了稳定。作者：Jay（沪江开发工程师）本文为原创文章，转载请注明作者及出处不好意思，没有像其他公众号一样赶着发文章，每年到这个时候总有一大波什么今年前端预测，技术框架预测什么的。我这次写这篇文针对的...

lifefriend_007 2019-08-01 17:33 评论0 收藏0