vue2.0 實(shí)現(xiàn)富文本編輯器功能
前端富文本編譯器使用總結(jié):
UEditor:百度前端的開源項(xiàng)目,功能強(qiáng)大,基于 jQuery,但已經(jīng)沒有再維護(hù),而且限定了后端代碼,修改起來比較費(fèi)勁
bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery...
kindEditor:功能強(qiáng)大,代碼簡潔,需要配置后臺,而且好久沒見更新了
wangEditor:輕量、簡潔、易用,但是升級到 3.x 之后,不便于定制化開發(fā)。不過作者很勤奮,廣義上和我是一家人,打個call
quill:本身功能不多,不過可以自行擴(kuò)展,api 也很好懂,如果能看懂英文的話...
summernote:沒深入研究,UI挺漂亮,也是一款小而美的編輯器,可是我需要大的
在這里著重說一下這個 tinymce這個插件,
優(yōu)勢有三:
1. GitHub 上星星很多,功能也齊全;
2. 唯一一個從 word 粘貼過來還能保持絕大部分格式的編輯器;
3. 不需要找后端人員掃碼改接口,前后端分離;
上代碼(vue中使用)
1.引入
npm install @tinymce/tinymce-vue -S
2.在 node_modules
中找到 tinymce/skins 目錄,然后將 skins 目錄拷貝到 static 目錄下
// 如果是使用 vue-cli 3.x 構(gòu)建的 typescript 項(xiàng)目,就放到 public 目錄下,文中所有 static 目錄相關(guān)都這樣處理
3.給你們個語言包(https://www.tiny.cloud/download/language-packages/)地址都給了要是還不會那就沒救了
4.然后將這個語言包放到 static 目錄下,為了結(jié)構(gòu)清晰,我包了一層 tinymce 目錄
5.import
import tinymce from 'tinymce/tinymce' import 'tinymce/themes/modern/theme' import Editor from '@tinymce/tinymce-vue'
tinymce-vue 是一個組件,需要在 components 中注冊,然后直接使用
<editor id="tinymce" v-model="tinymceHTML" :init="tinymceInit"></editor>
這里的 init 是 tinymce 初始化配置項(xiàng),后面會講到一些關(guān)鍵的 api,完整 api 可以參考https://www.tiny.cloud/docs/configure/
編輯器需要一個 skin 才能正常工作,所以要設(shè)置一個 skin_url 指向之前復(fù)制出來的 skin 文件
data () { return { tinymceHtml: '請輸入內(nèi)容', init: { language_url: '/static/tinymce/zh_CN.js', language: 'zh_CN', skin_url: '/static/tinymce/skins/lightgray', height: 300, plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu', toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat', branding: false } } },
6.同時在 mounted 中也需要初始化一次:
mounted(){ tinymce.init({}) // 特別注意這個空對象的存在,如果這個初始化空對象不存在依舊會報錯 }
完整代碼如下:
<template> <div class='tinymce'> <h1>tinymce</h1> <!-- 富文本編輯組件 --> <editor id='tinymce' v-model='tinymceHtml' :init='init'></editor> <div v-html='tinymceHtml'></div> </div> </template> <script> import tinymce from 'tinymce/tinymce' import 'tinymce/themes/modern/theme' import Editor from '@tinymce/tinymce-vue' 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' export default { name: 'tinymce', data () { return { tinymceHtml: '請輸入內(nèi)容', init: { language_url: '/static/tinymce/zh_CN.js', language: 'zh_CN', skin_url: '/static/tinymce/skins/lightgray', height: 300, plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu', toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat', branding: false } } }, mounted () { tinymce.init({}) }, components: {Editor} } </script>
其中的帶plugins為擴(kuò)展性操作,如果不需要,可以不引入。
效果如下圖:
總結(jié)
以上所述是小編給大家介紹的vue2.0 實(shí)現(xiàn)富文本編輯器功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
深入理解Vue.js3中Reactive的實(shí)現(xiàn)
reactive是Vue 3的Composition API中的一個函數(shù),它允許你創(chuàng)建一個響應(yīng)式的數(shù)據(jù)對象,本文主要介紹了深入理解Vue.js3中Reactive的實(shí)現(xiàn),感興趣的可以了解一下2024-01-01vite2打包的時候vendor-xxx.js文件過大的解決方法
vite2是一個非常好用的工具,只是隨著代碼的增多,打包的時候?vendor-xxxxxx.js?文件也越來越大,本文主要介紹了vite2打包的時候vendor-xxx.js文件過大的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03vue-socket.io接收不到數(shù)據(jù)問題的解決方法
這篇文章主要介紹了解決vue-socket.io接收不到數(shù)據(jù)問題的解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05Vue+ElementUI創(chuàng)建一個帶有進(jìn)度顯示的文件下載和打包組件功能
如何使用 Vue 創(chuàng)建一個帶有進(jìn)度顯示和打包功能的文件下載組件,我們探討了如何導(dǎo)入必要的包,構(gòu)建組件的基礎(chǔ)結(jié)構(gòu),實(shí)現(xiàn)文件下載與進(jìn)度顯示,以及如何將文件打包為 ZIP 格式供用戶下載2024-08-08ElementPlus表單rules校驗(yàn)的方法步驟
相信大家經(jīng)常都會遇到要處理表單驗(yàn)證的環(huán)節(jié),而我在最近的項(xiàng)目中也遇到需要做表單驗(yàn)證的業(yè)務(wù),下面這篇文章主要給大家介紹了關(guān)于ElementPlus表單rules校驗(yàn)的方法步驟,需要的朋友可以參考下2023-04-04