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