javascript - ツールバーなしでCKEditorを使用できますか？

Question

（重複の可能性：CKEditor-ツールバーなし）

ツールバーなしでCKEditorインスタンスを作成したいのですが。インスタンスの構成で使用する空のツールバーを定義してみました

oConfigName.toolbar = 'Custom';
oConfigName.toolbar_Custom = [];

しかし、ツールバーがないのではなく、インスタンスによって小さな空のツールバーが表示されます。

CKEditor4でインライン編集を使用しています。

Answer 1

うわー :) これは、ツールバーを実装するときに考えたこともありませんでした。しかし、他のプラグインでは必要ないため、ツールバー プラグインを削除できることを確認しました。

したがって、ツールバーを使用せずに独自のCKEditor パッケージを構築するか、removePlugins構成を使用してください - 例:

var editor = CKEDITOR.inline( 'editable', {
    removePlugins: 'toolbar'
} );

更新: CKEditor 4.1 では、高度なコンテンツ フィルターが導入されました。自動モードでは、ツールバーにロードされるボタンによって構成されます。プラグインがないtoolbarと ACF は構成されないため、自分でこれを行う必要があります。

var editor = CKEDITOR.inline( 'editable', {
    removePlugins: 'toolbar',
    allowedContent: 'p h1 h2 strong em; a[!href]; img[!src,width,height];'
} );

Answer 2

私が見た2つの方法があります：

1）removePluginsオプションを使用して、ツールバーを削除するだけです：

CKEDITOR.inline( 'textarea', {
    removePlugins: 'toolbar',
    allowedContent: 'p h1 h2 strong em; a[!href]; img[!src,width,height];'
} );

2) CSS の使用 - 標準的なアプローチではありません: (少しトリッキー)

css を display:none のようにツールバーにするだけです。

.cke_inner {
    display: none;
}

バージョン 4.13 では、ツールバーを含むトップ バー全体を非表示にできます。

.cke_inner .cke_top {
    display: none;
}

または、ツールバーのみを非表示にして、上部に色のストリップを保持します。

.cke_inner .cke_top .cke_toolbox {
    display: none;
}

それが誰かを助けることを願っています。

Answer 3

ツールバーの非表示/表示のためにプロジェクトに新しい機能を追加しました。

function onClickToolbarButton() {
    var bar = document.getElementById("cke_1_top");
    if(bar.style.display == "none"){
        bar.style.display = "block";
    }else{
        bar.style.display = "none";
    }

    //resize web page
    //onresize();
}

ツールバーを非表示/表示する場合は、毎回この関数を呼び出します。

Answer 4

CKEditor 5 では、構成やエディターの動作を変更せずに最も簡単な方法は、CSS を使用してツールバーを非表示にすることです。

.ck.ck-editor__top {
  display: none;
}

Answer 5

この行をconfig.jsファイルに追加します

config.removePlugins= 'toolbar'