zhouwx
2 天以前 dfc1da68ecd0ce95e63ae085ff33e084b8f50a5f
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<template>
    <div>
        <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 { upload } from "@/api/backManage/notice";
import "tinymce/themes/silver";
import "tinymce/themes/silver/theme";
import "tinymce/icons/default/icons";
import "tinymce/plugins/image";
import "tinymce/plugins/media";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/link";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/fullscreen";
import "../../../public/tinymce/plugins/upfile/index";
import {getToken} from "@/utils/auth";
// import "tinymce/plugins/upfile";
// import "tinymce/plugins/attachment";
export default {
    components: {
        Editor
    },
    props: {
        // 传入一个value,使组件支持v-model绑定
        value: {
            type: String,
            default: ""
        },
      height: {
        type: Number,
        default: 500
      },
        disabled: {
            type: Boolean,
            default: false
        },
        plugins: {
            type: [String, Array],
            default: "upfile lists image table  wordcount  fullscreen  "
        },
        toolbar: {
            type: [String, Array],
            default: " styleselect fontsizeselect | undo redo |  upfile image  bold italic | fontselect |alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists  insertfile  table | removeformat fullscreen  "
        }
    },
    data() {
        return {
            loading: false,
            // 初始化配置
            init: {
                language_url: "/tinymce/langs/zh_CN.js",
                language: "zh_CN",
                skin_url: "/tinymce/skins/ui/oxide", // skin路径
                content_css: '/tinymce/skins/content/default/content.css',
                height: this.height? this.height : 500, // 编辑器高度
                branding: false, // 是否禁用“Powered by TinyMCE”
                menubar: true, // 顶部菜单栏显示
                plugins: this.plugins,
                toolbar: this.toolbar,
                relative_urls: false,
                remove_script_host: true,
                statusbar: false,
                images_upload_handler: async (blobInfo, success, failure) => {
                    const formData = new FormData(); // 和后端协商后用formData格式进行传参
                    formData.append("file", blobInfo.blob());// 传递的参数
                    formData.append("Authorization", getToken());// token值
                    let res = await upload(formData); // 调取 接口
                    console.log(res);
                    if (res.code == 200) {
 
                        // const path = import.meta.env.VITE_APP_BASE_API + '/' + res.data.path
                        let path = "";
                        if(import.meta.env.VITE_APP_ENV == 'development') {
                            path = import.meta.env.VITE_APP_BASE_API + '/' + res.data.path
                        }else {
                            path = 'http://106.15.95.149:8088/api/' + res.data.path
                        }
 
                        success(path);
                    } else {
                        failure("上传失败");
                    }
                },
                file_callback: async (file, success) => {
                    const formData = new FormData(); // 和后端协商后用formData格式进行传参
                    formData.append("file", file);// 传递的参数
                    formData.append("Authorization", getToken());// token值
                    await upload(formData).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                          // const path = import.meta.env.VITE_APP_BASE_API + '/' + res.data.path
                            let path = "";
                            if(import.meta.env.VITE_APP_ENV == 'development') {
                                path = import.meta.env.VITE_APP_BASE_API + '/' + res.data.path
                            }else {
                                path = 'http://106.15.95.149:8088/api/' + res.data.path
                            }
 
                            success(path,res.data);
                        } else {
                            console.log("上传失败");
                        }
                    }).catch(err => {
                        success('失败');
                              console.log('err',err)
                    })
                }
            },
            myValue: this.value,
 
 
 
        };
    },
    mounted() {
        tinymce.init({
        });
    },
    methods: {
        // 添加相关的事件,可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
        // 需要什么事件可以自己增加
        onClick(e) {
            this.$emit("onClick", e, tinymce);
        },
        // 可以添加一些自己的自定义事件,如清空内容
        clear() {
 
            this.myValue = "";
        },
    },
    watch: {
        value(newValue) {
            this.myValue = newValue;
        },
        myValue(newValue) {
            this.$emit("input", newValue);
        }
    }
};
</script>