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
| <template>
| <div class="editor-div">
| <Editor v-model="editorValueHtml" :mode="editorMode" :defaultConfig="editorConfig" />
| </div>
| </template>
|
| <script>
| import { getCurrentInstance, onBeforeUnmount, onMounted, reactive, toRefs, shallowRef, ref } from "vue";
| import '@wangeditor/editor/dist/css/style.css';
| import { Editor } from '@wangeditor/editor-for-vue';
|
| export default {
| name: "wangEditorExt",
| components: { Editor },
| props: {
| content: "",
| },
| setup(props) {
| let { proxy } = getCurrentInstance();
| const state = reactive({});
|
| const editorRef = shallowRef();
|
| const editorValueHtml = shallowRef(props.content);
| const editorMode = shallowRef('default');// 或 'simple',
| const editorConfig = {
| readOnly: true,
| scroll: false
| };
|
| onMounted(() => {
| Init();
| });
| onBeforeUnmount(() => {
| const editor = editorRef.value
| if (editor != null)
| editor.destroy()
| });
|
|
| const Init = () => {
| console.log(props.content,77899)
| };
|
| return {
| ...toRefs(state),
| editorRef,
| editorMode,
| editorValueHtml,
| props,
| editorConfig
| }
| },
| }
| </script>
|
| <style scoped lang="scss">
| .editor-div {
| overflow: auto;
| ::v-deep .w-e-text-container {
| overflow: auto;
| padding: 0px;
| }
|
| ::v-deep .w-e-scroll {
| overflow: hidden;
| }
| }
| </style>
|
|
