Vue项目中使用百度编辑器和wangEditor编辑器
Vue项目中使用百度编辑器和wangEditor编辑器
一、wangEditor编辑器
1、先安装插件
使用npm下载：npm install wangeditor
2、编写成组件（这个编辑器只支持组件调用）
<template>
<div id="wangeditor">
<!-- {{editorDatas}} -->
<div ref="editorElem" style="text-align:left;"></div>
</div>
</template>
<script>
import axios from 'axios';
import E from "wangeditor";
export default {
name: "Editor",
data() {
return {
editor: null,
editorContent: '',
};
},
// catchData是一个类似回调函数，来自父组件，当然也可以自己写一个函数，主要是用来获取富文本编辑器中的html内容用来传递给服务端
props: ['catchData', 'editorDatas'], // 接收父组件的方法
watch: {
// 监视和编辑时候获取传过来的值
editorDatas(newVal, oldVal) {
if (newVal) {
this.editor.txt.html(newVal);
}
}
},
mounted() {
this.editor = new E(this.$refs.editorElem);
// 编辑器的事件，每次改变会获取其html内容
this.editor.customConfig.onchange = html => {
this.editorContent = html;
this.catchData(this.editorContent); // 把这个html通过catchData的方法传入父组件
};
// 本地图片上传：关闭外部图片引入
// this.editor.customConfig.showLinkImg = false;
/* 自定义图片上传（支持跨域和非跨域上传，简单操作）*/
this.editor.customConfig.customUploadImg = async (files, insert) => {
let config1 = {
headers: {
'Content-Type': 'multipart/form-data;',
'clientType': 'pc',
'TY_SESSION': localStorage.getItem('token'),
}
};
let formData = new FormData()
formData.append('file', files[0])
let data = ''
data = await this.$axios.post('/HK_UploadAPI/file/commonUpload', formData, config1)
if (data.data.code == 200) {
insert(data.data.data)
} else {
this.$message({
message: '图片上传失败,请重新上传',
type: 'error',
center: true
});
}
}
this.editor.customConfig.menus = [
// 菜单配置
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'image', // 插入图片
'table', // 表格
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
];
this.editor.create(); // 创建富文本实例
// console.log(this.editorDatas);
this.editor.txt.html(this.editorDatas); // 接收编辑传过来的值
}
}
</script>
<style scoped lang="stylus">
.w-e-toolbar {
flex-wrap: wrap;
}
#wangeditor {
background: #fff;
color: #000;
}
</style>
3、导入组件和使用
<template>
<div>
<EDITOR :catchData="editorChange" :editorDatas="modelDataObj.noticeContext"></EDITOR>
</div>
</template>
<script>
import axios from 'axios';
import EDITOR from "@/components/wangeditor.vue";
export default {
components: {
EDITOR,
},
data() {
return {
modelDataObj: {},
}
},
methods: {
editorChange(html) { // 父组件接收子组件的html值
this.modelDataObj.noticeContext = html
},
},
}
</script>
二、百度编辑器
1、安装插件
使用npm下载：npm install wangeditor
2、下载UEditor.zip安装包解压放入项目public文件夹下
3、使用
****** html模块 ******
<div class="el-menu-vertical-div">
// 由于百度图片上传需要改动底层代码，所以使用了el-upload上传组件
<el-upload v-show="false" class="avatar-uploader" id="avatar-uploader_1" action="" :before-upload="beforeUpload"></el-upload>
<VueUeditorWrap v-model="modelDataObj.noticeContext" id="container" :config="myConfig" @ready="ready"
@beforeInit="addCustomButtom"></VueUeditorWrap>
</div>
****** JS模块 ******
import VueUeditorWrap from 'vue-ueditor-wrap';
myConfig: {
UEDITOR_HOME_URL: '/UEditor/',
autoHeightEnabled: false,
initialFrameWidth: '100%'
},
// ************百度编辑器 ready(editorInstance) { // console.log(`编辑器实例${editorInstance.key}: `, editorInstance); editorInstance.addListener('contentChange', () => { // this.content = instance.getContent(); }); }, //插入图片 insertImage() { let imageList = this.imageList; let imageHtml = ''; (imageList || []).map(item => { imageHtml = imageHtml + '<p><img src="' + item + '"/></p>'; }); if (imageHtml != '') { this.editorHandler.execCommand('inserthtml', imageHtml); } }, //上传图片前的函数 beforeUpload(file) { this.imageList = []; const isLt5M = file.size / 1024 / 1024 < 5; if (!isLt5M) { this.$message.error('上传图片大小不能超过 5MB!'); return; } //校验成功上传文件 //将文件转化为formdata数据上传 let formData1 = new FormData(); // formData.append('file', file); //这里设置的是 image格式 一般用file格式就行 formData1.append('file', file); // console.log(formData.has('image')); //true let config1 = { headers: { 'Content-Type': 'multipart/form-data;', 'clientType': 'pc', 'TY_SESSION': localStorage.getItem('token'), } }; this.isShow = true; const instan1 = axios.create({ withCredentials: true }); //post上传图片 instan1.post('/HK_UploadAPI/file/commonUpload', formData1, config1 ).then(res => { if (res.data.code === 200) { let jsonimage = res.data; if (!jsonimage || !jsonimage.data) { this.$message.error(res.msg); return; } this.isShow = false; // 如果上传成功 this.imageList.push(jsonimage.data); this.$message.success('图片上传成功'); this.insertImage(); } else { this.$message.error('图片上传失败'); this.isShow = false; } }); return isLt5M; }, //自定义 添加图片按钮控件 addCustomButtom(editorId) { let _this = this; //自定义图片 window.UE.registerUI( 'picture-button', function (editor, uiName) { editor.registerCommand(uiName, { execCommand: () => { //点击上传 document.querySelector('#avatar-uploader_1 input').click(); _this.editorHandler = editor; } }); // 创建一个 button var btn = new window.UE.ui.Button({ // 按钮的名字 name: uiName, // 提示 // title: '鼠标悬停时的提示文字', title: '上传图片', // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2 cssRules: 'background-position: -380px 0;', // 点击时执行的命令 onclick: function () { // 这里可以不用执行命令，做你自己的操作也可 editor.execCommand(uiName); } }); // 当点到编辑内容上时，按钮要做的状态反射 editor.addListener('selectionchange', function () { var state = editor.queryCommandState(uiName); if (state === -1) { btn.setDisabled(true); btn.setChecked(false); } else { btn.setDisabled(false); btn.setChecked(state); } }); // 因为你是添加 button，所以需要返回这个 button return btn; }, 55 /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */ ); },
三、资源下载
myConfig: {
UEDITOR_HOME_URL: '/UEditor/',
autoHeightEnabled: false,
initialFrameWidth: '100%'
},
