2

私が最終的にやろうとしているのは、ckEditorで利用できるものがなかったため、いくつかの単純なコードハイライト（/ Syntax Highlighter）を実装することです。このため、選択したテキストが次のように変化するクリックによって、新しいボタンを追加する（または既存のボタンの1つを変更する）ことを考えています。1-ソースコードのインデントを保持するためにモノスペースフォントを取得します（例：「CourierNew "）2-フォントの色が青に変わります

新しいボタンを追加する方法がわからないので、既存のボタンの1つ、たとえばブロック引用ボタンを使用して作業を行うことを考えていました。

追記： ちなみに、ckEditor 4も出ていることに気づきました：プラグ インもカスタマイズ可能なckeditor 4：ckeditor 4 builder

4

4 に答える 4

1

WYSIWYGエディターは、フォーマットを保存するために、HTMLマークアップまたはエンコードされたHTMLを背面に生成します。たとえば、引用のために、背面にこのコードを生成している可能性があります。

<blockquote> … </blockquote>

（ただし、これはエディターごとに異なります）

これを行う最も簡単な方法は、バックグラウンドで生成されているタグを見つけて、必要に応じてCSSスタイルを適用することです。

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

それが役に立てば幸い。

于 2012-11-26T06:16:13.967 に答える
1

あなたの完全なユースケースが何であるかはわかりませんが、これが私のもので、最終的にカスタムプラグインになりました

  1. ダイアログウィンドウを使用してコードスニペットをCKEditorに挿入できるようにしたかった（なぜblockquote要素を好むのかわからない）
  2. これらのコードスニペットをCKEditorで視覚的にマークしたかったのですが、CKEditorに実際の構文ハイライトを含める必要はありませんでした。
  3. 最後に、コンテンツを保存した後、挿入された要素にあまり多くの作業を費やすことなく、実際の構文フォーマットを適用したいと思いました。そのためにprettifyを使用しました。

プラグインを確認して、必要に応じて変更してください。

于 2012-11-30T16:57:01.250 に答える
1

私が急いで最初から作成した次のプラグインを検討することができます（これは完全な解決策ではありませんが、正しい方向を示しています）：

(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'
            }
        }));
    }
})();

それを実行するには、GooglePrettifyライブラリをプラグインlibのディレクトリに抽出します。prettify次に、次のHTMLを試して、ツールバーのボタンを使用して見栄えを良くしますpre。

<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>
于 2012-12-05T13:47:07.347 に答える
-1

私はこの非常に簡単な解決策を見つけました：

  1. ckeditorのルートでcontents.cssを開きます

  2. 以下を追加します。

    blockquote {色：青; font-family： "Courier New"、Courier、モノスペース; }

于 2012-11-30T10:36:05.603 に答える