在显示事件后替换 CKEditor 对话框中的元素

Replace Element in CKEditor Dialog after onShow Event

本文关键字：对话框 元素 CKEditor 替换 显示 事件      更新时间：2023-09-26

我尝试为 CKEditor 编写一个自己的插件。目标是单击工具栏中打开对话框的按钮。在对话框中有一个textArea元素，该元素应替换为 CodeMirror 实例。

我走了这么远，以至于对话框打开，我可以抓住textArea并替换它。但它看起来很糟糕，没有任何功能。此外，控制台中没有错误。

我不知道为什么这不起作用。

点击我的插件按钮时开始plugin.js

CKEDITOR.plugins.add( 'abbr', {
    icons: 'abbr',
    init: function( editor ) {
        editor.addCommand( 'abbr',new CKEDITOR.dialogCommand( 'abbrDialog' ) );
        // Create a toolbar button that executes the plugin command. 
        editor.ui.addButton( 'Abbr', {
            label: 'Insert SourceCode',
            command: 'abbr',
            toolbar: 'insert'
        } );
        CKEDITOR.dialog.add( 'abbrDialog', function ( editor ) {
            return {
                title : 'Insert SourceCode',
                minWidth : 700,
                minHeight : 300,
                contents : [{
                        id : 'tab1',
                        label : 'label1',
                        elements :
                        [{
                            type : 'html',
                            html: '<textarea id="codeEditor"></textarea>',
                            id : 'codeEditor',
                            label : 'CodeEditor',
                        }]
                }],
                onShow : replacaByCodeMirror,
                onOk : saveActionFunc
            };
        });
    }
});
function replacaByCodeMirror() {
    var codeEditor = CodeMirror.fromTextArea(document.getElementById("codeEditor"), {
        mode : "mixedMode",
        theme : "default"
    });
}

索引.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <script src="../ckeditor.js"></script>
        <script src="../plugins/codemirror/js/codemirror.js"></script></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css"/>
        <link rel="stylesheet" href="../plugins/codemirror/css/codemirror.css"/>
        <link rel="stylesheet" href="../plugins/codemirror/css/myStyle.css">
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                StartWort
            </textarea>
            <script>
                var editor = CKEDITOR.replace( 'editor1' );
            </script>
        </form>
    </body>
</html>
屏幕截图

：对话框屏幕截图

您不能在 ckeditor 窗口（或 ckeditor 对话框中）运行 JavaScript 代码。解决方法是在对话框中使用 iframe（您必须添加一个 iframedialog 插件）。

这正是我需要的信息。多谢！我会给你一票，但我只有 2 个代表。

不幸的是，网上几乎没有好的例子。这对我有帮助：CKForum

相关文章：