Vue使用Tinymce富文本自定義toolbar按鈕的實(shí)踐
富文本編輯器有很多,流行的有UEditor , kindeditor, CKEditor 等等。但今天我們來實(shí)現(xiàn)tniyMCE 的插件開發(fā)。
安裝tinymce、tinymce ts、tinymce-vue聲明文件
npm install tinymce -S npm install @types/tinymce -S npm install @tinymce/tinymce-vue -S
封裝組件
<template> <div> <editor :id="id" v-model="content" :init="init"></editor> </div> </template> <script lang="ts"> import { Component, Prop, Vue, Watch } from 'vue-property-decorator'; import tinymce from 'tinymce'; import Editor from '@tinymce/tinymce-vue'; import 'tinymce/themes/silver/theme'; import 'tinymce/plugins/image'; import 'tinymce/plugins/link'; import 'tinymce/plugins/code'; import 'tinymce/plugins/table'; import 'tinymce/plugins/lists'; import 'tinymce/plugins/contextmenu'; import 'tinymce/plugins/wordcount'; import 'tinymce/plugins/colorpicker'; import 'tinymce/plugins/textcolor'; import 'tinymce/plugins/media'; import 'tinymce/plugins/fullscreen'; import 'tinymce/plugins/preview'; import 'tinymce/plugins/pagebreak'; import 'tinymce/plugins/insertdatetime'; import 'tinymce/plugins/hr'; import 'tinymce/plugins/paste'; import 'tinymce/plugins/codesample'; import 'tinymce/icons/default/icons'; console.log(tinymce); @Component({ name: 'TinymceEditer', components: { Editor } }) export default class extends Vue { //設(shè)置prop id @Prop({ default: 'vue-tinymce-' + +new Date() }) id!: string; //默認(rèn)高度 @Prop({ default: 300 }) height!: number; @Prop({ default: '' }) private value!: string; private content: string = ''; @Watch('value') private onChangeValue(newVal: string) { this.content = newVal; } @Watch('content') private onChangeContent(newVal: string) { this.$emit('input', newVal); } //富文本框init配置 private get init() { return { selector: '#' + this.id, //富文本編輯器的id language: 'zh_CN', //語言 language_url: '/tinymce/zh_CN.js', //語言包 skin_url: '/tinymce/skins/ui/oxide', //編輯器需要一個(gè)skin才能正常工作,所以要設(shè)置一個(gè)skin_url指向之前復(fù)制出來的skin文件 menubar: false, //菜單條 plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu media table fullscreen preview pagebreak insertdatetime hr paste codesample emoticons', //插件 toolbar: 'bold italic underline strikethrough | fontselect | fontsizeselect | formatselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | removeformat| undo redo | link unlink image media insertdatetime table hr pagebreak codesample | code fullscreen preview', //工具條 font_formats: 'Arial=arial,helvetica,sans-serif; 宋體=SimSun; 微軟雅黑=Microsoft Yahei; Impact=impact,chicago;', //字體 fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 64px 72px', //文字大小 height: this.height, //高度 branding: false, //水印 elementpath: false, //底部元素路徑 paste_data_images: true, //允許粘貼圖片 //初始化前執(zhí)行 setup: (editor: any) => {}, //實(shí)例化執(zhí)行 init_instance_callback: (editor: any) => { this.content && editor.setContent(this.content); //this.hasInit = true editor.on('NodeChange Change KeyUp SetContent', () => { //this.hasChange = true this.content = editor.getContent(); }); }, //視頻設(shè)置回調(diào) video_template_callback: (data: any) => { return `<video width=" ${data.width} " height="${data.height}" ${data.poster ? 'poster="' + data.poster + '"' : ''} controls="controls"> <source src="${data.source}"/> </video>`; }, //粘貼圖片回調(diào) images_upload_handler: (blobInfo: any, success: Function, failure: Function) => { this.handleImgUpload(blobInfo, success, failure); }, }; } private mounted() { this.content = this.value; } //上傳圖片 private handleImgUpload(blobInfo: any, success: Function, failure: Function) { this.$emit('upload', blobInfo, success, failure); } } </script> <style lang="scss"> .tox-tinymce-aux { z-index: 3000 !important; } </style>
組件使用
<template> <tinymce v-model="content" /> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; import Tinymce from '@/components/tinymce/tinymce.vue'; @Component({ components: { Tinymce, }, }) export default class extends Vue { private content: string = ''; } </script> <style lang="scss" scoped></style>
Vue使用Tinymce富文本編輯器自定義toolbar按鈕
這里我增加了收縮的按鈕
init: { language: "zh_CN", skin_url: "/tinymce/skins/ui/oxide", height: "100%", fontsize_formats: "8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt", font_formats: "微軟雅黑=Microsoft YaHei;方正仿宋_GBK=方正仿宋_GBK;宋體=simsun,serif;仿宋體=FangSong,serif;黑體=SimHei;Times New Roman=Times New Roman;", plugins: { type: [String, Array], default: "code lists image media table wordcount indent2em" , toolbar: { type: [String, Array], default: "code | lineheight | undo redo | fontsizeselect | fontselect | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | myCustomToolbarButton | bullist numlist outdent indent indent2em| lists image media table | removeformat" }, branding: false, menubar: false, setup: editor => { let _this = this; editor.ui.registry.addButton("myCustomToolbarButton", { text: "收縮", onAction: function() { _this.show= !_this.show; } }); } },
關(guān)鍵代碼
這里使用 箭頭函數(shù) => 即可操作vue中屬性和事件
setup: editor => { let _this = this; editor.ui.registry.addButton("myCustomToolbarButton", { text: "收縮", onAction: function() { _this.show= !_this.show; } }); }
到此這篇關(guān)于Vue使用Tinymce富文本自定義toolbar按鈕的實(shí)踐的文章就介紹到這了,更多相關(guān)Vue Tinymce自定義toolbar 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問題
這篇文章主要介紹了elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vue2之響應(yīng)式雙向綁定,在對(duì)象或數(shù)組新增屬性頁面無響應(yīng)的情況
這篇文章主要介紹了vue2之響應(yīng)式雙向綁定,在對(duì)象或數(shù)組新增屬性頁面無響應(yīng)的情況及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04基于Vue實(shí)現(xiàn)自定義組件的方式引入圖標(biāo)
在vue項(xiàng)目中我們經(jīng)常遇到圖標(biāo),下面這篇文章主要給大家介紹了關(guān)于如何基于Vue實(shí)現(xiàn)自定義組件的方式引入圖標(biāo)的相關(guān)資料,文章通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07Vue+Element UI+Lumen實(shí)現(xiàn)通用表格分頁功能
這篇文章主要介紹了Vue+Element UI+Lumen實(shí)現(xiàn)通用表格分頁功能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02Vue?2?和?Vue?3?中?toRefs函數(shù)的不用用法
Vue?是一款流行的JavaScript?框架,用于構(gòu)建用戶界面,在Vue2和?Vue3中,都存在一個(gè)名為toRefs的函數(shù),但其行為在這兩個(gè)版本中有所不同,這篇文章主要介紹了Vue2和Vue3中toRefs的區(qū)別,需要的朋友可以參考下2023-08-08vue3.0找不到模塊“./App.vue”或其相應(yīng)的類型聲明(多種情況分析)
這篇文章主要介紹了vue3.0找不到模塊“./App.vue”或其相應(yīng)的類型聲明,報(bào)錯(cuò)原因是typescript?只能理解?.ts?文件,無法理解?.vue文件,本文通過多種情況分析給大家詳細(xì)講解,需要的朋友可以參考下2023-01-01vue2 使用@vue/composition-api依賴包 編譯、打包各種報(bào)錯(cuò)問題分析
由于package.json 文件中 vue、vue-template-compiler 版本號(hào)前面 多了個(gè) ^ 導(dǎo)致實(shí)際導(dǎo)入時(shí),node_module中的 vue 版本可能被升級(jí)為 2.7.x,這篇文章主要介紹了vue2 使用@vue/composition-api依賴包 編譯、打包各種報(bào)錯(cuò)問題分析,需要的朋友可以參考下2023-01-01