|
- <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" :imgWidth.sync="imgWidth" 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,
- imgWidth: 0
- }
- },
- 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>'
- if (this.imgWidth > 800) {
- imageHtml = '<p><img width="100%" 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>
|