编写百度ueditor编辑器自定义插件

参考：http://ueditor.baidu.com/
最近，认真阅读了百度UEditor在线编辑器相关说明和源代码，结合前几篇博文，实现了一个UEditor插件。UEditor插件同样大量使用了匿名函数，实现UEditor自定义插件并不容易，关键要把握五点，这里以自定义插件“Mycard”为例：

在editor-config.js中，

1、在toolbars: []数组中，添加 'Mycard','|',//自定义插件，我的名片

2、labelMap: []数组中，添加'mycard':'自定义插件，我的名片',其中首字母要小写 //自定义插件

3、在ui/editorui.js中，添加'Mycard'/*自定义按钮*/,


4、在样式文件ueditor.css中，为新增命添加按钮的样式类

.edui-for-mycard .edui-icon {
    background-position: -400px -40px;
    /*自定义命令按钮的样式*/
}
5、实现自定义命令的功能，如：
//实现插件的功能代码 
baidu.editor.commands['mycard'] = { execCommand : function() { this.execCommand('insertHtml',"
自定义插件，我的名片
"); return true; }, queryCommandState : function(){ } };
使用开发版实现UEditor
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <title>UEditor范例</title>

        <script type="text/javascript" charset="utf-8" src="res/js/pvo.js"></script>
        <script type="text/javascript" charset="utf-8" src="res/js/jbxx.jsp"></script>
        <script type="text/javascript" charset="utf-8" src="res/ueditor/editor_config.js"></script>

        <!--使用版-->
        <!--
        <script type="text/javascript" charset="utf-8" src="res/ueditor/editor_all.js"></script>
        -->

        <!--开发版-->
        <script type="text/javascript" charset="utf-8" src="res/ueditor/_examples/editor_api.js">
            paths = [
                'editor.js',
                'core/browser.js',
                'core/utils.js',
                'core/EventBase.js',
                'core/dom/dom.js',
                'core/dom/dtd.js',
                'core/dom/domUtils.js',
                'core/dom/Range.js',
                'core/dom/Selection.js',
                'core/Editor.js',
                'commands/inserthtml.js',
                'commands/image.js',
                'commands/justify.js',
                'commands/font.js',
                'commands/link.js',
                'commands/map.js',
                'commands/iframe.js',
                'commands/removeformat.js',
                'commands/blockquote.js',
                'commands/indent.js',
                'commands/print.js',
                'commands/preview.js',
                'commands/spechars.js',
                'commands/emotion.js',
                'commands/selectall.js',
                'commands/paragraph.js',
                'commands/directionality.js',
                'commands/horizontal.js',
                'commands/time.js',
                'commands/rowspacing.js',
                'commands/cleardoc.js',
                'commands/anchor.js',
                'commands/delete.js',
                'commands/wordcount.js',
                'commands/image.js',
                'plugins/pagebreak/pagebreak.js',
                'plugins/checkimage/checkimage.js',
                'plugins/undo/undo.js',
                'plugins/paste/paste.js',           //粘贴时候的提示依赖了UI
                'plugins/list/list.js',
                'plugins/source/source.js',
                'plugins/shortcutkeys/shortcutkeys.js',
                'plugins/enterkey/enterkey.js',
                'plugins/keystrokes/keystrokes.js',
                'plugins/fiximgclick/fiximgclick.js',
                'plugins/autolink/autolink.js',
                'plugins/autoheight/autoheight.js',
                'plugins/autofloat/autofloat.js',  //依赖UEditor UI,在IE6中，会覆盖掉body的背景图属性
                'plugins/highlight/highlight.js',
                'plugins/serialize/serialize.js',
                'plugins/video/video.js',
                'plugins/table/table.js',
                'plugins/mycard/mycard.js',//自定义插件
                'plugins/contextmenu/contextmenu.js',
                'plugins/pagebreak/pagebreak.js',
                'plugins/basestyle/basestyle.js',
                'plugins/elementpath/elementpath.js',
                'plugins/formatmatch/formatmatch.js',
                'plugins/searchreplace/searchreplace.js',
                'ui/ui.js',
                'ui/uiutils.js',
                'ui/uibase.js',
                'ui/separator.js',
                'ui/mask.js',
                'ui/popup.js',
                'ui/colorpicker.js',
                'ui/tablepicker.js',
                'ui/stateful.js',
                'ui/button.js',
                'ui/splitbutton.js',
                'ui/colorbutton.js',
                'ui/tablebutton.js',
                'ui/toolbar.js',
                'ui/menu.js',
                'ui/combox.js',
                'ui/dialog.js',
                'ui/menubutton.js',
                'ui/datebutton.js',
                'ui/editorui.js',
                'ui/editor.js',
                'ui/multiMenu.js'
            ];
        </script>


        <script type="text/javascript">
            //实现插件的功能代码
            baidu.editor.commands['mycard'] = {
                execCommand : function() {
                    this.execCommand('insertHtml',"<p>自定义插件，我的名片</p>");
                    return true;
                },
                queryCommandState : function(){

                }
            };
        </script>

        <link rel="stylesheet" type="text/css" href="res/ueditor/themes/default/ueditor.css"/>
        <style>
            .myEditor { width: 800px;}

        </style>
    </head>
    <body>
        <h1>编写百度ueditor编辑器自定义插件</h1>
        <script type="text/plain" id="myEditor" class="myEditor"></script>

        <script type="text/javascript">
            var option = {
                initialContent: 'hello world', //初始化编辑器的内容
                minFrameHeight: 200,            //初始化编辑器最小高度
                iframeCssUrl :'res/ueditor/themes/default/iframe.css'
            };
            var editor = new baidu.editor.ui.Editor(option);
            editor.render('myEditor');
        </script>
        
    </body>
</html>
点击自定义按钮后，在编辑器插入文字“自定义插件，我的名片”，效果图如下：
url:http://greatverve.cnblogs.com/archive/2011/12/01/baidu-ueditor-plugin.html

 

posted @ 2011-12-01 08:36  大气象  阅读(25496)  评论(9)  编辑  收藏  举报
http://www.tianqiweiqi.com