老框架--Uditor 插件編寫

leoperfect 發(fā)布于2019-08-23 16:10 / 2640人閱讀

摘要：搜索設(shè)置為方法中的的注釋掉直接更改了中的源碼，相當(dāng)不友好，只是目前沒(méi)找到其他搞法替換選中的字符串上并沒(méi)有修改選中字符串的方法。

版本: 1.4

過(guò)程

仔細(xì)閱讀github倉(cāng)庫(kù)readme,起手一個(gè)demo

閱讀開(kāi)發(fā)文檔 ,基本插件開(kāi)發(fā)如下：

新建js

UE.registerUI("quote", function (editor, uiName) {
    var btn = new UE.ui.Button({
        //按鈕的名字
        name: uiName,
        //提示
        title: uiName,
        //需要添加的額外樣式，指定icon圖標(biāo)，這里默認(rèn)使用一個(gè)重復(fù)的icon
        cssRules: "background-position: -500px 0;",
        //點(diǎn)擊時(shí)執(zhí)行的命令
        onclick: function () {
            //這里可以不用執(zhí)行命令,做你自己的操作也可
            editor.execCommand("inserthtml", "哈哈哈哈哈哈")
        }
    });

    //因?yàn)槟闶翘砑觔utton,所以需要返回這個(gè)button
    return btn;
})

開(kāi)發(fā)API等查看文檔

查看插件市場(chǎng),閱讀其他作者的插件源碼

表單生成器插件

記錄 生成彈窗

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(); // 打開(kāi)

彈出

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("確認(rèn)刪除該控件嗎？")) {
            baidu.editor.dom.domUtils.remove(this.anchorEl, false);
        }
        this.hide();
    }
})

popup.render();

$$含義

文本框: 編輯  <

中的$$含義?

全局查找得知:

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

注冊(cè)插件形式開(kāi)發(fā)

之前registerUI注冊(cè)UI開(kāi)發(fā), 為了實(shí)現(xiàn)更復(fù)雜的效果，使用plugins注冊(cè)

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

生成彈窗后的值如何獲取判斷？

在彈窗所屬的html中，已經(jīng)全局暴露了一個(gè)dialog對(duì)象，就是之前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("請(qǐng)輸入批注內(nèi)容")
        return false;
    }

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

需要引入百度的工具文件

類似$G都是工具文件里定義的封裝函數(shù)

解除html規(guī)則過(guò)濾

div會(huì)被解析成p標(biāo)簽，順帶style script也被屏蔽了。

ueditor.all.js搜索 allowDivTransToP設(shè)置為false

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

直接更改了ueditor.all.js中的源碼，相當(dāng)不友好，只是目前沒(méi)找到其他搞法

替換選中的字符串

UE.editor上并沒(méi)有修改選中字符串的方法。

range.deleteContents(); 刪除選區(qū)的內(nèi)容

range.insertNode(); 新增node節(jié)點(diǎn) 可以是TextNode ElementNode fragment

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

老實(shí)說(shuō)：這個(gè)ueditor API比官網(wǎng)的全太多了，官網(wǎng)沒(méi)有記錄的API方法，這兒都能查到

使用命令來(lái)使用，因?yàn)槊羁梢杂谐坊睾颓斑M(jìn)操作

命令名稱必須是小寫!!!

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

排序右側(cè)的批注信息，使其不重疊,再次渲染

// obj: 排序的json對(duì)象, 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) {
    // 調(diào)用排序函數(shù)
    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)
}

云服務(wù)器 GPU云服務(wù)器在js中怎樣編寫插件 scrapy框架編寫爬蟲 java 插件式框架 Uditor

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/102755.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

leoperfect

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

自動(dòng)翻譯程序員英語(yǔ)

閱讀 2111·2021-10-08 10:05
共享IP的虛擬主機(jī)怎么運(yùn)行的-關(guān)于虛擬主機(jī)比較正確的做法？

閱讀 1950·2021-09-22 15:31
主機(jī)目錄權(quán)限設(shè)置多少-如何設(shè)置網(wǎng)站根目錄權(quán)限？

閱讀 3140·2021-09-22 15:13
開(kāi)始學(xué)習(xí)機(jī)器學(xué)習(xí)之前你必須要了解的知識(shí)有哪些？機(jī)器學(xué)習(xí)系列入門篇

閱讀 3661·2021-09-09 09:34
如何批量替換wordpress文章中的文字或域名(3種方法)

閱讀 2271·2021-09-03 10:46
web前端開(kāi)發(fā)中遇到的問(wèn)題整理記錄——2019-04

閱讀 3223·2019-08-30 15:56
css的居中布局問(wèn)題

閱讀 1765·2019-08-30 15:53
css動(dòng)畫實(shí)現(xiàn)呼吸圓

閱讀 2423·2019-08-30 15:44

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

老框架--Uditor 插件編寫

相關(guān)文章

2016年前端開(kāi)發(fā)學(xué)習(xí)計(jì)劃

2016年前端開(kāi)發(fā)學(xué)習(xí)計(jì)劃

聽(tīng)說(shuō)2017你想寫前端？

聽(tīng)說(shuō)2017你想寫前端？

發(fā)表評(píng)論

0條評(píng)論

leoperfect

男|高級(jí)講師

TA的文章

自動(dòng)翻譯程序員英語(yǔ)

共享IP的虛擬主機(jī)怎么運(yùn)行的-關(guān)于虛擬主機(jī)比較正確的做法？

主機(jī)目錄權(quán)限設(shè)置多少-如何設(shè)置網(wǎng)站根目錄權(quán)限？

開(kāi)始學(xué)習(xí)機(jī)器學(xué)習(xí)之前你必須要了解的知識(shí)有哪些？機(jī)器學(xué)習(xí)系列入門篇

如何批量替換wordpress文章中的文字或域名(3種方法)

web前端開(kāi)發(fā)中遇到的問(wèn)題整理記錄——2019-04

css的居中布局問(wèn)題

css動(dòng)畫實(shí)現(xiàn)呼吸圓

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

老框架--Uditor 插件編寫

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！