tinymce自定義工具欄
話不多說直接上代碼,此處添加 imgs 的工具為例
initTinymce() {const _this = thisreturn {language_url: 'https://cdn.jsdelivr.net/npm/tinymce-i18n@20.12.25/langs5/zh_CN.js',language: 'zh_CN',body_class: 'panel-body ',object_resizing: false,// 此處記得添加自定義的工具名稱toolbar: toolbar, // 本文使用外部引入toolbar//toolbar = ['formatselect | searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image imgs charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen help']plugins: plugins, // 本文使用外部引入plugins// plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount help']end_container_on_empty_block: true,powerpaste_word_import: 'clean',code_dialog_height: 450,code_dialog_width: 1000,advlist_bullet_styles: 'square',advlist_number_styles: 'default',default_link_target: '_blank',link_title: false,nonbreaking_force_tab: true,resize: false,// 重點在這 !!!!!!!setup(editor) {// 往editor工具欄添加按鈕配置 (僅添加配置,是否使用不在此)// 第一個參數是工具名稱--imgs,第二個參數是配置屬性editor.ui.registry.addButton('imgs', {// text:工具欄的顯示的內容text: '<i class="el-icon-picture"></i>',// 點擊圖標或文字時的事件回調onAction: () => {// 點擊事件_this.dialog = true // 自定義的彈窗控制屬性(僅作參考)}})},}},
在自己代碼基礎上增添 setup 方法內部的方法即可。
注:增加完按鈕配置,記得在 toolbar 中添加你自定義的工具名稱,否則無法在工具欄中顯示。
這里只是展示了普通使用方法,具體的配置我沒有做出深入研究,也許哪天突發奇想了會補充!
貼官網配置鏈接(https://www.tiny.cloud/docs/tinymce/6/custom-basic-toolbar-button)