在Ueditor 1.4.3中自定义插件

最新推荐文章于 2024-04-09 11:32:23 发布

jbgtwang

最新推荐文章于 2024-04-09 11:32:23 发布

阅读量3.7k

点赞数 1

本文链接：https://blog.csdn.net/jbgtwang/article/details/52329565

版权

1.定义js/ueditor/myCustomize/myCustomizeLine.js

UE.registerUI('customizeline',function(editor,uiName){
    //创建dialog
    var dialog = new UE.ui.Dialog({
        //指定弹出层中页面的路径
        iframeUrl:'js/ueditor/myCustomize/myCustomizeLinePage.html',
        //需要指定当前的编辑器实例
        editor:editor,
        //指定dialog的名字
        name:uiName,
        //dialog的标题
        title:"插入自定义XXX效果",

        //指定dialog的外围样式
        cssRules:"width:300px;height:170px;",

        //如果给出了buttons就代表dialog有确定和取消
        buttons:[
            {
                className:'edui-okbutton',
                label:'确定',
                onclick:function () {
                    dialog.close(true);
                }
            },
            {
                className:'edui-cancelbutton',
                label:'取消',
                onclick:function () {
                    dialog.close(false);
                }
            }
        ]});

    //参考myCustomizeLine.js
    var btn = new UE.ui.Button({
        name:'customizelinebutton',
        title: uiName,
        //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
        cssRules :'background-position: -500px 0;',
        onclick:function () {
            //渲染dialog
            dialog.render();
            dialog.open();
        }
    });

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

2.定义myCustomizeLinePage.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
<div class="content">
     <p>
    名称:<input type="text" id="txtName" /><br/>
   </p>
</div>


<script type="text/javascript" src="../dialogs/internal.js"></script>
<script>
    //可以直接使用以下全局变量
    //当前打开dialog的实例变量
    //console.log('editor: '+editor);
    //一些常用工具
    //console.log('domUtils: '+domUtils);
    //console.log('utils: '+utils);
    //console.log('browser: '+browser);

    dialog.onok = function (){
        console.log("我点击了确定");
       var txtName= document.getElementById("txtName").value;
       var insertHtmlStr = '', txtNameAttr='';
       if(txtName!= null && txtName!= ""){
           txtNameAttr = 'name="'+txtName+'" ';
       }
       insertHtmlStr = '<input type="text" ' + txtNameAttr+ '/>';
       console.log(insertHtmlStr);
        editor.execCommand('inserthtml', insertHtmlStr);
    };

   dialog.oncancel = function () {
        //console.log("我点击了取消");
    };

</script>
</body>
</html>

3.在ueditor.config.js中的whitList处添加,input: ['type', 'id', 'name', 'width', 'height', 'title','class', 'style']

4.index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.all.min.js"> </script>

    
    
    <script type="text/javascript" charset="utf-8" src="js/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/ueditor/myCustomize/myCustomizeLine.js"></script>

    <style type="text/css">
        div{
            width:100%;
        }
    </style>
</head>
<body>
<div>
    <h1>完整demo</h1>
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
</div>
<div id="btns">
    <div>
        <button οnclick="getAllHtml()">获得整个html的内容</button>
        <button οnclick="getContent()">获得内容</button>
        <button οnclick="setContent()">写入内容</button>
        <button οnclick="setContent(true)">追加内容</button>
        <button οnclick="getContentTxt()">获得纯文本</button>
        <button οnclick="getPlainTxt()">获得带格式的纯文本</button>
        <button οnclick="hasContent()">判断是否有内容</button>
        <button οnclick="setFocus()">使编辑器获得焦点</button>
        <button οnmοusedοwn="isFocus(event)">编辑器是否获得焦点</button>
        <button οnmοusedοwn="setblur(event)" >编辑器失去焦点</button>

    </div>
    <div>
        <button οnclick="getText()">获得当前选中的文本</button>
        <button οnclick="insertHtml()">插入给定的内容</button>
        <button id="enable" οnclick="setEnabled()">可以编辑</button>
        <button οnclick="setDisabled()">不可编辑</button>
        <button οnclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button>
        <button οnclick=" UE.getEditor('editor').setShow()">显示编辑器</button>
        <button οnclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button>
    </div>

    <div>
        <button οnclick="getLocalData()" >获取草稿箱内容</button>
        <button οnclick="clearLocalData()" >清空草稿箱</button>
    </div>

</div>
<div>
    <button οnclick="createEditor()">
    创建编辑器</button>
    <button οnclick="deleteEditor()">
    删除编辑器</button>
</div>

<script type="text/javascript">

      ///
      //创建一个在选中的图片单击时添加边框的插件，其实质就是在baidu.editor.plugins塞进一个闭包
    /* UE.plugins["testMyPlugin"] = function () {
        var me = this;
        //创建一个改变图片边框的命令
        me.commands["myPluginCmd"] = {
            execCommand:function () {
                alert(1);
            }
        };
        //注册一个触发命令的事件，同学们可以在任意地放绑定触发此命令的事件
        me.addListener( 'click', function () {
            setTimeout(function(){
                me.execCommand( "myPluginCmd" );
            })

        } );
    }; */
      ///

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor' , {'enterTag':'br'});

    function isFocus(e){
        alert(UE.getEditor('editor').isFocus());
        UE.dom.domUtils.preventDefault(e)
    }
    function setblur(e){
        UE.getEditor('editor').blur();
        UE.dom.domUtils.preventDefault(e)
    }
    function insertHtml() {
        var value = prompt('插入html代码', '');
        UE.getEditor('editor').execCommand('insertHtml', value)
    }
    function createEditor() {
        enableBtn();
        UE.getEditor('editor');
    }
    function getAllHtml() {
        alert(UE.getEditor('editor').getAllHtml())
    }
    function getContent() {
        var arr = [];
        arr.push("使用editor.getContent()方法可以获得编辑器的内容");
        arr.push("内容为：");
        arr.push(UE.getEditor('editor').getContent());
        alert(arr.join("\n"));
    }
    function getPlainTxt() {
        var arr = [];
        arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
        arr.push("内容为：");
        arr.push(UE.getEditor('editor').getPlainTxt());
        alert(arr.join('\n'))
    }
    function setContent(isAppendTo) {
        var arr = [];
        arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
        UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
        alert(arr.join("\n"));
    }
    function setDisabled() {
        UE.getEditor('editor').setDisabled('fullscreen');
        disableBtn("enable");
    }

    function setEnabled() {
        UE.getEditor('editor').setEnabled();
        enableBtn();
    }

    function getText() {
        //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
        var range = UE.getEditor('editor').selection.getRange();
        range.select();
        var txt = UE.getEditor('editor').selection.getText();
        alert(txt)
    }

    function getContentTxt() {
        var arr = [];
        arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
        arr.push("编辑器的纯文本内容为：");
        arr.push(UE.getEditor('editor').getContentTxt());
        alert(arr.join("\n"));
    }
    function hasContent() {
        var arr = [];
        arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
        arr.push("判断结果为：");
        arr.push(UE.getEditor('editor').hasContents());
        alert(arr.join("\n"));
    }
    function setFocus() {
        UE.getEditor('editor').focus();
    }
    function deleteEditor() {
        disableBtn();
        UE.getEditor('editor').destroy();
    }
    function disableBtn(str) {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            if (btn.id == str) {
                UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
            } else {
                btn.setAttribute("disabled", "true");
            }
        }
    }
    function enableBtn() {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
        }
    }

    function getLocalData () {
        alert(UE.getEditor('editor').execCommand( "getlocaldata" ));
    }

    function clearLocalData () {
        UE.getEditor('editor').execCommand( "clearlocaldata" );
        alert("已清空草稿箱")
    }
</script>
</body>
</html>

几个注意：iframeUrl的设置（在web工程里要设置路径，否则可能报404错误）

internal.js的设置

index中要引用自定义JS

参考: http://formdesign.leipi.org/doc.html

http://blog.csdn.net/u014224349/article/details/39037141

jbgtwang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
在Ueditor 1.4.3中自定义插件

1.定义js/ueditor/myCustomize/myCustomizeLine.jsUE.registerUI('customizeline',function(editor,uiName){ //创建dialog var dialog = new UE.ui.Dialog({ //指定弹出层中页面的路径 iframeUrl:'js
复制链接

扫一扫