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
| <template>
| <div>
| <!-- 使用 fullscreen 类来控制是否全屏显示 -->
| <div :class="{ fullscreen: fullscreen }" class="tinymce-container">
| <!-- 使用 tinymce-textarea 类作为编辑器的文本区域 -->
| <uploadImage @callback="insertImage" />
| <textarea :id="tinymceId" class="tinymce-textarea" />
| </div>
| </div>
| </template>
| <script>
| import { initEditor } from "@/components/editor/config";
| import uploadImage from "@/components/editor/upload-image.vue";
| export default {
| components:{uploadImage},
| name: "Tinymce",
| props: {
| value: {
| type: String,
| default: "",
| },
| height:{
| type:String,
| default:'500px'
| }
| },
| 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>
|
|
