Javascript 在ckeditor wysiwyg中，如何更改块报价按钮的操作

我最终要做的是实现一些简单的代码高亮（/Syntax highlighter），因为ckEditor中没有可用的代码。出于这个原因，我想通过单击添加一个新按钮（或修改一个现有按钮），所选文本将按以下方式更改： 1-获取单空格字体以保留源代码中的缩进（例如“Courier New”） 2-字体颜色变为蓝色

因为我不知道如何添加一个新按钮，所以我想使用一个现有的按钮，比如blockquote按钮，来完成这项工作

添加注释： 顺便说一下，我刚刚注意到ckEditor 4也过时了：

---

插件也可自定义的地方：

所见即所得编辑器会在后面生成HTML标记或编码的HTML来存储格式，比如，对于引号，它可能会在后面生成以下代码：

<blockquote> … </blockquote>

---

希望有帮助。

我刚刚找到了这个超级简单的解决方案：

在ckeditor的根目录中打开contents.css

添加以下内容：

大宗报价{ 颜色：蓝色； 字体系列：“Courier New”， 信使 单空间； }

---

不确定您的完整用例是什么，但这是我的，它以

我希望能够使用对话框窗口将代码片段插入到CKEditor中（不确定您为什么喜欢blockquote元素）

我想在CKEditor中以某种方式直观地标记这些代码片段，我不在乎在CKEditor中使用真正的语法高亮显示

最后，在保存内容后，我希望对插入的元素应用真正的语法格式，而不必花费太多的工作。我用过这个

---

随意检查插件并修改它以满足您的需要。

< p>您可以考虑我从头到尾从头创建的插件（这不是一个完整的解决方案，但它显示了正确的方向）：

傅：

outerHead.append（CKEDITOR.document.createElement）（'script'{ 属性：{ 键入：“text/javascript”， 异步：“true”， src:path+'lib/prettify.js' } })); 酒吧：

innerHead.append（CKEDITOR.document.createElement）（'link'{ 属性：{ rel:'样式表'， href:path+'lib/prettify.css' } })); } CKEDITOR.replace（'editor1'{ extraPlugins:“美化”， 工具栏：[ ['Source'、'-'、'NewPage'、'Preview'、'-'、'Templates']， [‘剪切’、‘复制’、‘粘贴’、‘粘贴文本’、‘粘贴FromWord’、‘撤消’、‘重做’]， [“粗体”、“斜体”]， '/', [“美化”] ] } );

---

我想要一个像这样的语法高亮显示：但是对于CKEDITORDNDN来说没有帮助！事实证明，它将以不同的方式呈现！

//.CSS
blockquote{
//Styles here…
}

(function() {
    'use strict';

    CKEDITOR.plugins.add( 'prettify', {
        icons: 'prettify',
        init: function( editor ) {
            editor.on( 'mode', function( event ) {
                if( editor.mode == 'wysiwyg' )
                    insertResources( editor );
            });

            editor.addCommand( 'prettify', {
                exec: function( editor ) {
                    var selection = editor.getSelection(),
                        startElement = selection.getStartElement();

                    if ( startElement.hasClass( 'prettyprint' ) )
                        return;

                    var contents = startElement.getText();

                    // Naive pre-processing.
                    contents = contents.replace( /\n/g ,'<br>' );
                    contents = contents.replace( /\t/g ,'&nbsp;&nbsp;&nbsp;&nbsp;' );
                    contents = contents.replace( / /g ,'&nbsp;' );

                    startElement.setHtml( prettyPrintOne( contents, 'js', 0 ) );
                    startElement.addClass( 'prettyprint' );
                }
            });

            editor.ui.addButton( 'Prettify', {
                label: 'Prettify',
                command: 'prettify',
                toolbar: 'insert'
            });
        }
    });

    function insertResources( editor ) {
        var outerHead = CKEDITOR.document.getHead(),
            innerHead = editor.document.getHead(),
            path = CKEDITOR.plugins.getPath( 'prettify' );

        outerHead.append( CKEDITOR.document.createElement( 'script', {
            attributes: {
                type: 'text/javascript',
                async: 'true',
                src: path + 'lib/prettify.js'
            }
        }));

        innerHead.append( CKEDITOR.document.createElement( 'link', {
            attributes: {
                rel: 'stylesheet',
                href: path + 'lib/prettify.css'
            }
        }));
    }
})();

<textarea cols="80" id="editor1" name="editor1" rows="10">
<pre>function insertResources( editor ) {
    var outerHead = CKEDITOR.document.getHead(),
        innerHead = editor.document.getHead(),
        path = CKEDITOR.plugins.getPath( 'prettify' );
</pre>

<p>Foo:</p>

<pre>outerHead.append( CKEDITOR.document.createElement( 'script', {
        attributes: {
            type: 'text/javascript',
            async: 'true',
            src: path + 'lib/prettify.js'
        }
    }));</pre>

<p>Bar:</p>

<pre>innerHead.append( CKEDITOR.document.createElement( 'link', {
        attributes: {
            rel: 'stylesheet',
            href: path + 'lib/prettify.css'
        }
    }));
}</pre>
</textarea>
<script>

    CKEDITOR.replace( 'editor1', {
        extraPlugins: 'prettify',
        toolbar: [
            [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ],
            [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
            [ 'Bold', 'Italic' ],
            '/',
            [ 'Prettify']
        ]
    } );

</script>