vue常用的文本編輯器vue-ueditor-wrap使用總結

原文出處鏈接：https://blog.csdn.net/qq_40180411/article/details/100149621

一、安裝依賴：

首先在前端項目Terminal中執行以下命令：

如果你沒安裝yarn就用npm（第一條命令），安裝過yarn就用(第二條命令)：簡單測試安裝yarn與否，可以在Terminal輸入yarn命令，如果提示yarn不是內部命令就是說明你還未成功安裝yarn，這時你可以選擇用npm命令安裝，如果npm也不是內部命令，那就說明你node.js可能也沒裝。

npm i vue-ueditor-wrap
# 或者
yarn add vue-ueditor-wrap
二、下載ueditor並將其復制到Static目錄下 如圖所示：

 

下載地址：鏈接：https://pan.baidu.com/s/1EkENeonqdV0nihswQkrwDA 
提取碼：5k52 
（當然你也可以直接去網上下載）

三、引入VueUeditorWrap組件

import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module

導入后是灰色的，你需要注冊一下這個組件，注冊組件：

components: {
  VueUeditorWrap
}
// 或者在 main.js 里將它注冊為全局組件
Vue.component('vue-ueditor-wrap', VueUeditorWrap)

 

注冊完，import VueUeditorWrap from 'vue-ueditor-wrap' 變成彩色字體，證明引入組件成功

四、實例化、v-model綁定數據

實例化：

 

v-model綁定文本編輯器內輸入內容，可以用來與后台傳數據。

：config綁定編輯器配置內容，可以對編輯器樣式進行個性化設置：

data () {
return {
ueConfig:{
toolbars: [
[
'undo', //撤銷
'bold', //加粗
'indent', //首行縮進
'italic', //斜體
'underline', //下划線
'strikethrough', //刪除線
'subscript', //下標
'fontborder', //字符邊框
'superscript', //上標
'formatmatch', //格式刷
'fontfamily', //字體
'fontsize', //字號
'justifyleft', //居左對齊
'justifycenter', //居中對齊
'justifyright', //居右對齊
'justifyjustify', //兩端對齊
'insertorderedlist', //有序列表
'insertunorderedlist', //無序列表
'lineheight',//行間距
]
],
'fontfamily':[
{ label:'',name:'songti',val:'宋體,SimSun'},
{ label:'仿宋',name:'fangsong',val:'仿宋,FangSong'},
{ label:'仿宋_GB2312',name:'fangsong',val:'仿宋_GB2312,FangSong'},
{ label:'',name:'kaiti',val:'楷體,楷體_GB2312, SimKai'},
{ label:'',name:'yahei',val:'微軟雅黑,Microsoft YaHei'},
{ label:'',name:'heiti',val:'黑體, SimHei'},
{ label:'',name:'lishu',val:'隸書, SimLi'},
{ label:'',name:'andaleMono',val:'andale mono'},
{ label:'',name:'arial',val:'arial, helvetica,sans-serif'},
{ label:'',name:'arialBlack',val:'arial black,avant garde'},
{ label:'',name:'comicSansMs',val:'comic sans ms'},
{ label:'',name:'impact',val:'impact,chicago'},
{ label:'',name:'timesNewRoman',val:'times new roman'}
],
// 初始容器高度
initialFrameHeight: 300,
// 初始容器寬度
initialFrameWidth: '100%',
// 上傳文件接口
enableAutoSave: false,
elementPathEnable: false,
wordCount: false,
},
}
}

 

 

版權聲明：本文為CSDN博主「一生所Ai」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_40180411/article/details/100149621