<template>
|
<div id="wangeditor">
|
<div ref="editorElem" style="text-align:left;" />
|
</div>
|
</template>
|
<script>
|
import E from 'wangeditor'
|
let self
|
export default {
|
name: 'EditorElem',
|
props: {
|
catchdata: {
|
type: Function,
|
default() {}
|
},
|
content: {
|
type: String,
|
default: ''
|
},
|
rangenum: {
|
type: Range,
|
default: null
|
}
|
},
|
data() {
|
return {
|
editor: null,
|
editorContent: ''
|
}
|
}, // 接收父组件的方法
|
watch: {
|
content(value) {
|
// console.log("没有光标则执行，有光标不执行，回显--解决输入时光标老跳到最底部", this.content, this.rangenum)
|
if (this.rangenum == null) {
|
// this.content.setRange(this.rangenum)
|
this.editor.txt.html(value)
|
}
|
}
|
},
|
mounted() {
|
self = this
|
this.editor = new E(this.$refs.editorElem)
|
this.editor.config.focus = false
|
this.editor.config.onchange = (html) => {
|
this.editorContent = html
|
this.catchdata(this.editorContent) // 把这个html通过catchData的方法传入父组件
|
}
|
// 去掉插入网络图片
|
this.editor.config.showLinkImg = false
|
// 粘贴来的内容过滤图片
|
this.editor.config.pasteIgnoreImg = true
|
this.editor.config.menus = [ // 菜单配置
|
'head', // 标题
|
'bold', // 粗体
|
'fontSize', // 字号
|
'fontName', // 字体
|
'italic', // 斜体
|
'underline', // 下划线
|
'strikeThrough', // 删除线
|
'foreColor', // 文字颜色
|
'backColor', // 背景颜色
|
'link', // 插入链接
|
'list', // 列表
|
'justify', // 对齐方式
|
'quote', // 引用
|
// 'emoticon', // 表情
|
'image', // 插入图片
|
'video', // 插入视频
|
// 'table', // 表格
|
'code', // 插入代码
|
'video',
|
'undo', // 撤销
|
'redo' // 重复
|
]
|
// 下面是最重要的的方法
|
// this.editor.config.withCredentials = true
|
// 将图片大小限制为 5M
|
this.editor.config.uploadImgMaxSize = 5 * 1024 * 1024
|
// 限制一次最多上传 1 张图片
|
this.editor.config.uploadImgMaxLength = 1
|
// 不忽略粘贴内容中的图片
|
this.editor.config.pasteIgnoreImg = false
|
this.editor.config.customUploadImg = function(files, insert) {
|
// files 是 input 中选中的文件列表
|
// insert 是获取图片 url 后，插入到编辑器的方法
|
// 因为file是个FormData格式的对象所以可以直接通过接口开始上传，不需要做多余操作
|
// 虽然文档说是FormData格式，但是我实际使用需要以下操作
|
const formData = new FormData()
|
formData.append('file', files[0])
|
console.log(formData, 'formDataformDataformDataformDataformData')
|
self.postFN(
|
{
|
url: 'admin/image/upload?folderCode=IMG',
|
header: { 'Content-Type': 'multipart/form-data' },
|
params: formData,
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {
|
imgUrl: 'xxxx'
|
}
|
}
|
},
|
inf => {
|
insert(inf.imgUrl)
|
}
|
)
|
}
|
|
// 配置富文本视频上传
|
this.editor.config.customUploadVideo = function(files, insert) {
|
// files 是 input 中选中的文件列表
|
// insert 是获取视频 url 后，插入到编辑器的方法
|
const formDataVideo = new FormData()
|
formDataVideo.append('file', files[0])
|
console.log(formDataVideo, 'formDataVideoformDataVideoformDataVideoformDataVideo')
|
self.postFN(
|
{
|
url: 'admin/image/upload?folderCode=VIDEO',
|
header: { 'Content-Type': 'multipart/form-data' },
|
params: formDataVideo,
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {
|
imgUrl: 'xxxx'
|
}
|
}
|
},
|
inf => {
|
// 上传视频，返回结果，将视频地址插入到编辑器中
|
insert(inf.imgUrl)
|
console.log(inf.imgUrl, '99999999999999999999999999')
|
}
|
)
|
}
|
|
// 自定义错误提示
|
this.editor.config.customAlert = function(info) {
|
// info 是需要提示的内容
|
self.$messagewarn(info)
|
}
|
// 过滤word复制
|
this.editor.config.pasteTextHandle = function(content) {
|
var html = content
|
html = html.replace(/<\/?SPANYES[^>]*>/gi, '')// 移除span
|
html = html.replace(/<\!\-\-(.|[\r\n])*?\-\->/gi, '')// 移除注释
|
html = html.replace(/<(\w[^>]*) {2}lang=([^|>]*)([^>]*)/gi, '<$1$3')// 移除lang属性
|
html = html.replace(/<\\?\?xml[^>]*>/gi, '')// 移除xml和相关描述
|
html = html.replace(/<\/?\w+:[^>]*>/gi, '')// 移除xml命名空间的标签
|
html = html.replace(/ /gi, '')// 移除空格
|
html = html.replace(/^\s+|\s+$/g, '')
|
html = html.replace(/<o:p> <\/o:p>/g, '')// 移除标签
|
html = html.replace(/<br\/>/g, '')// 移除br标签
|
return html
|
}
|
this.editor.create() // 创建富文本实例
|
// if (!this.content) {
|
// // this.editor.txt.html('请编辑内容1')
|
// }
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
#wangeditor {
|
position: sticky;
|
/*设置富文本框高度*/
|
.w-e-text-container{
|
height: 500px !important;
|
}
|
}
|
</style>
|
