\n```\n#### isPreview\n- Type: `Boolean`\n- Default: `false`\n\n是否是预览模式，开启时可作为一个预览组件使用，与预览组件功能一致。\n\n#### copyCode\n- Type: `Boolean`\n- Default: `true`\n\n是否支持复制代码块内的内容。\n\n#### copyBtnText\n- Type: `String`\n- Default: `复制代码`\n\n复制代码按钮显示文字。\n\n\n### 预览组件基本属性\n#### initialValue\n- Type: `String/Number`\n- Default: `''`\n\n预览组件初始化内容，支持动态更新。\n\n#### theme\n- Type: `String`\n- Default: `light`\n\n代码块主题,与编辑器编辑器代码块主题一致。\n\n#### markedOptions\n- Type: `Object`\n- Default: `{}`\n\nmarked配置项,与编辑器内该配置一致。\n\n#### copyCode\n- Type: `Boolean`\n- Default: `true`\n\n是否支持复制代码块内的内容。\n\n\n#### copyBtnText\n- Type: `String`\n- Default: `复制代码`\n\n复制代码按钮显示文字。\n### on-ready\n编辑器初始化完成时触发，返回值为`Object`，包含组件本身和`insertContent`方法。\n\n#### on-save\n编辑器保存事件，自动保存或者手动保存时触发，支持`ctrl+s`或`command+s`触发保存，返回值类型为`Object`，包含当前输入值`value`和选择的代码块主题`theme`。\n\n\n#### on-paste-image\t\n\n监听编辑器粘贴图片事件，在编辑区域内手动粘贴图片时触发，可用于支持粘贴插入图片文件，返回`file`文件，上传文件后可结合`on-ready`事件内返回的`insertContent`插入图片。\n\n#### on-copy \n复制代码块内容，触发时返回当前代码块的text，copyCode开启时才有效。\n\n## 二次开发\n### 粘贴插入图片\n\n`on-paste-image`虽然可以支持图片粘贴事件的监听，但不会处理图片上传至服务器并将链接插入编辑器这段逻辑。\n\n目前如果想要支持粘贴插入图片，需要在`on-paste-image`方法里上传图片文件，拿到图片地址后，使用`on-ready`方法里返回的insertContent方法插入图片。\n\n上述操作显得过于复杂，可以直接在源码里扩展mixins里的`handlePaste`方法,图片上传完成后，直接调用`this.insertContent`方法插入图片。\n\n修改`/markdown/mixins/common.js`\n\n```js\nhandlePaste(_, e) {// 粘贴图片\n const { clipboardData = {} } = e;\n const { types = [], items } = clipboardData;\n let item = null;\n for (let i = 0; i < types.length; i++) {\n if (types[i] === 'Files') {\n item = items[i];\n break;\n }\n }\n if (item) {\n const file = item.getAsFile();\n if (/image/gi.test(file.type)) {\n e.preventDefault();\n // 1.上传操作\n // 2.插入图片 this.insertContent(``)\n }\n }\n}\n```\n### 支持流程图、甘特图等语法\n\n目前编辑器只支持常见code语法，如果需要实现如流程图等功能，需要进一步扩展，以实现一个简单的流程图为例，具体实现思路如下：\n\n默认情况下，markedjs会使用renderer.code方法对输入的代码块进行解析，并会借助`highlight.js`支持语法高亮。\n可以将流程图语法输入到代码块内，并标明语言，重写marked.Renderer的code解析方法，结合结合`flowchart.js`路程图代码进行解析，返回文本内容。\n\n修改`/markdown/libs/js/simple.js\n\n```js\nimport hljs from './hljs';\nimport index from 'index';\nimport {parse} from 'flowchart.js'\n\nhljs.initHighlightingOnLoad();\n\nconst renderer = new index.Renderer();\nrenderer.code = (code, language) => {\n if (language === 'flow') {// 流程图\n const dom = document.createElement('div');\n const flowchart = parse(code);\n flowchart.drawSVG(dom, {/*相关配置*/});\n return dom.innerHTML;\n } else {// 默认解析\n return `${hljs.highlightAuto(code).value}
`\n }\n}\nexport default index.setOptions({\n renderer,\n gfm: true,\n tables: true,\n breaks: false,\n pedantic: false,\n sanitize: false,\n smartLists: true,\n highlight: function (code) {\n return hljs.highlightAuto(code).value;\n }\n})\n```\n\n### 自定义markdown语法转换\n\n项目内使用的`index.js均为其默认配置功能，如需要特殊转换，可重写其内部的解析方法，即重写其renderer相关方法\n[参考文档](https://github.com/markedjs/marked/blob/master/docs/USING_PRO.md)。\n\n## 自动生成文档目录\n\n预览区域和文档预览组件暂不支持自动生成目录，实现自动生成目录思路目前想到的大致有\n- 重写`renderer.heading` 方法，为生成的标题添加id，输入特定快捷键，如`[TOC]`时，查找预览区域内的的所有标题标签，分析等级关系，生成目录标签\n\n### icon替换\n项目内所有的icon和命名参考`/assets/font/index.html`，替换时需注意，预览区域的checkbox为icon，注意一并替换，\n修改`/assets/css/index.less`内的`input[type=\"checkbox\"]`的`:after`样式。\n\n## 代码体积优化\n\n\n### 公共代码提取\nnpm包构建时，三个组件完全独立，没有抽离公共文件，所以，当同一个项目内引入其中的两个或三个组件都引入时，存在一定的重复代码，\n主要为`highlight.js`、`marked`、`iconfont`、css样式几个部分。\n\n解决方式：将组件复制到本地项目，打包时将这些文件作为公共文件抽离出来。\n\n**注意**:三个组件中使用的iconfont为同一套，如果只是单纯的使用`preview`组件,\n将会引入整个项目所使用的iconfont,可删除iconfont的引入，\n重写`input[type=\"checkbox\"]`的样式，preview组件体积将会减少一半，样式文件位于`markdown/assets/css/index.less`。\n\n### codemirror体积优化\ncodemirror主要分为主文件、mode相关文件和样式文件，主文件体积异常的大，mode文件目前只选用了css/jsvascript/markdown/meta/xml五个文件，\n其中markdown.js和meta.js为必须引用的，项目中已将常见的编程语言代码风格定义为css/js/xml之一，例如less/sass/scss按照css规则解析，html/vue按照xml规则解析。\n优化可从一下方面入手\n- 减少codemirror主文件体积\n- 减少引用的mode依赖\n\n### highlight.js体积优化\n\nhighlight.js原本体积也是较大的，主要原因为，编译时为支持各种代码语言，引入了相应的解析文件，\n项目内已根据常见的代码语言进行了一次筛选，进行按需引入，可根据自身需求，再次对引用文件进行删减\n\n参见`src/markdown/libs/js/hljs.js`,目前支持的语言有\n```js\nimport hljs from 'highlight.js/lib/highlight'\n\nimport javascript from 'highlight.js/lib/languages/javascript'\nimport java from 'highlight.js/lib/languages/java';\nimport css from 'highlight.js/lib/languages/css';\nimport less from 'highlight.js/lib/languages/less';\nimport go from 'highlight.js/lib/languages/go';\nimport markdown from src;\nimport php from 'highlight.js/lib/languages/php';\nimport python from 'highlight.js/lib/languages/python';\nimport ruby from 'highlight.js/lib/languages/ruby';\nimport stylus from 'highlight.js/lib/languages/stylus';\nimport typescript from 'highlight.js/lib/languages/typescript';\nimport xml from 'highlight.js/lib/languages/xml';\n\nconst languages = {\n javascript,\n java,\n css,\n less,\n markdown,\n go,\n php,\n python,\n ruby,\n stylus,\n typescript,\n xml\n}\nObject.keys(languages).forEach(key => {\n hljs.registerLanguage(key, languages[key])\n})\n\nexport default hljs;\n```\n\n### 专业版编辑器codemirror/simple.js\n优化思路：无\n#### iconfont 体积优化\n只需要preview组件时，避免引入所有icon，参考功能扩展里icon替换方法。\n\n## 升级路线\n- 普通版编辑器对选中文本进行操作功能\n- 文档目录功能\n- 优化专业版编辑器体积\n- react版开发\n- ...\n\n## 问题反馈\n\n对于功能上的缺陷、使用方法和希望扩展的功能，可以提 [Issues](https://github.com/zhaoxuhui1122/vue-markdown/issues)。\n\n## license: `MIT`\n","readmeFilename":"README.md","keywords":["markdown编辑器","vue markdown编辑器","vue 编辑器","vue codemirror"],"homepage":"https://github.com/webpack/webpack","repository":{"type":"git","url":"git+https://github.com/zhaoxuhui1122/vue-markdown.git"},"bugs":{"url":"https://github.com/zhaoxuhui1122/vue-markdown/issues"}}