@@ -15,7 +15,7 @@ npm install @wangeditor/editor wangeditor5-for-vue2
1515### 全局注册
1616
1717``` js
18- import { createApp } from ' vue'
18+ import Vue from ' vue'
1919import { WeToolbar , WeEditable , WeEditor } from ' wangeditor5-for-vue2'
2020import ' @wangeditor/editor/dist/css/style.css'
2121
@@ -51,116 +51,78 @@ export default {
5151}
5252```
5353
54- ## 完全示例
54+ ## 示例
5555
5656### WeToolbar + WeEditable
5757
58- ``` html
58+ ``` vue
5959<template>
6060 <div>
61- <we-toolbar :option =" we.toolbar" :reloadbefore =" toolbarReloadbefore"
62- <we-editable
63- :option =" we.editable"
64- :reloadbefore =" editableReloadbefore"
65- :json.sync =" data.json"
66- :html.sync =" data.html"
67- />
61+ <we-toolbar :option="toolbar" />
62+ <we-editable :option="editable" :json.sync="data.json" :html.sync="data.html" />
6863 </div>
6964</template>
7065
7166<script>
7267 import { useWangEditor } from 'wangeditor5-for-vue2'
7368 export default {
7469 data() {
75- return {
76- we : {
77- toolbar : null ,
78- editable : null ,
79- getToolbar : null ,
80- getEditable : null ,
81- clearContent : null ,
82- reloadEditor : null ,
70+ const { toolbar, editable, getToolbar, getEditable, clearContent, reloadEditor } = useWangEditor( {
71+ config : {
72+ placeholder: 'WeToolbar + WeEditable 示例' ,
73+ onCreated: (inst) => {
74+ console.log(inst)
75+ // 使用了箭头函数，因此 this 指向当前组件实例
76+ console.log(this.editable.config.placeholder)
77+ } ,
8378 },
79+ })
80+
81+ return {
82+ toolbar,
83+ editable,
84+ getToolbar,
85+ getEditable,
86+ clearContent,
87+ reloadEditor,
8488 data: {
8589 json: '',
8690 html: '',
8791 },
8892 }
8993 },
90- created () {
91- this .we = useWangEditor ({
92- config: {
93- placeholder: ' WeToolbar + WeEditable 示例'
94- },
95- })
96- },
97- methods: {
98- toolbarReloadbefore (inst ) {
99- console .log (inst)
100- alert (` toolbar 即将重载：${ new Date ().toLocaleString ()} `
101- },
102- editableReloadbefore (inst ) {
103- console .log (inst)
104- alert (` editable 即将重载：${ new Date ().toLocaleString ()} `
105- },
106- },
10794 }
10895</script>
10996```
11097
11198### WeEditor
11299
113- ``` html
100+ ``` vue
114101<template>
115- <we-editor
116- :toolbar-option =" we.toolbar"
117- :editable-option =" we.editable"
118- :json.sync =" data.json"
119- :html.sync =" data.html"
120- />
102+ <we-editor :toolbar-option="toolbar" :editable-option="editable" :json.sync="data.json" :html.sync="data.html" />
121103</template>
122104
123105<script>
124106 import { useWangEditor } from 'wangeditor5-for-vue2'
125107 export default {
126108 data() {
127109 return {
128- we: {
129- toolbar: null ,
130- editable: null ,
131- getToolbar: null ,
132- getEditable: null ,
133- clearContent: null ,
134- reloadEditor: null ,
135- },
136110 data: {
137111 json: '',
138112 html: '',
139113 },
114+ ...useWangEditor({
115+ config: {
116+ placeholder: 'WeEditor 示例',
117+ onCreated: (inst) => {
118+ console.log(inst)
119+ // 使用了箭头函数，因此 this 指向当前组件实例
120+ console.log(this.editable.config.placeholder)
121+ },
122+ },
123+ }),
140124 }
141125 },
142- created () {
143- this .we = useWangEditor ({
144- config: {
145- placeholder: ' WeEditor 示例'
146- },
147- })
148- },
149126 }
150127</script>
151128```
152-
153- #### props
154-
155- | prop | 描述 | 类型 |
156- | :--------------------- | :------------------------------------------------- | :----------------------------- |
157- | ` toolbarOption ` | 菜单栏配置项 | ` Required<WeToolbarOption> ` |
158- | ` toolbarClass ` | 菜单栏的 ` class attribute ` | ` String ` |
159- | ` toolbarStyle ` | 菜单栏的 ` style attribute ` | ` String ` |
160- | ` toolbarReloadbefore ` | 菜单栏重载前的回调函数 | ` (toolbar: Toolbar) => void ` |
161- | ` editableOption ` | 编辑区配置项 | ` Required<WeEditableOption> ` |
162- | ` editableClass ` | 编辑区的 ` class attribute ` | ` String ` |
163- | ` editableStyle ` | 编辑区的 ` style attribute ` | ` String ` |
164- | ` editableReloadbefore ` | 编辑区重载前的回到函数 | ` (editor: IDomEditor) => void ` |
165- | ` json ` | 编辑器内容，支持 ` .sync ` 修饰符 | ` JSON String ` |
166- | ` html ` | 编辑器内容，支持 ` .sync ` 修饰符，优先级低于 ` json ` | ` HTML String ` |
0 commit comments