web-dev-qa-db-ja.com

TinyMCEは「ファイル」メニューバーをカスタマイズします

TinyMCE 4.0のメニューバーをカスタマイズ（オプションの追加と削除など）する方法はありますか？エディターの特定の部分に関するドキュメントが見つかりません。下の画像は、私が話している部分を示しています。 enter image description here

javascriptcsstinymce
19
Kevin Pei

バージョン4は大幅な書き直しであり、ドキュメントはしばらくの間同期していませんでした。

実験を通して、ドロップダウンを個別に有効/無効にしたり、メニューバー全体を無効にしたりできることを発見しました。

特定のドロップダウンのみを有効にします。

tinymce.init({
    selector: "textarea",
    menubar: "edit format"
});

メニューバーを無効にする：

tinymce.init({
    selector: "textarea",
    menubar: false
});

メニューバー構成ドキュメント がTinyMCEサイトに追加されました。

また、メニュー全体を完全にカスタマイズしたい場合は、 メニュー構成ドキュメント を確認してください。

31
toxalot

tinymce.init()に渡された設定オブジェクトのmenuプロパティとtoolbarプロパティを微調整することで、メニューバーとツールバーの両方をカスタマイズすることになりました。

// ...
  menu : {
    edit: { title: 'Edit', items: 'undo redo  | cut copy paste selectall | searchreplace' },
    insert: { title: 'Insert', items: 'link charmap' },
    format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript | removeformat' },
    table: { title: 'Table', items: 'inserttable tableprops deletetable | cell row column' }
  },
  toolbar: 'undo redo | bold italic underline | link hr | alignleft aligncenter alignright | blockquote bullist numlist outdent indent | code',
// ...

.addMenuItem(と.addButton(を探してソースコードを調べて、各メニュー/ボタンの用語を見つけました。

5
alxndr

TinyMCE 4.xバージョンでは、 " code "プラグインは、エディターコンテンツのHTMLコードを表示/編集するために使用されます。

control ツールバー、4.0.6バージョンまで、 theme_advanced_button<1-n> オプションが使用されましたが、4.0.6バージョンより上ではtoolbarまたは toolbar<1-N> オプションが使用されます。

"code"プラグインをツールバーオプションに追加することにより、 "ツール"メニューに "ソースコード"サブメニュー（ボタンとして）が追加されます "<> "（アイコン））。

tinyMCE.init({
    // ......
    // ......
    plugins: "searchreplace code",

    toolbar1: "separator forecolor backcolor code",
    toolbar2: "<<<some buttons list>>>",
    toolbar3: "<<<some buttons list>>>",
    toolbar4: "<<<some buttons list>>>",
});
1
prabhudev mathapati