tinymce自定義工具欄

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)

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/536693.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/536693.shtml
英文地址,請注明出處:http://en.pswp.cn/news/536693.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

strlen和sizeof的初步理解

大家好我是Beilef&#xff0c;一個美好的下我接觸到編程并且逐漸喜歡。我雖然不是科班出身但是我會更加努力地去學&#xff0c;有啥不對的地方請斧正 文章目錄 目錄 文章目錄 前言 想必大家對sizeof肯定很了解&#xff0c;那對strlen又了解多少。其實這個問題應該讓不少人困擾。…

openmediavault基本操作

omv基本操作 使用hostname訪問共享文件夾設置1.掛載磁盤2.提交更改3.新建用戶4.建立共享文件夾5.設置SMB/CIFS服務7.測試7.1.速度測試 使用hostname訪問 把網口和wifi設置成DHCP,使用hostname訪問,這樣把NAS拿到任何地方都不需要配置了,自動聯網進行訪問. #網絡->常規 #設…

Matlab仿真2ASK/OOK、2FSK、2PSK、QPSK、4QAM在加性高斯白噪聲信道中的誤碼率與歸一化信噪比的關系

本文為學習所用&#xff0c;嚴禁轉載。 本文參考鏈接 https://zhuanlan.zhihu.com/p/667382398 QPSK代碼及高斯白噪聲如何產生 https://ww2.mathworks.cn/help/signal/ref/butter.html 濾波器 https://www.python100.com/html/4LEF79KQK398.html 低通濾波器 本實驗使用matlab仿…

靜態HTTP的優勢:速度、安全性和可擴展性,一個都不能少!

大家好&#xff0c;今天我們來聊聊靜態HTTP的優勢。有人可能會說&#xff1a;“靜態HTTP&#xff0c;不就是那些不會動的網頁嗎&#xff1f;”錯&#xff01;靜態HTTP可不僅僅是靜止不動的&#xff0c;它可是讓網站速度飛快、安全穩定、擴展性強的神器&#xff01;不信&#xf…

鴻蒙插槽?全局插槽和局部插槽?數據不更新?

Builder的基本語法數據是不會響應式的 第一種&#xff1a; 全局插槽&#xff1a;傳入的變量是state數據&#xff08;數據是對象也一樣&#xff09;&#xff0c;但是button點擊更改&#xff0c;并沒有任何反應。規則就是不更新 Entry Component struct Demo02 {State message:…

TomcatHttp協議

1 javaWEB 1.1 Web概述 Web在英文中的含義是網狀物&#xff0c;網絡。在計算機領域&#xff0c;它通常指的是后者&#xff0c;即網絡。像我們前面接觸的WWW&#xff0c;它是由3個單詞組成的&#xff0c;即&#xff1a;World Wide Web&#xff0c;中文含義是萬維網。而我們前…

如何深入理解Java的多態?

在Java中&#xff0c;多態&#xff08;polymorphism&#xff09;是面向對象編程的一個重要概念&#xff0c;它允許你使用一個通用的接口來表示不同的對象和操作這些對象&#xff0c;而不必關心具體的對象類型。多態性有兩種主要形式&#xff1a;編譯時多態&#xff08;靜態多態…

C語言使用qsort和bsearch實現二分查找

引言 在計算機科學領域&#xff0c;查找是一項基本操作&#xff0c;而二分查找是一種高效的查找算法。本博客將詳細解釋一個簡單的C語言程序&#xff0c;演示如何使用標準庫函數qsort和bsearch來對一個整數數組進行排序和二分查找。 代碼解析 包含頭文件 #include <stdi…

數據分析思維

Why&What 數據分析是為了驅動決策賦能業務。在數據分析過程中需要對目標進行拆解量化&#xff0c;如何拆解量化目標便是數據分析思維。 在任務拆解過程中使用的軟件、統計模型、分析方法等為分析工具和手段&#xff0c;如何在恰當的場景合理的使用這些工具、模型、方法、手…

中介者和訪問者模式(行為型設計模式)的 C++ 代碼示例模板

文章目錄 前言代碼倉庫中介者模式&#xff08;Mediator&#xff09;訪問者模式&#xff08;Visitor&#xff09;總結參考資料作者的話 前言 中介者和訪問者模式&#xff08;行為型設計模式&#xff09;的 C 代碼示例模板。 代碼倉庫 yezhening/Programming-examples: 編程實例…

HarmonyOS應用程序包-(下)

HarmonyOS應用程序包-(下) 1.多HAP的開發調試與發布部署流程 多HAP的開發調試與發布部署流程如下圖所示。 圖1 多HAP的開發調試與發布部署流程 開發 開發者通過DevEco Studio工具按照業務的需要創建多個Module&#xff0c;在相應的Module中完成自身業務的開發。 調試 通過…

C++歸并排序詳解以及代碼實現

1. 介紹 歸并排序&#xff08;Merge Sort&#xff09;是一種采用分治法&#xff08;Divide and Conquer&#xff09;策略的排序算法。該算法首先將已有序的子序列合并&#xff0c;得到完全有序的序列。在歸并排序中&#xff0c;合并操作是將兩個有序表合并成一個有序表的過程。…

echarts實現七天天氣預報

效果圖 實現代碼 const imglist {"晴": data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAAXNSR0IArs4c6QAAByJJREFUaEO9Wl1rFGcUfs67u/nYbOIXJlGopBTx27aQWGOwSMS75sao2BtBQVD/gWCJouA/sIWCBW8M1nqjd1IplW5DYqLWEUoSi9iEjHaJmaz2d05ZWd2Nj…

KingbaseV8R6單實例定時全量備份步驟

此場景為單機數據庫節點內部備份&#xff0c;方便部署和操作&#xff0c;但備份REPO與數據庫實例處于同一個物理主機&#xff0c;冗余度較低。 前期準備 配置ksql免密登錄(必須) 在Kingbase數據庫運行維護中&#xff0c;經常用到ksql工具登錄數據庫&#xff0c;本地免密登錄…

基于OpenCV的圖像顏色與形狀識別的原理

基于 OpenCV 的圖像顏色與形狀識別是通過以下原理實現的&#xff1a; 圖像預處理&#xff1a;首先&#xff0c;將彩色圖像轉換為灰度圖像。這樣做是因為在灰度圖像中&#xff0c;每個像素只有一個顏色通道&#xff0c;可以更方便地進行后續處理。 閾值分割&#xff1a;對灰度圖…

Linux系統編程(六):進程(下)

參考引用 UNIX 環境高級編程 (第3版)嵌入式Linux C應用編程-正點原子 1. 進程與程序 1.1 main() 函數由誰調用&#xff1f; C 語言程序總是從 main 函數開始執行int main(void) int main(int argc, char *argv[]) // 如果需要向應用程序傳參&#xff0c;則選擇該種寫法操作系…

C++ 比 C語言增加的新特性 2

1.C新增了帶默認值參數的函數 1.1 格式 格式&#xff1a;返回值 函數名&#xff08;參數1初始值1&#xff0c;..........&#xff09;{} 例如&#xff1a;void function&#xff08;int a10&#xff09;{} 調用&#xff1a;不需要更改參數的值&#xff1a;function&#x…

基于SSM和微信小程序的高校體育場管理系統

文章目錄 項目介紹主要功能截圖:部分代碼展示設計總結項目獲取方式?? 作者主頁:超級無敵暴龍戰士塔塔開 ?? 簡介:Java領域優質創作者??、 簡歷模板、學習資料、面試題庫【關注我,都給你】 ??文末獲取源碼聯系?? 項目介紹 基于SSM和微信小程序的高校體育場管理系…

文本編輯器:Sublime Text (安裝+漢化)

下載 Sublime Text - Text Editing, Done Righthttps://www.sublimetext.com/Sublime Text官網 支持mac&#xff0c;Linux&#xff0c;Windows 安裝 選擇安裝路徑 next install 選擇安裝位置安裝就行了 漢化 進入了主界面按 CTRLshiftp 輸入install 選擇第一個 彈窗就按確…

服務器擴容未生效、不成功:解決方法

記一次解決服務器擴容未生效的解決辦法 老板&#xff1a;失憶啊&#xff0c;我花錢給服務器擴容了10000000G&#xff0c;但是數據庫和mq都還是用不了&#xff0c;到底是不是服務器磁盤滿了&#xff0c;你到底有沒有查一下什么原因導致服務用不了啊。 失憶&#xff1a;老板您確…