一、安装依赖
npm i vue-ueditor-wrap
# 或者
yarn add vue-ueditor-wrap
二、下载ueditor并将其复制到Static目录下 如图所示:
三、引入VueUeditorWrap组件
import VueUeditorWrap from 'vue-ueditor-wrap' // 引入富文本组件
components: {
VueUeditorWrap
}
四、实例化、v-model绑定数据
<VueUeditorWrap v-model="vueMoudle" :config="ueConfig" />
data(){
reture{
vueMoudle:"富文本测试数据",
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
}
}
}
运行代码页面展示
完成!