@@ -80,10 +80,14 @@ app.use(InstallCodemirro, { componentName: "customName" }); // [!code ++]
80
80
81
81
:::
82
82
83
- ---
84
-
85
83
## Use in components
86
84
85
+ This is a commonly used javascript language case.
86
+
87
+ <component v-if =" dynamicComponent " :is =" dynamicComponent " ></component >
88
+
89
+ Specific code is as follows:
90
+
87
91
::: code-group
88
92
89
93
``` vue [index.vue]
@@ -92,41 +96,77 @@ app.use(InstallCodemirro, { componentName: "customName" }); // [!code ++]
92
96
v-model:value="code"
93
97
:options="cmOptions"
94
98
border
95
- placeholder="test placeholder"
96
- :height="200"
99
+ ref="cmRef"
100
+ height="400"
101
+ width="600"
97
102
@change="onChange"
98
- />
103
+ @input="onInput"
104
+ @ready="onReady"
105
+ >
106
+ </Codemirror>
99
107
</template>
100
-
101
108
<script>
102
- import Codemirror from "codemirror-editor-vue3";
103
-
104
- // placeholder
105
- import "codemirror/addon/display/placeholder.js";
106
- // language
107
- import "codemirror/mode/javascript/javascript.js";
108
-
109
- import { ref } from "vue";
109
+ import { ref, onMounted, onUnmounted } from 'vue'
110
+ import 'codemirror/mode/javascript/javascript.js'
111
+ import Codemirror from 'codemirror-editor-vue3'
110
112
export default {
111
113
components: { Codemirror },
112
114
setup() {
113
- const code = ref(`var i = 0;
115
+ const code = ref(
116
+ `var i = 0;
114
117
for (; i < 9; i++) {
115
118
console.log(i);
116
119
// more statements
117
- };`);
120
+ }
121
+ `)
122
+
123
+ const cmRef = ref()
124
+ const cmOptions = {
125
+ mode: 'text/javascript'
126
+ }
127
+ const onChange = (val, cm) => {
128
+ console.log(val)
129
+ console.log(cm.getValue())
130
+ }
131
+
132
+ const onInput = (val) => {
133
+ console.log(val)
134
+ }
135
+
136
+ const onReady = (cm) => {
137
+ console.log(cm.focus())
138
+ }
139
+
140
+ onMounted(() => {
141
+ setTimeout(() => {
142
+ cmRef.value?.refresh()
143
+ }, 1000)
144
+
145
+ setTimeout(() => {
146
+ cmRef.value?.resize(300, 200)
147
+ }, 2000)
148
+
149
+ setTimeout(() => {
150
+ cmRef.value?.cminstance.isClean()
151
+ }, 3000)
152
+ })
153
+
154
+ onUnmounted(() => {
155
+ cmRef.value?.destroy()
156
+ })
118
157
119
158
return {
120
159
code,
121
- cmOptions: {
122
- mode: "text/javascript", // language mode
123
- theme: "default", // theme
124
- } ,
125
- onChange(val, cm) {},
126
- };
127
- },
128
- };
160
+ cmRef,
161
+ cmOptions,
162
+ onChange,
163
+ onInput ,
164
+ onReady
165
+ }
166
+ }
167
+ }
129
168
</script>
169
+
130
170
```
131
171
132
172
``` vue [index.vue(ts setup)]
@@ -135,45 +175,71 @@ for (; i < 9; i++) {
135
175
v-model:value="code"
136
176
:options="cmOptions"
137
177
border
138
- placeholder="测试 placeholder"
139
- :height="200"
178
+ ref="cmRef"
179
+ height="400"
180
+ width="600"
140
181
@change="onChange"
141
- />
182
+ @input="onInput"
183
+ @ready="onReady"
184
+ >
185
+ </Codemirror>
142
186
</template>
143
-
144
- <script setup lang="ts">
187
+ <script lang="ts" setup>
188
+ import { ref, onMounted, onUnmounted } from "vue";
189
+ import "codemirror/mode/javascript/javascript.js";
145
190
import Codemirror from "codemirror-editor-vue3";
191
+ import type { CmComponentRef } from "codemirror-editor-vue3"
146
192
import type { Editor, EditorConfiguration } from "codemirror";
147
193
148
- // placeholder
149
- import "codemirror/addon/display/placeholder.js";
150
- // language
151
- import "codemirror/mode/javascript/javascript.js";
152
-
153
- import { ref } from "vue";
154
- const code = ref(`var i = 0;
194
+ const code = ref(
195
+ `var i = 0;
155
196
for (; i < 9; i++) {
156
197
console.log(i);
157
198
// more statements
158
- };`);
159
-
199
+ }
200
+ `);
201
+ const cmRef = ref<CmComponentRef>()
160
202
const cmOptions: EditorConfiguration = {
161
- mode: "text/javascript", // language mode
162
- theme: "default", // theme
203
+ mode: "text/javascript",
163
204
};
164
205
165
206
const onChange = (val: string, cm: Editor) => {
166
207
console.log(val);
167
208
console.log(cm.getValue());
168
209
};
210
+
211
+ const onInput = (val: string) => {
212
+ console.log(val);
213
+ };
214
+
215
+ const onReady = (cm: Editor) => {
216
+ console.log(cm.focus());
217
+ };
218
+
219
+ onMounted(() => {
220
+ setTimeout(() => {
221
+ cmRef.value?.refresh()
222
+ }, 1000);
223
+
224
+ setTimeout(() => {
225
+ cmRef.value?.resize(300,200)
226
+ }, 2000);
227
+
228
+ setTimeout(() => {
229
+ cmRef.value?.cminstance.isClean()
230
+ }, 3000);
231
+ })
232
+
233
+ onUnmounted(() => {
234
+ cmRef.value?.destroy()
235
+ })
169
236
</script>
237
+
238
+
170
239
```
171
240
172
241
:::
173
242
174
- Example:
175
-
176
- <component v-if =" dynamicComponent " :is =" dynamicComponent " ></component >
177
243
178
244
<script >
179
245
import {shallowRef } from " vue"
0 commit comments