|
|
@@ -1,208 +1,230 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<VueUeditorWrap |
|
|
|
class="ueditor" |
|
|
|
@beforeInit="addCustomButtom" |
|
|
|
:id="setSessionid()" |
|
|
|
@ready="readyCustom" |
|
|
|
v-model="content" |
|
|
|
:config="config" |
|
|
|
></VueUeditorWrap> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import VueUeditorWrap from 'vue-ueditor-wrap' |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
VueUeditorWrap |
|
|
|
}, |
|
|
|
props: { |
|
|
|
btnShow: { |
|
|
|
type: Boolean, |
|
|
|
default: false |
|
|
|
}, |
|
|
|
comeContent: { |
|
|
|
type: String, |
|
|
|
default: '' |
|
|
|
}, |
|
|
|
zIndex: { |
|
|
|
type: Number, |
|
|
|
default: 999 |
|
|
|
}, |
|
|
|
isDisabled: { |
|
|
|
type: Number, |
|
|
|
default: 0 |
|
|
|
} |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
content: '', |
|
|
|
editor: null, |
|
|
|
config: { |
|
|
|
toolbars: [ |
|
|
|
[ |
|
|
|
'source', // 源代码 |
|
|
|
'undo', // 撤销 |
|
|
|
'redo', // 重做 |
|
|
|
'bold', // 加粗 |
|
|
|
'indent', // 首行缩进 |
|
|
|
// 'snapscreen', //截 图 |
|
|
|
'italic', // 斜体 |
|
|
|
'underline', // 下划线 |
|
|
|
'strikethrough', // 删除线 |
|
|
|
'subscript', // 下标 |
|
|
|
'fontborder', // 字符边框 |
|
|
|
'superscript', // 上标 |
|
|
|
'formatmatch', // 格式刷 |
|
|
|
'blockquote', // 引用 |
|
|
|
// 'pasteplain', // 纯文本粘贴模式 |
|
|
|
'selectall', // 全选 |
|
|
|
// 'preview', // 预览 |
|
|
|
'horizontal', // 分隔线 |
|
|
|
'removeformat', // 清除格式 |
|
|
|
// 'time', // 时间 |
|
|
|
// 'date', // 日期 |
|
|
|
'unlink', // 取消链接 |
|
|
|
/* 'insertrow', // 前插入行 |
|
|
|
'insertcol', // 前插入列 |
|
|
|
'mergeright', // 右合并单元格 |
|
|
|
'mergedown', // 下合并单元格 |
|
|
|
'deleterow', // 删除行 |
|
|
|
'deletecol', // 删除列 |
|
|
|
'splittorows', // 拆分成行 |
|
|
|
'splittocols', // 拆分成列 |
|
|
|
'splittocells', // 完全拆分单元格 |
|
|
|
'deletecaption', // 删除表格标题 |
|
|
|
'inserttitle', // 插入标题 |
|
|
|
'mergecells', // 合并多个单元格 |
|
|
|
'deletetable', // 删除表格 |
|
|
|
'cleardoc', // 清空文档 |
|
|
|
'insertparagraphbeforetable', //" 表格前插入行" |
|
|
|
'insertcode', // 代码语言 */ |
|
|
|
'fontfamily', // 字体 |
|
|
|
'fontsize', // 字号 |
|
|
|
'paragraph', // 段落格式 |
|
|
|
// 'edittable', // 表格属性 |
|
|
|
// 'edittd', // 单元格属性 |
|
|
|
'link', // 超链接 |
|
|
|
// 'emotion', // 表情 |
|
|
|
'spechars', // 特殊字符 |
|
|
|
// 'searchreplace', // 查询替换 |
|
|
|
'justifyleft', // 居左对齐 |
|
|
|
'justifyright', // 居右对齐 |
|
|
|
'justifycenter', // 居中对齐 |
|
|
|
'justifyjustify', // 两端对齐 |
|
|
|
'forecolor', // 字体颜色 |
|
|
|
'backcolor', // 背景色 |
|
|
|
'lineheight' // 行间距 |
|
|
|
/* 'insertorderedlist', // 有序列表 |
|
|
|
'insertunorderedlist', // 无序列表 |
|
|
|
'directionalityltr', // 从左向右输入 |
|
|
|
'directionalityrtl', // 从右向左输入 |
|
|
|
'rowspacingtop', // 段前距 |
|
|
|
'rowspacingbottom', // 段后距 |
|
|
|
'pagebreak', // 分页 |
|
|
|
'imagenone', // 默认 |
|
|
|
'imageleft', // 左浮动 |
|
|
|
'imageright', // 右浮动 |
|
|
|
'imagecenter', // 居中 |
|
|
|
'wordimage', // 图片转存 |
|
|
|
'edittip ', // 编辑提示 |
|
|
|
'customstyle', // 自定义标题 |
|
|
|
'touppercase', // 字母大写 |
|
|
|
'tolowercase', // 字母小写 |
|
|
|
'inserttable' // 插入表格 */ |
|
|
|
] |
|
|
|
], |
|
|
|
zIndex: this.zIndex, |
|
|
|
autoHeightEnabled: false, // 编译器不自动被内容撑高 |
|
|
|
autoFloatEnabled: false, |
|
|
|
initialFrameHeight: 300, // 初始容器高度 |
|
|
|
initialFrameWith: '100%', |
|
|
|
postParams: this.postParams, |
|
|
|
// serverUrl: process.env.baseUrl + '/product/uploadFiles', // 上传文件地址 |
|
|
|
UEDITOR_HOME_URL: 'https://admin.meta-autotv.com/ueditor/' // UEditor资源文件的存放路径 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
content(val) { |
|
|
|
this.$emit('editorChange', val) |
|
|
|
}, |
|
|
|
comeContent: { |
|
|
|
handler(newVal, oldVal) { |
|
|
|
this.content = newVal |
|
|
|
}, |
|
|
|
immediate: true, |
|
|
|
deep: true |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
readyCustom(editor) { |
|
|
|
this.editor = editor |
|
|
|
console.log(this.isDisabled) |
|
|
|
if (this.isDisabled) this.editor.options.readonly = true |
|
|
|
}, |
|
|
|
addCustomButtom(editorId) { |
|
|
|
this.editorId = editorId |
|
|
|
this.divID = 'key' + editorId |
|
|
|
var _ = this |
|
|
|
window.UE.registerUI( |
|
|
|
'test-button', |
|
|
|
function(editor, uiName) { |
|
|
|
// 注册按钮执行时的 command 命令,使用命令默认就会带有回退操作 |
|
|
|
editor.registerCommand(uiName, { |
|
|
|
execCommand: function() { |
|
|
|
_.editorHandler = editor |
|
|
|
} |
|
|
|
}) |
|
|
|
// 创建一个 button |
|
|
|
var btn = new window.UE.ui.Button({ |
|
|
|
// 按钮的名字 |
|
|
|
name: uiName, |
|
|
|
// 提示 |
|
|
|
title: '上传图片', |
|
|
|
// 需要添加的额外样式,可指定 icon 图标,图标路径参考常见问题 2 |
|
|
|
// cssRules: `background-image: url("${UploadImg}") !important;background-size: cover;`, |
|
|
|
// 点击时执行的命令 |
|
|
|
onclick: function(res) { |
|
|
|
// 点击新图标时,触发到点击input按钮的事件 |
|
|
|
editor.execCommand(uiName) |
|
|
|
document.getElementById('key' + editorId).click() |
|
|
|
} |
|
|
|
}) |
|
|
|
// 当点到编辑内容上时,按钮要做的状态反射 |
|
|
|
editor.addListener('selectionchange', function() { }) |
|
|
|
|
|
|
|
// 因为你是添加 button,所以需要返回这个 button |
|
|
|
return btn |
|
|
|
} |
|
|
|
// 0 /* 指定添加到工具栏上的哪个位置,默认时追加到最后 */ |
|
|
|
// editorId /* 指定这个 UI 是哪个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮 */ |
|
|
|
) |
|
|
|
}, |
|
|
|
setSessionid(num) { |
|
|
|
var len = num || 32 |
|
|
|
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' |
|
|
|
var maxPos = chars.length |
|
|
|
var pwd = '' |
|
|
|
for (var i = 0; i < len; i++) { |
|
|
|
pwd += chars.charAt(Math.floor(Math.random() * maxPos)) |
|
|
|
} |
|
|
|
return pwd |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
::v-deep.ueditor{ |
|
|
|
.edui-editor{ |
|
|
|
width: 100% !important; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<VueUeditorWrap
|
|
|
|
class="ueditor"
|
|
|
|
@beforeInit="addCustomButtom"
|
|
|
|
:id="setSessionid()"
|
|
|
|
@ready="readyCustom"
|
|
|
|
v-model="content"
|
|
|
|
:config="config"
|
|
|
|
></VueUeditorWrap>
|
|
|
|
<el-dialog v-if="uploadDiolagVisible" :visible.sync="uploadDiolagVisible" append-to-body title="图片上传">
|
|
|
|
<el-form>
|
|
|
|
<el-form-item label="上传图片">
|
|
|
|
<uploadFile :url.sync="imgUrl" type="image" width="auto" height="auto"/>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
|
|
<el-button type="primary" @click="saveImg()">保存</el-button>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
</el-dialog>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import VueUeditorWrap from 'vue-ueditor-wrap'
|
|
|
|
import uploadFile from '@/components/uploadFile'
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
VueUeditorWrap,
|
|
|
|
uploadFile
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
btnShow: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
comeContent: {
|
|
|
|
type: String,
|
|
|
|
default: ''
|
|
|
|
},
|
|
|
|
zIndex: {
|
|
|
|
type: Number,
|
|
|
|
default: 999
|
|
|
|
},
|
|
|
|
isDisabled: {
|
|
|
|
type: Number,
|
|
|
|
default: 0
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
content: '',
|
|
|
|
editor: null,
|
|
|
|
config: {
|
|
|
|
toolbars: [
|
|
|
|
[
|
|
|
|
'source', // 源代码
|
|
|
|
'undo', // 撤销
|
|
|
|
'redo', // 重做
|
|
|
|
'bold', // 加粗
|
|
|
|
'indent', // 首行缩进
|
|
|
|
// 'snapscreen', //截 图
|
|
|
|
'italic', // 斜体
|
|
|
|
'underline', // 下划线
|
|
|
|
'strikethrough', // 删除线
|
|
|
|
'subscript', // 下标
|
|
|
|
'fontborder', // 字符边框
|
|
|
|
'superscript', // 上标
|
|
|
|
'formatmatch', // 格式刷
|
|
|
|
'blockquote', // 引用
|
|
|
|
// 'pasteplain', // 纯文本粘贴模式
|
|
|
|
'selectall', // 全选
|
|
|
|
// 'preview', // 预览
|
|
|
|
'horizontal', // 分隔线
|
|
|
|
'removeformat', // 清除格式
|
|
|
|
// 'time', // 时间
|
|
|
|
// 'date', // 日期
|
|
|
|
'unlink', // 取消链接
|
|
|
|
/* 'insertrow', // 前插入行
|
|
|
|
'insertcol', // 前插入列
|
|
|
|
'mergeright', // 右合并单元格
|
|
|
|
'mergedown', // 下合并单元格
|
|
|
|
'deleterow', // 删除行
|
|
|
|
'deletecol', // 删除列
|
|
|
|
'splittorows', // 拆分成行
|
|
|
|
'splittocols', // 拆分成列
|
|
|
|
'splittocells', // 完全拆分单元格
|
|
|
|
'deletecaption', // 删除表格标题
|
|
|
|
'inserttitle', // 插入标题
|
|
|
|
'mergecells', // 合并多个单元格
|
|
|
|
'deletetable', // 删除表格
|
|
|
|
'cleardoc', // 清空文档
|
|
|
|
'insertparagraphbeforetable', //" 表格前插入行"
|
|
|
|
'insertcode', // 代码语言 */
|
|
|
|
'fontfamily', // 字体
|
|
|
|
'fontsize', // 字号
|
|
|
|
'paragraph', // 段落格式
|
|
|
|
// 'edittable', // 表格属性
|
|
|
|
// 'edittd', // 单元格属性
|
|
|
|
'link', // 超链接
|
|
|
|
// 'emotion', // 表情
|
|
|
|
'spechars', // 特殊字符
|
|
|
|
// 'searchreplace', // 查询替换
|
|
|
|
'justifyleft', // 居左对齐
|
|
|
|
'justifyright', // 居右对齐
|
|
|
|
'justifycenter', // 居中对齐
|
|
|
|
'justifyjustify', // 两端对齐
|
|
|
|
'forecolor', // 字体颜色
|
|
|
|
'backcolor', // 背景色
|
|
|
|
'lineheight' // 行间距
|
|
|
|
/* 'insertorderedlist', // 有序列表
|
|
|
|
'insertunorderedlist', // 无序列表
|
|
|
|
'directionalityltr', // 从左向右输入
|
|
|
|
'directionalityrtl', // 从右向左输入
|
|
|
|
'rowspacingtop', // 段前距
|
|
|
|
'rowspacingbottom', // 段后距
|
|
|
|
'pagebreak', // 分页
|
|
|
|
'imagenone', // 默认
|
|
|
|
'imageleft', // 左浮动
|
|
|
|
'imageright', // 右浮动
|
|
|
|
'imagecenter', // 居中
|
|
|
|
'wordimage', // 图片转存
|
|
|
|
'edittip ', // 编辑提示
|
|
|
|
'customstyle', // 自定义标题
|
|
|
|
'touppercase', // 字母大写
|
|
|
|
'tolowercase', // 字母小写
|
|
|
|
'inserttable' // 插入表格 */
|
|
|
|
]
|
|
|
|
],
|
|
|
|
zIndex: this.zIndex,
|
|
|
|
autoHeightEnabled: false, // 编译器不自动被内容撑高
|
|
|
|
autoFloatEnabled: false,
|
|
|
|
initialFrameHeight: 300, // 初始容器高度
|
|
|
|
initialFrameWith: '100%',
|
|
|
|
postParams: this.postParams,
|
|
|
|
// serverUrl: process.env.baseUrl + '/product/uploadFiles', // 上传文件地址
|
|
|
|
UEDITOR_HOME_URL: 'https://admin.meta-autotv.com/ueditor/' // UEditor资源文件的存放路径
|
|
|
|
},
|
|
|
|
imgUrl: '',
|
|
|
|
uploadDiolagVisible: false
|
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
content(val) {
|
|
|
|
this.$emit('editorChange', val)
|
|
|
|
},
|
|
|
|
comeContent: {
|
|
|
|
handler(newVal, oldVal) {
|
|
|
|
this.content = newVal
|
|
|
|
},
|
|
|
|
immediate: true,
|
|
|
|
deep: true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
readyCustom(editor) {
|
|
|
|
this.editor = editor
|
|
|
|
console.log(this.isDisabled)
|
|
|
|
if (this.isDisabled) this.editor.options.readonly = true
|
|
|
|
},
|
|
|
|
saveImg() {
|
|
|
|
let imageHtml = '<p><img src=\"' + this.imgUrl + '\"/></p>'
|
|
|
|
this.editor.execCommand('inserthtml', imageHtml)
|
|
|
|
this.uploadDiolagVisible = false
|
|
|
|
},
|
|
|
|
addCustomButtom(editorId) {
|
|
|
|
let _this = this
|
|
|
|
window.UE.registerUI('test-button', function(editor, uiName) {
|
|
|
|
// 注册按钮执行时的 command 命令,使用命令默认就会带有回退操作
|
|
|
|
editor.registerCommand(uiName, {
|
|
|
|
execCommand: () => {
|
|
|
|
_this.imgUrl = ''
|
|
|
|
_this.uploadDiolagVisible = true
|
|
|
|
_this.editor = editor
|
|
|
|
}
|
|
|
|
})
|
|
|
|
// 创建一个 button
|
|
|
|
var btn = new window.UE.ui.Button({
|
|
|
|
// 按钮的名字
|
|
|
|
name: uiName,
|
|
|
|
// 提示
|
|
|
|
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
|
|
|
|
} /* 指定这个 UI 是哪个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮 */)
|
|
|
|
},
|
|
|
|
setSessionid(num) {
|
|
|
|
var len = num || 32
|
|
|
|
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
|
|
|
|
var maxPos = chars.length
|
|
|
|
var pwd = ''
|
|
|
|
for (var i = 0; i < len; i++) {
|
|
|
|
pwd += chars.charAt(Math.floor(Math.random() * maxPos))
|
|
|
|
}
|
|
|
|
return pwd
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
::v-deep.ueditor{
|
|
|
|
.edui-editor{
|
|
|
|
width: 100% !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|