From afc7d9d0b5d5414f73c69e5f27998c75bda3af0b Mon Sep 17 00:00:00 2001 From: HerbertHe Date: Tue, 25 May 2021 20:56:38 +0800 Subject: [PATCH] docs :pencil: : Support Svelte --- README.md | 65 +++++++++++++++++++++++++------------------------ README_en_US.md | 61 +++++++++++++++++++++++----------------------- 2 files changed, 64 insertions(+), 62 deletions(-) diff --git a/README.md b/README.md index 972459e46..846cde7fa 100644 --- a/README.md +++ b/README.md @@ -11,9 +11,9 @@


- - - + + +

@@ -23,7 +23,7 @@ ## 💡 简介 -[Vditor](https://b3log.org/vditor) 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供[桌面版](https://b3log.org/siyuan)。 +[Vditor](https://b3log.org/vditor) 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular、Svelte，提供[桌面版](https://b3log.org/siyuan)。 欢迎到 [Vditor 官方讨论区](https://ld246.com/tag/vditor)了解更多。同时也欢迎关注 B3log 开源社区微信公众号 `B3log开源`： @@ -153,6 +153,7 @@ const vditor = new Vditor(id, {options...}) * [官方示例](https://b3log.org/vditor/demo/index.html) / [示例源码](https://github.com/Vanessa219/b3log-index/tree/master/src/vditor) * [CommonJS Editor](https://github.com/Vanessa219/vditor/blob/master/demo/index.js) * [CommonJS Render](https://github.com/Vanessa219/vditor/blob/master/demo/render.js) +* [在Svelte中使用](https://github.com/HerbertHe/svelte-vditor-demo) ### 主题 @@ -378,35 +379,35 @@ interface IHintExtend { * 文件上传的数据结构如下。后端返回的数据结构不一致时，可使用 `format` 进行转换。 ```js -// POST data -xhr.send(formData); // formData = FormData.append("file[]", File) -// return data -{ - "msg": "", - "code": 0, - "data": { - "errFiles": ['filename', 'filename2'], - "succMap": { - "filename3": "filepath3", - "filename3": "filepath3" - } - } +// POST data +xhr.send(formData); // formData = FormData.append("file[]", File) +// return data +{ + "msg": "", + "code": 0, + "data": { + "errFiles": ['filename', 'filename2'], + "succMap": { + "filename3": "filepath3", + "filename3": "filepath3" + } + } } ``` * 为了防止站外图片失效， `linkToImgUrl` 可将剪贴板中的站外图片地址传到服务器端进行保存处理，其数据结构如下： ```js -// POST data -xhr.send(JSON.stringify({url: src})); // src 为站外图片地址 -// return data -{ - msg: '', - code: 0, - data : { - originalURL: '', - url: '' - } +// POST data +xhr.send(JSON.stringify({url: src})); // src 为站外图片地址 +// return data +{ + msg: '', + code: 0, + data : { + originalURL: '', + url: '' + } } ``` @@ -524,7 +525,7 @@ Vditor.mermaidRender(document) ``` ```js -import VditorPreview from 'vditor/dist/method.min' +import VditorPreview from 'vditor/dist/method.min' VditorPreview.mermaidRender(document) ``` @@ -536,10 +537,10 @@ markdown: string, // 需要渲染的 markdown 原文 options?: IPreviewOptions { mode: "dark" | "light"; anchor?: number; // 为标题添加锚点 0：不渲染；1：渲染于标题前；2：渲染于标题后，默认 0 - customEmoji?: { [key: string]: string }; // 自定义 emoji，默认为 {} - lang?: (keyof II18nLang); // 语言，默认为 'zh_CN' - emojiPath?: string; // 表情图片路径 - hljs?: IHljs; // 参见 options.preview.hljs + customEmoji?: { [key: string]: string }; // 自定义 emoji，默认为 {} + lang?: (keyof II18nLang); // 语言，默认为 'zh_CN' + emojiPath?: string; // 表情图片路径 + hljs?: IHljs; // 参见 options.preview.hljs speech?: { // 对选中后的内容进行阅读 enable?: boolean, }; diff --git a/README_en_US.md b/README_en_US.md index 506905bf4..7ad565347 100644 --- a/README_en_US.md +++ b/README_en_US.md @@ -11,9 +11,9 @@ Easy-to-use Markdown editor, born to adapt to different application scenarios


- - - + + +

@@ -23,7 +23,7 @@ Easy-to-use Markdown editor, born to adapt to different application scenarios ## 💡 Introduction -[Vditor](https://b3log.org/vditor) is a browser-side Markdown editor, implemented using TypeScript. Support native JavaScript, Vue, React and Angular, provide [desktop](https://b3log.org/siyuan). +[Vditor](https://b3log.org/vditor) is a browser-side Markdown editor, implemented using TypeScript. Support native JavaScript, Vue, React, Angular and Svelte, provide [desktop](https://b3log.org/siyuan). Welcome to [Vditor Official Site](https://b3log.org/vditor) to learn more. @@ -151,6 +151,7 @@ const vditor = new Vditor(id, {options...}) * [Demo](https://b3log.org/vditor/demo/index.html) * [CommonJS Editor](https://github.com/Vanessa219/vditor/blob/master/demo/index.js) * [CommonJS Render](https://github.com/Vanessa219/vditor/blob/master/demo/render.js) +* [Use in Svelte](https://github.com/HerbertHe/svelte-vditor-demo) ### Themes @@ -354,35 +355,35 @@ interface IHintExtend { * The data structure of the file upload is as follows. When the data structure returned by the backend is inconsistent, you can use `format` for conversion. ```js -// POST data -xhr.send(formData); // formData = FormData.append("file[]", File) -// return data -{ - "msg": "", - "code": 0, - "data": { - "errFiles": ['filename', 'filename2'], - "succMap": { - "filename3": "filepath3", - "filename3": "filepath3" - } - } +// POST data +xhr.send(formData); // formData = FormData.append("file[]", File) +// return data +{ + "msg": "", + "code": 0, + "data": { + "errFiles": ['filename', 'filename2'], + "succMap": { + "filename3": "filepath3", + "filename3": "filepath3" + } + } } ``` * In order to prevent the off-site pictures from being invalid, `linkToImgUrl` can transfer the off-site picture addresses in the clipboard to the server for saving and processing. The data structure is as follows: ```js -// POST data +// POST data xhr.send(JSON.stringify({url: src})); // src is the address of the image outside the station -// return data -{ - msg: '', - code: 0, - data : { - originalURL: '', - url: '' - } +// return data +{ + msg: '', + code: 0, + data : { + originalURL: '', + url: '' + } } ``` @@ -478,7 +479,7 @@ Vditor.mermaidRender(document) ``` ```js -import VditorPreview from 'vditor/dist/method.min' +import VditorPreview from 'vditor/dist/method.min' VditorPreview.mermaidRender(document) ``` @@ -491,9 +492,9 @@ options?: IPreviewOptions { mode: "dark" | "light"; anchor?: number; // 0: no render, 1: render left, 2: render right customEmoji?: { [key: string]: string }; // Custom emoji, default is {} - lang?: (keyof II18nLang); // Language, default is 'zh_CN' - emojiPath?: string; // Emoji picture path - hljs?: IHljs; // Refer to options.preview.hljs + lang?: (keyof II18nLang); // Language, default is 'zh_CN' + emojiPath?: string; // Emoji picture path + hljs?: IHljs; // Refer to options.preview.hljs speech?: { // Read the selected content enable?: boolean, };