Ueditor/自定义编辑器

此条目用于说明Ueditor自定义编辑器的创建

步骤一：html格式

    <div id="editor"></div>
                       

步骤二：创建编辑器

 var editor = new baidu.editor.ui.Editor({
    id: 'editor',
    toolbars: [
        // 这里定义的toolbars并不是对应多多行，而是在renderToolbarBoxHtml中去放到相应的位置去
        ['FontFamily','FontSize'],
        ['Bold','Italic','Underline','ForeColor','BackColor'],
        ['JustifyLeft','JustifyCenter','JustifyRight'],
        ['InsertOrderedList','InsertUnorderedList'],
        ['Emoticon','Image','PlaceName','Link','Unlink','RemoveFormat','|','Undo','Redo','Map'],
        ['FullScreen']
    ],
    // 重写ui.Editor的renderToolbarBoxHtml方法，改成根据你的布局生成toolbar的html
    renderToolbarBoxHtml: function (){
        // %%会被替换成edui-editor前缀，加上class方便在css里设置布局
        return '<div class="%%-toolbarinner-left"><table>' +
                // 左上
                '<tr><td><div class="%%-toolbarinner-lefttop">' + this.toolbars[0].renderHtml() + '</div></td><td rowspan="2"><span 
                class="%%-toolbarinner-separate"></span></td></tr>' +        
                // 左下
                '<tr><td><div class="%%-toolbarinner-leftbottom">' + this.toolbars[1].renderHtml() + '</div></td></tr>' +

            '</table></div>' +
            '<div class="%%-toolbarinner-center"><table>' +
                // 中上
                '<tr><td><div class="%%-toolbarinner-centertop">' + this.toolbars[2].renderHtml() + '</div></td><td rowspan="2"><span 
                class="%%-toolbarinner-separate"></span></td></tr>' + 
                // 中下
                '<tr><td><div class="%%-toolbarinner-centerbottom">' + this.toolbars[3].renderHtml() + '</div></td></tr>' +

            '</table></div>' +
                // 右边部分
            '<div class="%%-toolbarinner-right">' + this.toolbars[4].renderHtml() + '</div>' +
                // 全屏按钮, float:right在css中定义的
            '<div class="%%-toolbarinner-fullscreen">' + this.toolbars[5].renderHtml() + '</div>' +
            '<div style="clear: both;overflow: hidden;height: 0;"></div>';
    }
});
editor.render();

参考来源

• http://ueditor.baidu.com/onlinedemo.html

Ueditor使用手册导航
针对普通使用者： 部署和体验|自定义配置|自定义工具栏|表单提交|重置编辑器|多编辑器|自定义编辑器|文本域渲染|前后端数据整合 针对二次开发者： 整体架构|插件机制|自定义插件开发 若干专题教程 相关问题