How to use editor - 10 common examples

function createEditorInstance(doc, pane, visibleRange) {
        var $editorHolder = pane.$el || pane; // To handle actual pane mock or a fake container
        var editor = new Editor(doc, true, $editorHolder.get(0), visibleRange);

        Editor.setUseTabChar(EDITOR_USE_TABS);
        Editor.setSpaceUnits(EDITOR_SPACE_UNITS);

        if (pane.addView) {
            pane.addView(editor);
            editor._paneId = pane.id;
        }

        EditorManager._notifyActiveEditorChanged(editor);

        return editor;
    }

pluginRenderUI: function (editor) {
            // 先 button 绑定事件
            editor.addButton('undo', {
                mode: Editor.Mode.WYSIWYG_MODE,
                tooltip: '\u64A4\u9500',
                editor: editor
            }, Btn.UndoBtn);
            editor.addButton('redo', {
                mode: Editor.Mode.WYSIWYG_MODE,
                tooltip: '\u91CD\u505A',
                editor: editor
            }, Btn.RedoBtn);
            cmd.init(editor);
        }
    };

pluginRenderUI: function (editor) {
        // 先 button 绑定事件
        editor.addButton('undo', {
            mode: Editor.Mode.WYSIWYG_MODE,
            tooltip: '撤销',
            editor: editor
        }, Btn.UndoBtn);

        editor.addButton('redo', {
            mode: Editor.Mode.WYSIWYG_MODE,
            tooltip: '重做',
            editor: editor
        }, Btn.RedoBtn);
        cmd.init(editor);
    }
};

], function (S, require, exports, module) {
    /**
 * @ignore
 * checkbox source editor for kissy editor
 * @author yiminghe@gmail.com
 */
    // 'editor', '../font/cmd'
    var Editor = require('editor');
    var util = require('util');
    var $ = require('node');
    var SOURCE_MODE = Editor.Mode.SOURCE_MODE, WYSIWYG_MODE = Editor.Mode.WYSIWYG_MODE;
    function CheckboxSourceArea(editor) {
        var self = this;
        self.editor = editor;
        self._init();
    }
    util.augment(CheckboxSourceArea, {
        _init: function () {
            var self = this, editor = self.editor, statusBarEl = editor.get('statusBarEl');
            self.holder = $('<span>' + '<label style="vertical-align:middle;">' + '<input type="checkbox" style="margin:0 5px;">' + '\u7F16\u8F91\u6E90\u4EE3\u7801</label>' + '</span>');
            self.holder.appendTo(statusBarEl);
            var el = self.el = self.holder.one('input');
            el.on('click', self._check, self);
            editor.on('wysiwygMode', self._wysiwygmode, self);
            editor.on('sourceMode', self._sourcemode, self);
        },
        _sourcemode: function () {

//' ',
            //' '
        ].join('');
    }
    else {
        return d;
    }
}

function Draft(editor, config) {
    this.editor = editor;
    this.config = config;
    this._init();
}

var addRes = Editor.Utils.addRes,
    destroyRes = Editor.Utils.destroyRes;

util.augment(Draft, {
    _getSaveKey: function () {
        var self = this,
            cfg = self.config;
        return cfg.draft && cfg.draft.saveKey || DRAFT_SAVE;
    },


    // parse 历史记录延后，点击 select 时才开始 parse
    _getDrafts: function () {
        var self = this;
        if (!self.drafts) {
            var str = localStorage.getItem(self._getSaveKey()),
                drafts = [];

Editor.prototype.addContextMenu = function (id, filter, cfg) {

    var self = this;

    cfg = cfg || {};

    var event = cfg.event;
    if (event) {
        delete  cfg.event;
    }

    cfg.prefixCls = self.get('prefixCls') + 'editor-';
    cfg.editor = self;
    cfg.focusable = 1;
    cfg.zIndex = Editor.baseZIndex(Editor.ZIndexManager.POPUP_MENU);

    var menu = new Menu.PopupMenu(cfg);

    focusFix.init(menu);

    menu.on('afterRenderUI', function () {
        menu.get('el').on('keydown', function (e) {
            if (e.keyCode === Event.KeyCode.ESC) {
                menu.hide();
            }
        });
    });

    self.docReady(function () {
        var doc = self.get('document');
        // 编辑器获得焦点，不会触发 menu el blur？

restore: function (d) {
            // 代码模式下不和可视模式下混在一起
            if (this.editor.get('mode') !== Editor.Mode.WYSIWYG_MODE) {
                return undefined;
            }
            var self = this, history = self.history, editor = self.editor, editorDomBody = editor.get('document')[0].body, snapshot = history[self.index + d];
            if (snapshot) {
                editorDomBody.innerHTML = snapshot.contents;
                if (snapshot.bookmarks) {
                    editor.getSelection().selectBookmarks(snapshot.bookmarks);
                } else if (UA.ie) {
                    // IE BUG: If I don't set the selection to *somewhere* after setting
                    // document contents, then IE would create an empty paragraph at the bottom
                    // the next time the document is modified.
                    var $range = editorDomBody.createTextRange();
                    $range.collapse(true);
                    $range.select();
                }
                var selection = editor.getSelection();    // 将当前光标，选择区域滚动到可视区域

function getXy(bubble) {
        var el = bubble.get('editorSelectedEl');
        if (!el) {
            return undefined;
        }
        var editor = bubble.get('editor'), editorWin = editor.get('window'), iframeXY = editor.get('iframe').offset(), top = iframeXY.top, left = iframeXY.left, right = left + editorWin.width(), bottom = top + editorWin.height();    // ie 中途设置 domain 后，不能获取 window 的相关属性
                                                                                                                                                                                                                                         // 例如 window.frameEl
                                                                                                                                                                                                                                         // 所以不能直接用 el.offset(undefined,window);
        // ie 中途设置 domain 后，不能获取 window 的相关属性
        // 例如 window.frameEl
        // 所以不能直接用 el.offset(undefined,window);
        var elXY = el.offset();
        elXY = Editor.Utils.getXY(elXY, editor);
        var elTop = elXY.top, elLeft = elXY.left, elRight = elLeft + el.width(), elBottom = elTop + el.height(), x, y;    // ie 图片缩放框大于编辑区域底部，bubble 点击不了了，干脆不显示
        // ie 图片缩放框大于编辑区域底部，bubble 点击不了了，干脆不显示
        if (UA.ie && el[0].nodeName.toLowerCase() === 'img' && elBottom > bottom) {
            return undefined;
        }    // 对其下边
             // el 位于编辑区域，下边界超了编辑区域下边界
        // 对其下边
        // el 位于编辑区域，下边界超了编辑区域下边界
        if (elBottom > bottom && elTop < bottom) {
            // 别挡着滚动条
            y = bottom - 30;
        }    // el bottom 在编辑区域内
        else // el bottom 在编辑区域内
        if (elBottom > top && elBottom < bottom) {
            y = elBottom;
        }    // 同上，对齐左边

function () {
                        var bubble = this,
                            el = bubble.get('contentEl');
                        el.html(util.substitute(tipHTML, {
                            label: self.get('label'),
                            prefixCls: prefixCls
                        }));
                        var tipUrlEl = el.one('.' + prefixCls + 'editor-bubble-url'),
                            tipChangeEl = el.one('.' + prefixCls + 'editor-bubble-change'),
                            tipRemoveEl = el.one('.' + prefixCls + 'editor-bubble-remove');

                        // ie focus not lose
                        Editor.Utils.preventFocus(el);

                        tipChangeEl.on('click', function (ev) {
                            // 回调show，传入选中元素
                            self.show(bubble.get('editorSelectedEl'));
                            ev.halt();
                        });

                        tipRemoveEl.on('click', function (ev) {
                            // chrome remove 后会没有焦点
                            if (UA.webkit) {
                                var r = editor.getSelection().getRanges(),
                                    r0 = r && r[0];
                                if (r0) {
                                    r0.collapse(true);
                                    r0.select();
                                }

_openDeferred.done(function () {
            // Setup activeEditorChange event listener so that we can track cursor positions in
            // CSS preprocessor files and perform live preview highlighting on all elements with
            // the current selector in the preprocessor file.
            EditorManager.on("activeEditorChange", onActiveEditorChange);

            // Explicitly trigger onActiveEditorChange so that live preview highlighting
            // can be set up for the preprocessor files.
            onActiveEditorChange(null, EditorManager.getActiveEditor(), null);
        });
    }