web-dev-qa-db-ja.com

CKEDITOR 5でツールバーの利用可能なアイテムを取得するにはどうすればよいですか？

CKEDITOR 5でツールバーを設定したかったので、ドキュメントを確認しました。

https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/builds/guides/integration/configuration.html

それでも、私の質問に関連する唯一のスクリプトは次のとおりです。

Array.from( editor.ui.componentFactory.names );

フロントエンドのプログラマが理解するのは非常に困難です。このスクリプトはどこに配置しますか？結果を出力するにはどうすればよいですか？詳細なチュートリアルはありますか？

事実、CKEDITORが利用可能なアイテムをドキュメントに単純に入れるといいでしょう。それは地獄のトラブルの多くを救います。

ありがとう！

ckeditor5
11
stonyau

このコードは、コードサンプルの本体に直接配置できます。 in CKEditor 5 Buildの基本APIガイド 。例えば：

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        console.log( Array.from( editor.ui.componentFactory.names() ) );
    } )
    .catch( error => {
        console.error( error );
    } );

@Szymon Cofalikが答えで述べたように、すべてのビルドで利用可能なボタンの単一のリストはありません。 CKEditor 5ビルドは視覚的に異なるだけでなく、異なるプラグイン、したがって異なるボタンが含まれている場合があります。したがって、そのコードスニペットを使用することは、最も安全で将来性のあるソリューションです。

9
Reinmar

使用可能なツールバーをリストするために使用できるサンプルコード

var editor = ClassicEditor
    .create(document.querySelector('#editor'), {
        toolbar: ['headings', 'bold', 'italic', 'link', 'bulletedList', 'numberedList'],
        heading: {
            options: [
                {modelElement: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph'},
                {modelElement: 'heading1', viewElement: 'h1', title: 'Heading 1', class: 'ck-heading_heading1'},
                {modelElement: 'heading2', viewElement: 'h2', title: 'Heading 2', class: 'ck-heading_heading2'},
                {modelElement: 'heading', viewElement: 'h3', title: 'Heading 3', class: 'ck-heading_heading3'}
            ]
        }
    })
    .then(function (editor) {
        console.log(Array.from(editor.ui.componentFactory.names()));
    });
6
Izhari Ishak Aksa

以下の理由により、プラグイン名をドキュメント内の1か所に保持することは困難です。

  • 異なる複数のビルドがありますが、
  • 新しいプラグインが開発されて追加されました。

現在使用しているビルドで使用可能なツールバー項目を確認するには、使用しているブラウザーで開発者コンソールを開き、引用符で囲まれたコード行を実行します

Array.from( editor.ui.componentFactory.names );

もちろん、editorはエディターインスタンスでなければなりません。

これがあなたの質問に答えることを願っています。

編集：エディターの作成 ドキュメントに記載されています も。ただし、エディターインスタンスをeditor変数に割り当てる必要があります。

例えば：

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        window.editor = editor;
        // Or alternatively you could paste that line here and look at console.
    } );
3
Szymon Cofalik

以下を提供するconsole.log( Array.from( editor.ui.componentFactory.names() ) );を使用できます。

["undo", "redo", "bold", "italic", "blockQuote", "ckfinder", "imageTextAlternative", "imageUpload", "heading", "imageStyle:full", "imageStyle:side", "link", "numberedList", "bulletedList", "mediaEmbed", "insertTable", "tableColumn", "tableRow", "mergeTableCells"]

0
Dirk J. Faber