vue 后台管理系统项目引入富文本编辑器vue-ueditor-wrap

因为业务需要,需要在项目里去做一个发布消息的富文本编辑器,能够实现传递给后台的编辑器内容能够自己编译(即html语义化标签)

1. 安装依赖👇

首先在项目终端里执行以下命令:

npm i vue-ueditor-wrap

如果提示npm不是内部命令,就说明node.js未安装

2.下载百度UEditor插件👇

可以选择去官网下载(下载地址:http://ueditor.baidu.com/website/download.html)

这里下载的版本是[1.4.3.3 Jsp版本]

在这里插入图片描述
也可以选择去我分享的百度网盘去下载(链接:https://pan.baidu.com/s/1LMPwPfctNZHrbJfTHsFouw
提取码:t39q)

之后将下载好的ueditor复制到Static目录下 如图所示:
在这里插入图片描述

修改ueditor/ueditor.config.js 里的务器统一请求接口路径

注:这个请求路径是请求服务器得到配置信息,所以需要在服务器中配置这个配置信息

在这里插入图片描述

2-1,在开发过程中可以配置为如下:

var URL =window.UEDITOR_HOME_URL ="/ProjectName/ueditor/";

2-2,在发布到Internet时,可以配置如下:

var URL =window.UEDITOR_HOME_URL ="/www.65101.cn/ueditor/";

2-3,如果你的Internet站点配置了ROOT发布目录(省去域名),配置如下:

var URL =window.UEDITOR_HOME_URL ="/ueditor/";

此处直接使用上面的路径,无需重新定义:
URL = window.UEDITOR_HOME_URL || (function(){此处代码省略…});

3.引入VueUeditorWrap组件👇

<script type="text/ecmascript-6">
import Vue from 'vue'
import VueUeditorWrap from 'vue-ueditor-wrap'

注册一下这个组件

 components: {
    VueUeditorWrap
  },
4.调用富文本编辑器👇
 <vue-ueditor-wrap v-model="form.msg" :config="ueConfig"></vue-ueditor-wrap>

在这里插入图片描述
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,
			 },
	   }
}

效果如图:
在这里插入图片描述

5.业务需要将存的内容再查出来,然后展示到页面上,👇

只需要在展示的地方加上v-html即可

 <div class="viewmessage_dialog_content">
     <span v-html="this.dialogContent"></span>
 </div>

在这里插入图片描述
在这里插入图片描述

最后,基本需求基本完成
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页