|
|
@@ -1,34 +1,45 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div v-show="isEmpty && !edit" class="text-edit">
|
|
|
- {{ emptyText }}
|
|
|
- <el-button type="text" @click="ImmediateAddition">{{ inputButton }}</el-button>
|
|
|
- </div>
|
|
|
- <div v-show="edit">
|
|
|
- <el-tooltip effect="dark" content="单击‘编辑’，失去焦点 ‘保存’" placement="bottom">
|
|
|
- <my-tinymce ref="myTinymce" :tinymce-html="value" :tinymce-height="setHeight" />
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- <div v-show="!isEmpty && !edit">
|
|
|
- <pre class="text-pre" @click="ImmediateAddition">{{ value }}</pre>
|
|
|
- </div>
|
|
|
+ <article :id="id">
|
|
|
+ <div v-show="isEmpty && !edit" class="text-edit">
|
|
|
+ {{ emptyText }}
|
|
|
+ <el-button type="text" @click="ImmediateAddition">{{ inputButton }}</el-button>
|
|
|
+ </div>
|
|
|
+ <div v-show="edit">
|
|
|
+ <el-tooltip effect="dark" content="单击‘编辑’，失去焦点 ‘保存’" placement="bottom">
|
|
|
+ <editor v-model="inputValue" :class="'tinymce_'+id" :init="init" @input="changeText" />
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <div v-show="!isEmpty && !edit">
|
|
|
+ <pre class="text-pre" @click="ImmediateAddition" v-html="value" />
|
|
|
+ </div>
|
|
|
+ <div :id="'inputUpload_'+id" style="display: none" @click.stop="blur_textarea" />
|
|
|
+ </article>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import myTinymce from '@/views/Platform/MyTinymce/MyTinymce.vue'
|
|
|
+import tinymce from 'tinymce/tinymce'
|
|
|
+import Editor from '@tinymce/tinymce-vue'
|
|
|
+import 'tinymce/themes/silver/theme'
|
|
|
+
|
|
|
export default {
|
|
|
components: {
|
|
|
- myTinymce
|
|
|
+ Editor
|
|
|
},
|
|
|
props: {
|
|
|
+ id: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ required: true
|
|
|
+ },
|
|
|
value: {
|
|
|
type: String,
|
|
|
default: '',
|
|
|
required: false
|
|
|
},
|
|
|
- size: {
|
|
|
- type: String,
|
|
|
- default: 'small',
|
|
|
+ height: {
|
|
|
+ type: Number,
|
|
|
+ default: 200,
|
|
|
required: false
|
|
|
},
|
|
|
emptyText: {
|
|
|
@@ -46,7 +57,24 @@ export default {
|
|
|
return {
|
|
|
inputValue: '',
|
|
|
edit: false,
|
|
|
- setHeight: 200
|
|
|
+ init: {
|
|
|
+ selector: '#tinymce',
|
|
|
+ language_url: '/tinymce/langs/zh_CN.js',
|
|
|
+ language: 'zh_CN',
|
|
|
+ skin_url: '/tinymce/skins/ui/oxide', // 编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
|
|
|
+ height: this.height,
|
|
|
+ browser_spellcheck: true, // 拼写检查
|
|
|
+ branding: false, // 去水印
|
|
|
+ elementpath: false, // 禁用编辑器底部的状态栏
|
|
|
+ statusbar: false, // 隐藏编辑器底部的状态栏
|
|
|
+ paste_data_images: true, // 允许粘贴图像
|
|
|
+ menubar: false, // 隐藏最上方menu
|
|
|
+ fontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', // 字体大小
|
|
|
+ file_picker_types: 'image',
|
|
|
+ images_upload_credentials: true,
|
|
|
+ plugins: 'lists table textcolor wordcount contextmenu', // 引入插件
|
|
|
+ toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent table | undo redo | removeformat formatselect'
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -62,16 +90,28 @@ export default {
|
|
|
immediate: true
|
|
|
}
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ document.body.addEventListener('click', e => {
|
|
|
+ const isContain = document.getElementById(this.id).contains(e.target)
|
|
|
+ if (!isContain) {
|
|
|
+ document.getElementById(`inputUpload_${this.id}`).click()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ tinymce.init({ selector: `.tinymce_${this.id}` })
|
|
|
+ },
|
|
|
methods: {
|
|
|
- ImmediateAddition() {
|
|
|
- // 立即添加（编辑）
|
|
|
+ ImmediateAddition() { // 立即添加（编辑）
|
|
|
this.edit = true
|
|
|
- // this.$refs.textarea.focus()
|
|
|
+ },
|
|
|
+ changeText(e) { // 富文本内容改变
|
|
|
+ this.inputValue = e
|
|
|
},
|
|
|
blur_textarea() {
|
|
|
- this.edit = false
|
|
|
- this.$emit('update:value', this.inputValue)
|
|
|
- this.$emit('change', this.inputValue)
|
|
|
+ if (this.edit) {
|
|
|
+ this.edit = false
|
|
|
+ this.$emit('update:value', this.inputValue)
|
|
|
+ this.$emit('change', this.inputValue)
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
PrinceLee