@@ -156,6 +156,76 @@ export default defineComponent({
156156
157157:::
158158
159+ ### 配置图片文件上传
160+
161+ :::demo 设置imageUploadToServer后，编辑器对粘贴操作也将进行监听，若有图片也将触发imageUpload事件。
162+
163+ ``` vue
164+ <template>
165+ <d-editor-md
166+ v-model="content"
167+ :image-upload-to-server="true"
168+ @content-change="valueChange"
169+ @image-upload="imageUpload"
170+ ></d-editor-md>
171+ </template>
172+
173+ <script>
174+ import { defineComponent, reactive, ref } from 'vue';
175+
176+ export default defineComponent({
177+ setup() {
178+ const content = ref('`Not use ngModel`');
179+
180+ const valueChange = (val) => {
181+ console.log(val);
182+ };
183+
184+ const imageUpload = ({file, callback}) => {
185+ let message;
186+ const rFilter = /^(image\/bmp|image\/gif|image\/jpge|image\/jpeg|image\/jpg|image\/png|image\/tiff)$/i;
187+ if (!rFilter.test(file.type)) {
188+ console.log(rFilter, file.type);
189+ message = 'Please choose bmp/jpg/jpge/png/gif/tiff type picture to upload';
190+ } else if (file.size / (1024 * 1024) > 1) {
191+ message = 'Please choose a picture smaller than 1M to upload';
192+ }
193+
194+ if (message) {
195+ // throw the error message by yourself
196+ return false;
197+ } else {
198+ new Promise((resolve) => {
199+ const xhr = new XMLHttpRequest();
200+ xhr.open('POST', 'https://xxx.xxx.com/v1/xxx');
201+ xhr.setRequestHeader('yourKey', 'yourValue');
202+
203+ xhr.addEventListener('load', (evt) => {
204+ const result = JSON.parse(xhr.responseText);
205+ resolve(result);
206+ }, false);
207+
208+ const fd = new FormData();
209+ fd.append('file', file);
210+ xhr.send(fd);
211+ }).then((res: any) => {
212+ if (res.status === 'success') {
213+ callback({ name: file.name, imgUrl: res['imgUrl'], title: res['imgTitle'] });
214+ } else {
215+ // throw your error message
216+ }
217+ });
218+ }
219+ }
220+
221+ return { content, valueChange, imageUpload };
222+ },
223+ });
224+ </script>
225+ ```
226+
227+ :::
228+
159229### EditorMd 参数
160230
161231| 参数名 | 类型 | 默认值 | 说明 |
@@ -170,6 +240,7 @@ export default defineComponent({
170240| custom-xss-rules | [ ICustomXssRule[ ]] ( #icustomxssrule ) | [ ] | 自定义 xss 对某种 tag 的过滤方式，每条规则需要指定 tag, 并给出需要加入白名单的属性数组 |
171241| placeholder | ` string ` | '' | 编辑器无内容是的提示信息 |
172242| fullscreen-z-index | ` number ` | 10 | 编辑器全屏状态的 z-index |
243+ | image-upload-to-server| ` boolean ` | false | 是否打开图片自定义上传开关（打开后将将监听图片的复制，toolbar图片功能上传，传出事件回调） |
173244
174245### EditorMd 事件
175246
@@ -178,7 +249,7 @@ export default defineComponent({
178249| after-editor-init | ` Function(instance: object) ` | 编辑器初始化事件，返回编辑器对象 | |
179250| content-change | ` Function(content: string) ` | 编辑器内容改变事件，返回当前内容 | |
180251| preview-content-change | ` Function() ` | 预览内容改变时触发 | |
181-
252+ | image-upload | ` Function({file, callback}) ` | 打开图片上传开关后，图片上传事件回调，返回文件内容与callback函数 | |
182253### MdRender 参数
183254
184255| 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo |
0 commit comments