vue 富文字編輯器 - fullEditer

阿新 • • 發佈：2020-12-27

-用

-引
import Editor from '@/components/Editor';
components: {
Editor
}
noticeContent:""
-源

-用 -引 import Editor from \'@/components/Editor\'; components: { Editor } noticeContent:\"\" -源

1.挑個富文字編輯器首先針對自己專案的型別，確定自己要用啥編輯器。 1.1 wangeditor

富文字編輯器（圖片拖拽縮放）需求：根據業務要求，需要能夠上傳圖片，且上傳的圖片能在移動端中佔滿螢幕寬度，故需要能等比縮放上傳的圖片，還需要能拖拽、縮放、改變圖片大小。嘗試多個第三方富文字編輯器，很難

首先使用方法下載連結下載tinymce檔案解壓後放在components目錄下頁面中使用 1）引入檔案 2）註冊元件 3）html中使用

使用教程(注意細看總結部分，寫了幾點，希望有所幫助)： 1、安裝外掛：npm install vue-quill-editor

第一步，下載依賴 yum install kindeditor 第二步，建立kindeditor.vue元件 <template> <div class=\"kindeditor\">

1，vue中安裝wangEditor 使用的npm安裝 npm install wangeditor --save 2，建立公用元件在components中建立wangEnduit資料夾

1、安裝tinymce-vue和tinymce npm install @tinymce/tinymce-vue -save npm install tinymce -save 2、在public下建立以下目錄結構

先看效果：像這樣的富文字編輯器，在我們做後臺管理專案的時候經常遇到，本文章展示一種可以實現此效果的方法；

　　如題，之前使用的wangeditor，雖然挺簡單的，但是功能太少，太單一了，不合適，因此，今天拿出了一天時間仔細研究了一下tinymce編輯器，程式碼貼出來，方便別人檢視，也方便自己檢視。

1.下載vue-ueditor-wrap cnpm i vue-ueditor-wrap -S 下載最新的 UEditor 資原始檔放入你專案的靜態資源目錄中（比如 static 或者 public，這取決於你專案的配置）。

在vue+element ui開發專案過程中需要實現富文字編輯器功能第一種方法：vue-quill-editor（參考了https://www.jianshu.com/p/a6cba69d6e49這篇文章）

參考TinyMce中文文件因為要使用TinyMce圖片批量上傳外掛，如果使用npm匯入tinyMce會無法使用，所以得另外匯入應用

文章剛開始先來介紹一下vue-quill-editor富文字編輯器的簡單使用，具體操作步驟如下：

第一步，下載依賴 yarn add kindeditor 第二步，建立kindeditor.vue元件 <template> <div class=\"kindeditor\">

vue 安裝npm i wangeditor --save 建立一個editoritem元件 components/editoritem.vue //目錄以自己專案為主

一、下載： npm install vue-quill-editor --save 二、封裝成一個獨立的元件：因為有圖片上傳，本程式碼結合vant

一、準備工作下載vue-quill-editor npm install vue-quill-editor --save 或者 yarn add vue-quill-editor

第一步，安裝依賴，並且把ueditor整個資料夾放入public裡邊第二步，在你需要編輯的地方引入，或者main.js中全域性引入

需求：根據業務要求，需要能夠上傳圖片，且上傳的圖片能在移動端中佔滿螢幕寬度，故需要能等比縮放上傳的圖片，還需要能拖拽、縮放、改變圖片大小。嘗試多個第三方富文字編輯器，很難找到一個完美符合自己要求的編