1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
| <template>
| <div>
| <!-- 使用 fullscreen 类来控制是否全屏显示 -->
| <div :class="{ fullscreen: fullscreen }" class="tinymce-container">
| <!-- 使用 tinymce-textarea 类作为编辑器的文本区域 -->
| <uploadImage @callback="insertImage" v-if="showUpload"/>
| <textarea :id="tinymceId" class="tinymce-textarea" />
| </div>
| </div>
| </template>
| <script>
| import { initEditor } from "@/views/lili-components/editor/config";
|
| import uploadImage from "@/views/lili-components/editor/upload-image.vue";
| export default {
| components:{uploadImage},
| name: "Tinymce",
| props: {
| value: {
| type: String,
| default: "",
| },
| height:{
| type:String,
| default:'500px'
| },showUpload:{
| type:Boolean,
| default:true
| }
| },
| data() {
| return {
| // 引入编辑器的配置
| initEditor,
| hasChange: false, // 标记内容是否有更改
| hasInit: false, // 标记编辑器是否已初始化
| tinymceId:
| "tinymce-" + +new Date() + ((Math.random() * 1000).toFixed(0) + ""), // 生成唯一的编辑器 ID
| fullscreen: false, // 标记编辑器是否处于全屏模式
| toolbar: [], // 工具栏配置
| content: "", // 编辑器内容
| };
| },
| created() {
| this.init();
| },
| watch: {
| value: {
| handler(val) {
| if (!this.hasChange && this.hasInit) {
| // 当内容有更改且编辑器已初始化时，更新编辑器的内容
| this.$nextTick(() =>
| window.tinymce.get(this.tinymceId).setContent(val || "")
| );
| }
| },
| deep: true,
| },
| },
| methods: {
| // 数据返回并给富文本框插入图片
| insertImage(arr){
| arr.forEach(v => window.tinymce.get(this.tinymceId).insertContent(`<img src="${v}" >`))
| },
| init() {
| // 初始化编辑器
| this.initTinymce();
| },
| initTinymce() {
| const _this = this;
| window.tinymce.init({
| selector: `#${this.tinymceId}`,
| convert_urls: false,
| init_instance_callback: (editor) => {
| if (_this.value) {
| // 如果有初始值，则设置编辑器的内容为初始值
| this.$nextTick(() => editor.setContent(_this.value));
| }
| _this.hasInit = true;
| // 监听编辑器内容的变化
| editor.on("NodeChange Change KeyUp SetContent", (event) => {
| if (_this.value) {
| // 内容发生更改
| this.hasChange = true;
| }
| // 通过 input 事件将编辑器的内容传递给父组件
| this.$emit("input", editor.getContent());
| });
| },
| setup(editor) {
| // 监听全屏状态变化
| editor.on("FullscreenStateChanged", (e) => {
| _this.fullscreen = e.state;
| });
| },
| ..._this.initEditor,
|
| height:this.height
| });
| },
| setContent(value) {
| // 设置编辑器的内容
| window.tinymce.get(this.tinymceId).setContent(value);
| },
| getContent() {
| // 获取编辑器的内容
| return window.tinymce.get(this.tinymceId).getContent();
| },
| destroyTinymce() {
| const tinymce = window.tinymce.get(this.tinymceId);
|
| if (tinymce) {
| // 销毁编辑器实例
| tinymce.destroy();
| }
| },
| },
| mounted() {
| this.init();
| },
| activated() {
| if (window.tinymce) {
| this.initTinymce();
| }
| },
| deactivated() {
| this.destroyTinymce();
| },
| destroyed() {
| this.destroyTinymce();
| },
| };
| </script>
|
|
