|
|
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
27
28
29
30
31
32
33
34
|
export default {
components: {
Editor
},
props: {
value: {
type: String,
required:false
},
|
|
|
35
36
37
38
39
|
triggerChange:{
type: Boolean,
default: false,
required:false
},
|
|
|
40
41
42
43
44
45
|
disabled: {
type: Boolean,
default: false
},
plugins: {
type: [String, Array],
|
|
|
46
|
default: 'lists image link media table textcolor wordcount contextmenu fullscreen'
|
|
|
47
48
49
|
},
toolbar: {
type: [String, Array],
|
|
|
50
51
|
default: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists link unlink image media table | removeformat | fullscreen',
branding:false
|
|
|
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
}
},
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,
|
|
|
66
|
toolbar_drawer: false,
|
|
|
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
images_upload_handler: (blobInfo, success) => {
const img = 'data:image/jpeg;base64,' + blobInfo.base64()
success(img)
}
},
myValue: this.value
}
},
mounted() {
tinymce.init({})
},
methods: {
onClick(e) {
this.$emit('onClick', e, tinymce)
},
//可以添加一些自己的自定义事件，如清空内容
clear() {
this.myValue = ''
}
},
watch: {
value(newValue) {
|
|
|
90
|
this.myValue = (newValue == null ? '' : newValue)
|
|
|
91
92
|
},
myValue(newValue) {
|
|
|
93
94
95
96
97
|
if(this.triggerChange){
this.$emit('change', newValue)
}else{
this.$emit('input', newValue)
}
|
|
|
98
99
100
101
102
103
104
|
}
}
}
</script>
<style scoped>
</style>
|
