x-mavon-editor 0.0.1

package/src/lib/mixins/markdown.js

@@ -0,0 +1,156 @@
+import hljsLangs from '../core/hljs/lang.hljs.js'
+import {
+    loadScript
+} from '../core/extra-function.js'
+import sanitizer from '../core/sanitizer.js'
+
+var markdown_config = {
+    html: true,        // Enable HTML tags in source
+    xhtmlOut: true,        // Use '/' to close single tags (<br />).
+    breaks: true,        // Convert '\n' in paragraphs into <br>
+    langPrefix: 'lang-',  // CSS language prefix for fenced blocks. Can be
+    linkify: false,        // 自动识别url
+    typographer: true,
+    quotes: '“”‘’'
+}
+
+var MarkdownIt = require('markdown-it');
+// 表情
+var emoji = require('markdown-it-emoji');
+// 下标
+var sub = require('markdown-it-sub')
+// 上标
+var sup = require('markdown-it-sup')
+// <dl/>
+var deflist = require('markdown-it-deflist')
+// <abbr/>
+var abbr = require('markdown-it-abbr')
+// footnote
+var footnote = require('markdown-it-footnote')
+// insert 带有下划线 样式 ++ ++
+var insert = require('markdown-it-ins')
+// mark
+var mark = require('markdown-it-mark')
+// taskLists
+var taskLists = require('markdown-it-task-lists')
+// container
+var container = require('markdown-it-container')
+//
+var toc = require('markdown-it-toc')
+
+var mihe = require('markdown-it-highlightjs-external');
+
+var gridtable = require('markdown-it-gridtables');
+// math katex
+var katex = require('markdown-it-katex-external');
+var miip = require('markdown-it-images-preview');
+var missLangs = {};
+var needLangs = [];
+var hljs_opts = {
+    hljs: 'auto',
+    highlighted: true,
+    langCheck: function (lang) {
+        if (lang && hljsLangs[lang] && !missLangs[lang]) {
+            missLangs[lang] = 1;
+            needLangs.push(hljsLangs[lang])
+        }
+    }
+};
+
+export function initMarkdown() {
+    const markdown = new MarkdownIt(markdown_config);
+
+    // add target="_blank" to all link
+    var defaultRender = markdown.renderer.rules.link_open || function (tokens, idx, options, env, self) {
+        return self.renderToken(tokens, idx, options);
+    };
+    markdown.renderer.rules.link_open = function (tokens, idx, options, env, self) {
+        var hIndex = tokens[idx].attrIndex('href');
+        if (tokens[idx].attrs[hIndex][1].startsWith('#')) return defaultRender(tokens, idx, options, env, self);
+        // If you are sure other plugins can't add `target` - drop check below
+        var aIndex = tokens[idx].attrIndex('target');
+
+        if (aIndex < 0) {
+            tokens[idx].attrPush(['target', '_blank']); // add new attribute
+        } else {
+            tokens[idx].attrs[aIndex][1] = '_blank';    // replace value of existing attr
+        }
+
+        // pass token to default renderer.
+        return defaultRender(tokens, idx, options, env, self);
+    };
+
+    markdown.use(mihe, hljs_opts)
+        .use(emoji)
+        .use(sup)
+        .use(sub)
+        .use(container)
+        .use(container, 'hljs-left') /* align left */
+        .use(container, 'hljs-center')/* align center */
+        .use(container, 'hljs-right')/* align right */
+        .use(deflist)
+        .use(abbr)
+        .use(footnote)
+        .use(insert)
+        .use(mark)
+        .use(container)
+        .use(miip)
+        .use(katex)
+        .use(taskLists)
+        .use(toc)
+        .use(gridtable)
+    return markdown;
+}
+
+export default {
+    data() {
+        return {
+            markdownIt: null
+        }
+    },
+    created() {
+        this.markdownIt = initMarkdown();
+        if (!this.html) {
+            this.markdownIt.set({ html: false });
+            this.xssOptions = false;
+        } else if (typeof this.xssOptions === 'object') {
+            this.markdownIt.use(sanitizer, this.xssOptions);
+        }
+    },
+    mounted() {
+        hljs_opts.highlighted = this.ishljs;
+    },
+    methods: {
+        $render(src, func) {
+            var $vm = this;
+            missLangs = {};
+            needLangs = [];
+            var res = this.markdownIt.render(src);
+            if (this.ishljs) {
+                if (needLangs.length > 0) {
+                    $vm.$_render(src, func, res);
+                }
+            }
+            func(res);
+        },
+        $_render(src, func, res) {
+            var $vm = this;
+            var deal = 0;
+            for (var i = 0; i < needLangs.length; i++) {
+                var url = $vm.p_external_link.hljs_lang(needLangs[i]);
+                loadScript(url, function () {
+                    deal = deal + 1;
+                    if (deal === needLangs.length) {
+                        res = this.markdownIt.render(src);
+                        func(res);
+                    }
+                })
+            }
+        }
+    },
+    watch: {
+        ishljs: function (val) {
+            hljs_opts.highlighted = val;
+        }
+    }
+};

package/src/lib/toolbar_left_click.js

@@ -0,0 +1,197 @@
+/**
+ * @Author: HuaChao Chen <CHC>
+ * @Date:   2017-05-03T01:23:38+08:00
+ * @Email:  chenhuachaoxyz@gmail.com
+ * @Filename: toolbar_left_click.js
+ * @Last modified by:   CHC
+ * @Last modified time: 2017-08-10T12:43:22+08:00
+ * @License: MIT
+ * @Copyright: 2017
+ */
+
+function $toolbar_left_undo_click($vm) {
+    if ($vm.d_history_index > 0) {
+        $vm.d_history_index--
+    }
+    // $vm.$refs.vNoteDivEdit.innerHTML = $vm.s_markdown.render($vm.d_value)
+    $vm.$nextTick(() => {
+        // 光标操作
+        let start = $vm.textarea_selectionEnds[$vm.d_history_index];
+        $vm.getTextareaDom().selectionStart = start
+        $vm.getTextareaDom().selectionEnd = start
+    })
+    $vm.getTextareaDom().focus()
+}
+// redo
+function $toolbar_left_redo_click($vm) {
+    if ($vm.d_history_index < $vm.d_history.length - 1) {
+        $vm.d_history_index++
+    }
+    $vm.$nextTick(() => {
+        let start = $vm.textarea_selectionEnds[$vm.d_history_index];
+        $vm.getTextareaDom().selectionStart = start
+        $vm.getTextareaDom().selectionEnd = start
+    })
+    $vm.getTextareaDom().focus()
+    // $vm.$refs.vNoteDivEdit.innerHTML = $vm.s_markdown.render($vm.d_value)
+}
+function $toolbar_left_trash_click($vm) {
+    $vm.d_value = ''
+    $vm.getTextareaDom().focus()
+    // $vm.$refs.vNoteDivEdit.innerHTML = $vm.s_markdown.render($vm.d_value)
+}
+function $toolbar_left_save_click($vm) {
+    $vm.save($vm.d_value, $vm.d_render)
+}
+// ol
+function $toolbar_left_ol_click($vm) {
+    $vm.insertOl()
+}
+// ul
+function $toolbar_left_ul_click($vm) {
+    $vm.insertUl()
+}
+function $toolbar_left_remove_line_click($vm) {
+    $vm.removeLine()
+}
+
+function $toolbar_left_codeBlock_click($vm) {
+    $vm.insertCodeBlock();
+}
+
+// 直接添加链接
+export const toolbar_left_addlink = (type, text, link, $vm) => {
+    let insert_text = {
+        prefix: type === 'link' ? `[${text}](` : `![${text}](`,
+        subfix: ')',
+        str: link
+    };
+    $vm.insertText($vm.getTextareaDom(), insert_text);
+}
+export const toolbar_left_click = (_type, $vm) => {
+     var _param_of_insert_text = {
+         'bold': {
+             prefix: '**',
+             subfix: '**',
+             str: $vm.d_words.tl_bold
+         },
+         'italic': {
+             prefix: '*',
+             subfix: '*',
+             str: $vm.d_words.tl_italic
+         },
+         'header': {
+             prefix: '# ',
+             subfix: '',
+             str: $vm.d_words.tl_header
+         },
+         'header1': {
+             prefix: '# ',
+             subfix: '',
+             str: $vm.d_words.tl_header_one
+         },
+         'header2': {
+             prefix: '## ',
+             subfix: '',
+             str: $vm.d_words.tl_header_two
+         },
+         'header3': {
+             prefix: '### ',
+             subfix: '',
+             str: $vm.d_words.tl_header_three
+         },
+         'header4': {
+             prefix: '#### ',
+             subfix: '',
+             str: $vm.d_words.tl_header_four
+         },
+         'header5': {
+             prefix: '##### ',
+             subfix: '',
+             str: $vm.d_words.tl_header_five
+         },
+         'header6': {
+             prefix: '###### ',
+             subfix: '',
+             str: $vm.d_words.tl_header_six
+         },
+         'underline': {
+             prefix: '++',
+             subfix: '++',
+             str: $vm.d_words.tl_underline
+         },
+         'strikethrough': {
+             prefix: '~~',
+             subfix: '~~',
+             str: $vm.d_words.tl_strikethrough
+         },
+         'mark': {
+             prefix: '==',
+             subfix: '==',
+             str: $vm.d_words.tl_mark
+         },
+         'superscript': {
+             prefix: '^',
+             subfix: '^',
+             str: $vm.d_words.tl_superscript
+         },
+         'subscript': {
+             prefix: '~',
+             subfix: '~',
+             str: $vm.d_words.tl_subscript
+         },
+         'quote': {
+             prefix: '> ',
+             subfix: '',
+             str: $vm.d_words.tl_quote
+         },
+         'link': {
+             prefix: '[](',
+             subfix: ')',
+             str: $vm.d_words.tl_link
+         },
+         'imagelink': {
+             prefix: '![](',
+             subfix: ')',
+             str: $vm.d_words.tl_image
+         },
+         'table': {
+             prefix: '',
+             subfix: '',
+             str: '|column1|column2|column3|\n|-|-|-|\n|content1|content2|content3|\n'
+         },
+         'aligncenter': {
+           prefix: '::: hljs-center\n\n',
+           subfix: '\n\n:::\n',
+           str: $vm.d_words.tl_aligncenter
+         },
+         'alignright': {
+           prefix: '::: hljs-right\n\n',
+           subfix: '\n\n:::\n',
+           str: $vm.d_words.tl_alignright
+         },
+         'alignleft': {
+           prefix: '::: hljs-left\n\n',
+           subfix: '\n\n:::\n',
+           str: $vm.d_words.tl_alignleft
+         }
+     };
+     if (_param_of_insert_text.hasOwnProperty(_type)) {
+         // 插入对应的内容
+         $vm.insertText($vm.getTextareaDom(),
+             _param_of_insert_text[_type]);
+     }
+     var _other_left_click = {
+         'undo': $toolbar_left_undo_click,
+         'redo': $toolbar_left_redo_click,
+         'trash': $toolbar_left_trash_click,
+         'save': $toolbar_left_save_click,
+         'ol': $toolbar_left_ol_click,
+         'ul': $toolbar_left_ul_click,
+         'removeLine': $toolbar_left_remove_line_click,
+         'code': $toolbar_left_codeBlock_click
+     };
+     if (_other_left_click.hasOwnProperty(_type)) {
+         _other_left_click[_type]($vm);
+     }
+ }

package/src/lib/toolbar_right_click.js

@@ -0,0 +1,92 @@
+/**
+ * @Author: HuaChao Chen <CHC>
+ * @Date:   2017-05-03T01:39:47+08:00
+ * @Email:  chenhuachaoxyz@gmail.com
+ * @Filename: toolbar_right_click.js
+ * @Last modified by:   chc
+ * @Last modified time: 2017-06-08T12:44:50+08:00
+ * @License: MIT
+ * @Copyright: 2017
+ */
+
+function $toolbar_right_html_click($vm) {
+    $vm.s_html_code = !$vm.s_html_code
+    if ($vm.htmlcode) {
+        $vm.htmlcode($vm.s_html_code, $vm.d_value)
+    }
+}
+
+function $toolbar_right_help_click($vm) {
+    $vm.s_help = !$vm.s_help
+    if ($vm.helptoggle) {
+        $vm.helptoggle($vm.s_help, $vm.d_value)
+    }
+}
+// 导航
+function $toolbar_right_read_click($vm) {
+    let element = $vm.$refs.vReadModel
+    // 单栏编辑
+    if (element.requestFullscreen) {
+        element.requestFullscreen();
+    } else if (element.mozRequestFullScreen) {
+        element.mozRequestFullScreen();
+    } else if (element.webkitRequestFullscreen) {
+        element.webkitRequestFullscreen();
+    } else if (element.msRequestFullscreen) {
+        element.msRequestFullscreen();
+    }
+}
+
+function $toolbar_right_preview_click($vm) {
+    $vm.s_preview_switch = !$vm.s_preview_switch
+    // $vm.$refs.vNoteDivEdit.innerHTML = $vm.s_markdown.render($vm.d_value)
+    if ($vm.previewtoggle) {
+        $vm.previewtoggle($vm.s_preview_switch, $vm.d_value)
+    }
+}
+
+function $toolbar_right_fullscreen_click($vm) {
+    $vm.s_fullScreen = !$vm.s_fullScreen
+    if ($vm.fullscreen) {
+        $vm.fullscreen($vm.s_fullScreen, $vm.d_value)
+    }
+}
+function $toolbar_right_subfield_click ($vm) {
+    $vm.s_subfield = !$vm.s_subfield
+    $vm.s_preview_switch = $vm.s_subfield;
+    // $vm.$refs.vNoteDivEdit.innerHTML = $vm.s_markdown.render($vm.d_value)
+    if ($vm.previewtoggle) {
+        $vm.previewtoggle($vm.s_preview_switch, $vm.d_value)
+    }
+    // $vm.$refs.vNoteDivEdit.innerHTML = $vm.s_markdown.render($vm.d_value)
+    if ($vm.subfieldtoggle) {
+        $vm.subfieldtoggle($vm.s_subfield, $vm.d_value)
+    }
+}
+function $toolbar_right_navigation_click($vm) {
+    $vm.s_navigation = !$vm.s_navigation
+    if ($vm.s_navigation) {
+        $vm.s_preview_switch = true;
+    }
+    if ($vm.navigationtoggle) {
+        $vm.navigationtoggle($vm.s_navigation, $vm.d_value)
+    }
+    if ($vm.s_navigation) {
+        // 绘制标题导航
+        $vm.getNavigation($vm, false)
+    }
+}
+export const toolbar_right_click = (_type, $vm) => {
+    var _other_right_click = {
+        'help': $toolbar_right_help_click,
+        'html': $toolbar_right_html_click,
+        'read': $toolbar_right_read_click,
+        'preview': $toolbar_right_preview_click,
+        'fullscreen': $toolbar_right_fullscreen_click,
+        'navigation': $toolbar_right_navigation_click,
+        'subfield': $toolbar_right_subfield_click
+    }
+    if (_other_right_click.hasOwnProperty(_type)) {
+        _other_right_click[_type]($vm);
+    }
+}

package/src/lib/util.js

@@ -0,0 +1,52 @@
+/**
+ * Created by zhy on 2016/12/25.
+ */
+/**
+ * 深度拷贝对象
+ * @param target
+ * @param arg
+ * @returns {*}
+ * @constructor
+ */
+export function p_ObjectCopy_DEEP(target, arg) {
+  for (let arg_item in arg) {
+    let type = typeof arg[arg_item];
+    if (!target[arg_item] || (type !== 'Object' && type !== 'object')) {
+      target[arg_item] = arg[arg_item];
+      continue;
+    } else {
+      target[arg_item] = p_ObjectCopy_DEEP(target[arg_item], arg[arg_item]);
+    }
+  }
+  return target;
+};
+/**
+ * 解析url参数
+ */
+export function p_urlParse() {
+  let url = window.location.search;
+  let obj = {};
+  let reg = /[?&][^?&]+=[^?&]+/g;
+  let arr = url.match(reg);
+  if (arr) {
+    arr.forEach((item) => {
+      let tempArr = item.substring(1).split('=');
+      let key = decodeURIComponent(tempArr[0]);
+      let val = decodeURIComponent(tempArr[1]);
+      obj[key] = val;
+    })
+  }
+  return obj;
+};
+
+export function stopEvent(e) {
+  if (!e) {
+    return;
+  }
+  if (e.preventDefault) {
+    e.preventDefault();
+  }
+  if (e.stopPropagation) {
+    e.stopPropagation();
+  }
+};