Vue 中使用 editor.md 编辑器 - 刘万林的博客

　　在设计博客过程中有考虑过文章编辑器的选择，是选择富文本编辑器还是使用 markdown 编辑器。因为 markdown 在日常中使用的比较多，写技术相关笔记的话还是比较方便，故最终选择使用 markdown 编辑器。
　　通过一番搜索最终发现 editor.md 功能比较强大。下面是 Vue 使用 editor.md 编辑器的过程。

下载编辑器

Github download，下载该项目放入 ./static 目录中。

使用前工作

其中我把 jquery.min.js 移动到了 ./static/editor.md 目录中。
因为编辑器自带的代码高亮太简洁了，所以自己搜索下载了代码高亮 css 文件。放入到了 ./static/editor.md/css/google_code_prettify_themes/ 目录中。代码高亮 css 库可以搜索 google code prettify themes 关键字查找。例如：这个感觉够用了。也可以自己去修改 css 配置相应的高亮规则。

使用

我是把该编辑器继续用 Vue 封装了个组件

组件：markdown-editor.vue

  1. <template>
  2. <div class="markdown-editor-box">
  3. <link rel="stylesheet" href="/static/editor.md/css/editormd.min.css">
  4. <link rel="stylesheet" :href="'/static/editor.md/css/google_code_prettify_themes/' + codeTheme">
  5. <div :id="editorId"></div>
  6. </div>
  7. </template>
  8. <script>
  9. import scriptjs from 'scriptjs';
  10. import { defaultConfig, codeThemes } from '../../config/editor.md';
  11. export default {
  12. props: {
  13. editorId: {
  14. 'type': String,
  15. 'default': 'markdown-editor',
  16. },
  17. onchange: { // 内容改变时回调，返回（html, markdown, text）
  18. type: Function
  19. },
  20. config: { // 编辑器配置
  21. type: Object
  22. },
  23. codeTheme: { // 代码高亮主题
  24. 'type': String,
  25. 'default': 'vibrant-ink.min.css'
  26. },
  27. initData: {
  28. 'type': String
  29. },
  30. initDataDelay: {
  31. 'type': Number, // 延迟初始化数据时间，单位毫秒
  32. 'default': 0
  33. }
  34. },
  35. data: function() {
  36. return {
  37. editor: null,
  38. codeThemes,
  39. editorLoaded: false,
  40. };
  41. },
  42. methods: {
  43. fetchScript: function(url) {
  44. return new Promise((resolve) => {
  45. scriptjs(url, () => {
  46. resolve();
  47. });
  48. });
  49. },
  50. getConfig: function () {
  51. return {...defaultConfig, ...this.config };
  52. },
  53. initEditor: function () {
  54. (async () => {
  55. await this.fetchScript('/static/editor.md/jquery.min.js');
  56. await this.fetchScript('/static/editor.md/editormd.min.js');
  57. // await this.fetchScript('/static/editor.md/editormd.js');
  58. this.$nextTick(() => {
  59. let editor = window.editormd(this.editorId, this.getConfig());
  60. editor.on('load', () => {
  61. setTimeout(() => { // hack bug: 一个页面多个编辑器只能初始化其中一个数据问题
  62. this.editorLoaded = true;
  63. this.initData && editor.setMarkdown(this.initData);
  64. }, this.initDataDelay);
  65. });
  66. this.onchange && editor.on('change', () => {
  67. let html = editor.getPreviewedHTML();
  68. this.onchange({
  69. markdown: editor.getMarkdown(),
  70. html: html,
  71. text: window.$(html).text()
  72. });
  73. });
  74. this.editor = editor;
  75. });
  76. })();
  77. }
  78. },
  79. mounted: function() {
  80. this.initEditor();
  81. },
  82. watch: {
  83. 'initData': function (newVal) {
  84. if(newVal) {
  85. this.editorLoaded && this.editor.setMarkdown(newVal);
  86. }
  87. }
  88. }
  89. }
  90. </script>

配置文件：config/editor.md.js

  1. const defaultConfig = {
  2. width: "100%",
  3. height: 600,
  4. path: '/static/editor.md/lib/',
  5. // theme: "dark",
  6. // previewTheme: "dark",
  7. // editorTheme: "pastel-on-dark",
  8. // markdown: "默认填充内容", // 默认填充内容
  9. lineWrapping: true, // 编辑框不换行
  10. codeFold: true, // 代码折叠
  11. placeholder: '请输入...',
  12. syncScrolling: true,
  13. saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
  14. searchReplace: true,
  15. watch: true, // 实时预览
  16. // htmlDecode: "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
  17. toolbar: true, //工具栏
  18. previewCodeHighlight: true, // 预览 HTML 的代码块高亮，默认开启
  19. emoji: true,
  20. taskList: true,
  21. tocm: true, // Using [TOCM]
  22. tex: true, // 开启科学公式TeX语言支持，默认关闭
  23. flowChart: true, // 开启流程图支持，默认关闭
  24. sequenceDiagram: true, // 开启时序/序列图支持，默认关闭,
  25. // dialogLockScreen: false, // 设置弹出层对话框不锁屏，全局通用，默认为true
  26. // dialogShowMask: false, // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
  27. // dialogDraggable: false, // 设置弹出层对话框不可拖动，全局通用，默认为true
  28. // dialogMaskOpacity: 0.4, // 设置透明遮罩层的透明度，全局通用，默认值为0.1
  29. // dialogMaskBgColor: "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
  30. // imageUpload: false,
  31. // imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
  32. // imageUploadURL: "./php/upload.php",
  33. // onload: function() {
  34. // // this.fullscreen();
  35. // // this.unwatch();
  36. // // this.watch().fullscreen();
  37. // // this.setMarkdown("#PHP");
  38. // // this.width("100%");
  39. // // this.height(480);
  40. // // this.resize("100%", 640);
  41. // },
  42. };
  43. const codeThemes = [
  44. {
  45. label: 'monokai',
  46. value: 'monokai.min.css',
  47. },
  48. {
  49. label: 'atelier-cave-dark',
  50. value: 'atelier-cave-dark.min.css',
  51. },
  52. {
  53. label: 'atelier-cave-light',
  54. value: 'atelier-cave-light.min.css',
  55. },
  56. {
  57. label: 'atelier-dune-dark',
  58. value: 'atelier-dune-dark.min.css',
  59. },
  60. {
  61. label: 'atelier-dune-light',
  62. value: 'atelier-dune-light.min.css',
  63. },
  64. {
  65. label: 'atelier-estuary-dark',
  66. value: 'atelier-estuary-dark.min.css',
  67. },
  68. {
  69. label: 'atelier-estuary-light',
  70. value: 'atelier-estuary-light.min.css',
  71. },
  72. {
  73. label: 'atelier-forest-dark',
  74. value: 'atelier-forest-dark.min.css',
  75. },
  76. {
  77. label: 'atelier-forest-light',
  78. value: 'atelier-forest-light.min.css',
  79. },
  80. {
  81. label: 'atelier-heath-dark',
  82. value: 'atelier-heath-dark.min.css',
  83. },
  84. {
  85. label: 'atelier-heath-light',
  86. value: 'atelier-heath-light.min.css',
  87. },
  88. {
  89. label: 'atelier-lakeside-dark',
  90. value: 'atelier-lakeside-dark.min.css',
  91. },
  92. {
  93. label: 'atelier-lakeside-light',
  94. value: 'atelier-lakeside-light.min.css',
  95. },
  96. {
  97. label: 'atelier-plateau-dark',
  98. value: 'atelier-plateau-dark.min.css',
  99. },
  100. {
  101. label: 'atelier-plateau-light',
  102. value: 'atelier-plateau-light.min.css',
  103. },
  104. {
  105. label: 'atelier-savanna-dark',
  106. value: 'atelier-savanna-dark.min.css',
  107. },
  108. {
  109. label: 'atelier-savanna-light',
  110. value: 'atelier-savanna-light.min.css',
  111. },
  112. {
  113. label: 'atelier-seaside-dark',
  114. value: 'atelier-seaside-dark.min.css',
  115. },
  116. {
  117. label: 'atelier-seaside-light',
  118. value: 'atelier-seaside-light.min.css',
  119. },
  120. {
  121. label: 'atelier-sulphurpool-dark',
  122. value: 'atelier-sulphurpool-dark.min.css',
  123. },
  124. {
  125. label: 'atelier-sulphurpool-light',
  126. value: 'atelier-sulphurpool-light.min.css',
  127. },
  128. {
  129. label: 'github',
  130. value: 'github.min.css',
  131. },
  132. {
  133. label: 'github-v2',
  134. value: 'github-v2.min.css',
  135. },
  136. {
  137. label: 'hemisu-dark',
  138. value: 'hemisu-dark.min.css',
  139. },
  140. {
  141. label: 'hemisu-light',
  142. value: 'hemisu-light.min.css',
  143. },
  144. {
  145. label: 'tomorrow',
  146. value: 'tomorrow.min.css',
  147. },
  148. {
  149. label: 'tomorrow-night',
  150. value: 'tomorrow-night.min.css',
  151. },
  152. {
  153. label: 'tomorrow-night-blue',
  154. value: 'tomorrow-night-blue.min.css',
  155. },
  156. {
  157. label: 'tomorrow-night-bright',
  158. value: 'tomorrow-night-bright.min.css',
  159. },
  160. {
  161. label: 'tomorrow-night-eighties',
  162. value: 'tomorrow-night-eighties.min.css',
  163. },
  164. {
  165. label: 'tranquil-heart',
  166. value: 'tranquil-heart.min.css',
  167. },
  168. {
  169. label: 'vibrant-ink',
  170. value: 'vibrant-ink.min.css',
  171. },
  172. ];
  173. export {
  174. defaultConfig,
  175. codeThemes,
  176. };

遇到的问题

  1. 重复加载脚本和样式。
  2. 一个页面多个编辑器配置混乱。
  3. 一个页面多个编辑器只能初始化其中一个数据问题。
  4. 一个页面多个编辑器，其中高宽不同。然后其中一个全屏操作，然后改变浏览器大小。然后关闭全屏。这时出现编辑器大小全部变成一样了。（未解决）

问题 1，2 解决记录：Commits Log。
问题 3 解决方案：多个编辑器 setMarkdown 操作隔开一段时间即可。

原网址: 访问
创建于: 2021-06-20 14:52:14
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论