老框架--Uditor 插件编写

2024年4月22日 221次阅读 来源: ddsdchdsd

版本: 1.4

历程

  • 仔细浏览github堆栈readme,起手一个demo
  • 浏览开辟文档 ,基础插件开辟以下：
 <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
    <!--发起手动加在言语，防止在ie下偶然由于加载言语失利致使编辑器加载失利-->
    <!--这里加载的言语文件会掩盖你在设置项目里增加的言语范例，比方你在设置项目里设置的是英文，这里加载的中文，那末了就是中文-->
    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" charset="utf-8" src="quote.js"> </script>

新建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', '<span>哈哈哈哈哈哈</span>')
        }
    });

    //由于你是增加button,所以须要返回这个button
    return btn;
})

纪录

天生弹窗

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();

$$寄义

<nobr>文本框: <span onclick=$$._edittext() class="edui-clickable">编辑</span>&nbsp;&nbsp;<

中的$$寄义?

全局查找得知:

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(/&quot;/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,"&quot;");
}

须要引入百度的东西文件

  <script type="text/javascript" src="../dialogs/internal.js"></script>

相似$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 = '<ul id="orgQuote" contenteditable="false" style="' + stylee + '">'
    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 += '<div style="' + style.join('') + '">' + v.value + '</div>'
    })
    html += '</ul>'
    UE.getEditor('editor').setContent(html + olddom)
}
    原文作者：ddsdchdsd
    原文地址: https://segmentfault.com/a/1190000018592716
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞