|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<template>
<div class="tinymce-editor">
<editor
v-model="myValue"
:init="init"
:disabled="disabled"
@onClick="onClick">
</editor>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/image'
|
|
|
17
|
import 'tinymce/plugins/link'
|
|
|
18
19
20
21
22
23
24
|
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
|
|
|
25
|
import 'tinymce/plugins/fullscreen'
|
|
|
26
|
import { uploadAction,getFileAccessHttpUrl } from '@/api/manage'
|
|
|
27
28
29
30
31
32
33
34
35
|
export default {
components: {
Editor
},
props: {
value: {
type: String,
required:false
},
|
|
|
36
37
38
39
40
|
triggerChange:{
type: Boolean,
default: false,
required:false
},
|
|
|
41
42
43
44
45
46
|
disabled: {
type: Boolean,
default: false
},
plugins: {
type: [String, Array],
|
|
|
47
|
default: 'lists image link media table textcolor wordcount contextmenu fullscreen'
|
|
|
48
49
50
|
},
toolbar: {
type: [String, Array],
|
|
|
51
52
|
default: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists link unlink image media table | removeformat | fullscreen',
branding:false
|
|
|
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
}
},
data() {
return {
//初始化配置
init: {
language_url: '/tinymce/langs/zh_CN.js',
language: 'zh_CN',
skin_url: '/tinymce/skins/lightgray',
height: 300,
plugins: this.plugins,
toolbar: this.toolbar,
branding: false,
menubar: false,
|
|
|
67
|
toolbar_drawer: false,
|
|
|
68
|
images_upload_handler: (blobInfo, success) => {
|
|
|
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
let formData = new FormData()
formData.append('file', blobInfo.blob(), blobInfo.filename());
formData.append('biz', "jeditor");
formData.append("jeditor","1");
uploadAction(window._CONFIG['domianURL']+"/sys/common/upload", formData).then((res) => {
if (res.success) {
if(res.message == 'local'){
const img = 'data:image/jpeg;base64,' + blobInfo.base64()
success(img)
}else{
let img = getFileAccessHttpUrl(res.message)
success(img)
}
}
})
|
|
|
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
}
},
myValue: this.value
}
},
mounted() {
tinymce.init({})
},
methods: {
onClick(e) {
this.$emit('onClick', e, tinymce)
},
//可以添加一些自己的自定义事件，如清空内容
clear() {
this.myValue = ''
}
},
watch: {
value(newValue) {
|
|
|
104
|
this.myValue = (newValue == null ? '' : newValue)
|
|
|
105
106
|
},
myValue(newValue) {
|
|
|
107
108
109
110
111
|
if(this.triggerChange){
this.$emit('change', newValue)
}else{
this.$emit('input', newValue)
}
|
|
|
112
113
114
115
116
117
118
|
}
}
}
</script>
<style scoped>
</style>
|
