vue常用的文本编辑器vue-ueditor-wrap使用总结

时间：2024-02-24 17:54:37

原文出处链接：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

相关文章