User:Vanished user 1929210/AceEditor.js

注意：保存之后，你必须清除浏览器缓存才能看到做出的更改。Google Chrome、Firefox、Microsoft Edge及Safari：按住⇧ Shift键并单击工具栏的“刷新”按钮。参阅Help:绕过浏览器缓存以获取更多帮助。

/**
 * AceEditor 維基百科條目版
 * Author: [[User:Vjudge1]]
 *
 * 已知bug：
 * 1. 工具欄按鈕全部失效
 *
 * 未與其他編輯器（wikEd等等）進行測試因此不知道是否兼容。
 */

(function() {
    'use strict';

    var $editorElem, editor;
    var $textBox;
    var aceMode = true;

    function init() {
        $textBox = $('#wpTextbox1');

        // 建立一個與文本框同樣大小的div，並將文字放進去
        $editorElem = $('<div id="wpEditor"></div>');
        $editorElem.text($textBox.val());
        $editorElem.height($textBox.height());

        // 替換文本框
        $textBox.before($editorElem);

        editor = ace.edit('wpEditor');
        editor.getSession().setUseWrapMode(true);

        $editorElem = $('#wpEditor');
        $editorElem.css('font', $('#wpTextbox1').css('font'));

        function setAceVisible(value) {
            if (value) {
                $('#wikiEditor-ui-toolbar').hide();
                $('#editpage-specialchars').hide();
                $textBox.hide();
                $editorElem.show();

                editor.setValue($textBox.val());
                editor.focus();
            } else {
                $('#wikiEditor-ui-toolbar').show();
                $('#editpage-specialchars').show();
                $textBox.show();
                $editorElem.hide();

                $textBox.focus();
            }
        }

        setAceVisible(true);

        // 添加切換按鈕
        $('#mw-editpage-watch').after('<input name="wpAceEditor" type="checkbox" value="1" checked="checked" id="wpAceEditor">&nbsp;<label for="wpAceEditor" id="mw-ace-editor">AceEditor</label>');
        $('#wpAceEditor').click(function () {
            setAceVisible(document.editform.wpAceEditor.checked);
        });

        // *** DEBUG ***
        window.editor = editor;

        aceMode = true;

        // 保持同步
        editor.getSession().on('change', function(e) {
            $textBox.val(editor.getValue());
        });
    }

    var wgAction = mw.config.get("wgAction");
    var layoutEngine = $.client.profile().layout;

    if ((wgAction == "edit" || wgAction == "submit") &&
        mw.config.get("wgPageContentModel") == "wikitext" &&
        layoutEngine != "trident" && layoutEngine != "edge") {

        // 加載Ace
        mw.load('ext.codeEditor.ace', function() {
            init();
            config();
        });
    }
})();