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
| <template>
| <div class="editor_index">
| <Toolbar
| class="editor_header"
| :editor="editor"
| :defaultConfig="toolbarConfig"
| :mode="mode"
| />
| <Editor
| class="editor_content"
| v-model="html"
| :defaultConfig="editorConfig"
| :mode="mode"
| @onCreated="onCreated"
| @onChange="onChange"
| />
| </div>
| </template>
| <script>
| import Vue from 'vue'
| import {Editor,Toolbar} from '@wangeditor/editor-for-vue'
| export default Vue.extend({
| components:{Editor,Toolbar},
| props:{
| editorShow:{
| type:String,
| default:""
| }
| },
| data(){
| return{
| editor: null,
| html: '',
| toolbarConfig: { },
| editorConfig: {
| autoFocus:false,
| placeholder: '请输入公告内容...' ,
| withCredentials:true,
| MENU_CONF:{
| //图片上传
| uploadImage:{
| fieldName:'file',
| maxFileSize: 6 * 1024 * 1024, //
| maxNumberOfFiles: 200,
| server:`/api/file/file/upload`,
| customInsert:(res,insertFn)=>{
| insertFn(`https://pipe.thhy-tj.com/${res.data}`)
| }
| // headers:{
| // token:sessionStorage.getItem('token')
| // }
| }
| }
| },
| mode: 'default', // or 'simple'或default
| }
| },
| mounted() {
| },
| watch:{
| editorShow:{
| handler(val){
| this.$nextTick(() => {
| this.html = val
| })
| },
| deep: true,
| immediate: true
| },
| html(value) {
| this.$emit('update:editorShow', value);
| }
| },
| methods:{
| onCreated(editor) {
| this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
| },
| onChange(editor){
| // this.$emit('editorCreate',editor.getHtml())
| this.$emit('editorCreate',editor)
| },
| },
| beforeDestroy() {
| const editor = this.editor
| if (editor == null) return
| editor.destroy() // 组件销毁时，及时销毁编辑器
| }
| })
| </script>
| <style scoped lang="scss">
| .editor_index{
| margin-top: 15px;
| border: 1px solid #1B428F;
|
| .editor_header{
| border-bottom: 1px solid #ccc
| }
|
| .editor_content{
| height: 300px;
| overflow-y: hidden;
|
| /deep/.w-e-text-container{
| background-color: #fff;
| color: #000;
| }
| }
| }
| </style>
| <style src="@wangeditor/editor/dist/css/style.css"></style>
|
|
