simple-frame-unit 1.0.2

package/src/components/ed-base-vue/package/EdMarkEditor/src/extra-function.js

@@ -0,0 +1,538 @@
+/**
+ * @Author: HuaChao Chen <chc>
+ * @Date:   2017-06-14T23:04:34+08:00
+ * @Email:  chenhuachaoxyz@gmail.com
+ * @Filename: extra-function.js
+ * @Last modified by:   CHC
+ * @Last modified time: 2017-12-19T17:46:48+08:00
+ * @License: MIT
+ * @Copyright: 2017
+ */
+
+/**
+ * Created by zhy on 2017/4/24.
+ */
+/**
+ * textarea 插入内容
+ */
+export const insertTextAtCaret = (obj, {prefix, subfix, str, type}, $vm) => {
+    obj.focus()
+    if (isExistSelectionObj(obj)) {
+        var startPos = obj.selectionStart;
+        var endPos = obj.selectionEnd;
+        var tmpStr = obj.value;
+        if (startPos === endPos) {
+            // 直接插入
+            obj.value = tmpStr.substring(0, startPos) + prefix + str + subfix + tmpStr.substring(endPos, tmpStr.length);
+            obj.selectionStart = startPos + prefix.length;
+            obj.selectionEnd = startPos + (str.length + prefix.length);
+        } else {
+            // 存在选中区域
+            if (tmpStr.substring(startPos - prefix.length, startPos) === prefix && tmpStr.substring(endPos, endPos + subfix.length) === subfix && judgeItalicAndBold(prefix, subfix, tmpStr, startPos, endPos)) {
+                // 取消
+                obj.value = tmpStr.substring(0, startPos - prefix.length) + tmpStr.substring(startPos, endPos) + tmpStr.substring(endPos + subfix.length, tmpStr.length);
+                obj.selectionStart = startPos - prefix.length;
+                obj.selectionEnd = endPos - prefix.length;
+            } else {
+                // 确定
+                obj.value = tmpStr.substring(0, startPos) + prefix + tmpStr.substring(startPos, endPos) + subfix + tmpStr.substring(endPos, tmpStr.length);
+                obj.selectionStart = startPos + prefix.length;
+                obj.selectionEnd = startPos + (endPos - startPos + prefix.length);
+            }
+        }
+    } else {
+        alert('Error: Browser version is too low')
+        // obj.value += str;
+    }
+    // 触发change事件
+    $vm.d_value = obj.value
+    obj.focus()
+}
+
+const code_structure = {
+    prefix: "```",
+    subfix: "\n```\n",
+    defaultLanguageText: "language"
+}
+
+export const insertCodeBlock = ($vm) => {
+    let obj = $vm.getTextareaDom();
+
+    if (isExistSelectionObj(obj)) {
+        const {defaultLanguageText: language} = code_structure;
+        let { selectionStart: startPos, selectionEnd: endPos, value: tmpStr } = obj;
+
+        if (startPos === endPos) {
+            // 直接插入
+            insertCodeBlockToVM(language, "", obj);
+        } else {
+            // 存在选中区域
+            if (isCancelCodeBlock(obj)) {
+                // 取消
+                removeCodeBlockFromVM(obj);
+            } else {
+                // 确定
+                let value = tmpStr.substring(startPos, endPos);
+                insertCodeBlockToVM("", value, obj);
+            }
+        }
+    } else {
+        alert('Error: Browser version is too low');
+        return;
+    }
+
+    // 触发change事件
+    $vm.d_value = obj.value
+    obj.focus();
+}
+
+function insertCodeBlockToVM(language, content, selectionObj) {
+    const {prefix, subfix} = code_structure;
+    let { selectionStart: startPos, selectionEnd: endPos, value: tmpStr } = selectionObj;
+
+    let value = tmpStr.substring(0, startPos);
+    value += prefix + language + "\n";
+    value += content;
+    value += subfix;
+    value += tmpStr.substring(endPos, tmpStr.length);
+
+    selectionObj.value = value;
+    selectionObj.selectionStart = startPos + prefix.length + (language ? 0 : 1);
+    selectionObj.selectionEnd = selectionObj.selectionStart + language.length +  content.length;
+}
+
+function removeCodeBlockFromVM(selectionObj) {
+    let {prefix, subfix, defaultLanguageText: language} = code_structure;
+    let { selectionStart: startPos, selectionEnd: endPos, value: content } = selectionObj;
+    let selectedValue = content.substring(startPos, endPos);
+
+    if (content.substring(startPos - 1, startPos) === "\n")
+    {
+        prefix = prefix + "\n";
+    } else {
+        subfix = "\n" + subfix;
+        if (prefix + language + subfix === content.substring(startPos - prefix.length,endPos + subfix.length)) {
+            let value = content.substring(0, startPos - prefix.length);
+            value += content.substring(endPos + subfix.length, content.length)
+
+            selectionObj.value = value;
+            selectionObj.selectionStart = startPos - prefix.length;
+            selectionObj.selectionEnd = selectionObj.selectionStart;
+            return;
+        }
+    }
+
+    let value = content.substring(0, startPos - prefix.length);
+    value += selectedValue;
+    value += content.substring(endPos + subfix.length, content.length)
+
+    selectionObj.value = value;
+    selectionObj.selectionStart = startPos - prefix.length;
+    selectionObj.selectionEnd = selectionObj.selectionStart + selectedValue.length;
+}
+
+function isExistSelectionObj(textareaDom) {
+    return typeof textareaDom.selectionStart === 'number' && typeof textareaDom.selectionEnd === 'number';
+}
+
+function isCancelCodeBlock(selectionObj) {
+    let { selectionStart: startPos, selectionEnd: endPos, value: content } = selectionObj;
+    let {prefix, subfix} = code_structure;
+
+    if (content.substring(startPos - 1, startPos) === "\n")
+    {
+        prefix = prefix + "\n";
+    } else {
+        subfix = "\n" + subfix;
+    }
+
+    return content.substring(startPos - prefix.length, startPos) === prefix &&
+        content.substring(endPos, endPos + subfix.length) === subfix;
+}
+
+// 处理粗体与斜体冲突问题
+function judgeItalicAndBold(prefix, subfix, tmpStr, startPos, endPos) {
+    if (prefix === '*' && subfix ===  '*') {
+        if (tmpStr.substring(startPos - 2, startPos - 1) === '*' && tmpStr.substring(endPos + 1, endPos + 2) === '*') {
+            return false
+        }
+    }
+    return true
+}
+// 插入有序列表
+export const insertOl = ($vm) => {
+    let obj = $vm.getTextareaDom();
+    if (isExistSelectionObj(obj)) {
+        var startPos = obj.selectionStart;
+        var endPos = obj.selectionEnd;
+        var tmpStr = obj.value;
+        if (startPos === endPos) {
+            // 直接插入
+            obj.value = tmpStr.substring(0, startPos) + '1. ' + tmpStr.substring(endPos, tmpStr.length);
+            obj.selectionEnd = obj.selectionStart = startPos + 3;
+        } else {
+            // 存在选中区域
+            let start = startPos
+            while (start > 0 && tmpStr.substring(start - 1, start) !== '\n') {
+                start--
+            }
+            let selectStr = tmpStr.substring(start, endPos)
+            let selectStrs = selectStr.split('\n')
+            for (let i = 0; i < selectStrs.length; i++) {
+                selectStrs[i] = (i + 1) + '. ' + selectStrs[i]
+            }
+            let newSelectStr = selectStrs.join('\n')
+            obj.value = tmpStr.substring(0, start) + newSelectStr + tmpStr.substring(endPos, tmpStr.length);
+            obj.selectionStart = start
+            obj.selectionEnd = endPos + newSelectStr.length - selectStr.length;
+        }
+    } else {
+        alert('Error: Browser version is too low')
+        // obj.value += str;
+    }
+    // 触发change事件
+    $vm.d_value = obj.value
+    obj.focus();
+}
+// 删除行
+export const removeLine = ($vm) => {
+    let obj = $vm.getTextareaDom();
+    if (isExistSelectionObj(obj)) {
+        var startPos = obj.selectionStart;
+        var endPos = obj.selectionEnd;
+        var tmpStr = obj.value;
+        // 找到行首、行尾
+        let start = startPos
+        while (start > 0 && tmpStr.substring(start - 1, start) !== '\n') {
+            start--
+        }
+        let end = endPos
+        while (end < tmpStr.length && tmpStr.substring(end, end + 1) !== '\n') {
+            end++
+        }
+        if (end < tmpStr.length) {
+            end++
+        }
+        obj.value = tmpStr.substring(0, start)  + tmpStr.substring(end, tmpStr.length);
+        obj.selectionEnd = obj.selectionStart = start === 0 ? 0 : start - 1;
+    } else {
+        alert('Error: Browser version is too low')
+        // obj.value += str;
+    }
+    // 触发change事件
+    $vm.d_value = obj.value
+    obj.focus();
+}
+// 插入无序列表
+export const insertUl = ($vm) => {
+    let obj = $vm.getTextareaDom();
+    if (isExistSelectionObj(obj)) {
+        var startPos = obj.selectionStart;
+        var endPos = obj.selectionEnd;
+        var tmpStr = obj.value;
+        if (startPos === endPos) {
+            // 直接插入
+            obj.value = tmpStr.substring(0, startPos) + '- ' + tmpStr.substring(endPos, tmpStr.length);
+            obj.selectionEnd = obj.selectionStart = startPos + 2;
+        } else {
+            // 存在选中区域
+            let start = startPos
+            while (start > 0 && tmpStr.substring(start - 1, start) !== '\n') {
+                start--
+            }
+            let selectStr = tmpStr.substring(start, endPos)
+            let newSelectStr = selectStr.replace(/\n/g, '\n- ')
+            newSelectStr = '- ' + newSelectStr
+            obj.value = tmpStr.substring(0, start) + newSelectStr + tmpStr.substring(endPos, tmpStr.length);
+            obj.selectionStart = start
+            obj.selectionEnd = endPos + newSelectStr.length - selectStr.length;
+        }
+    } else {
+        alert('Error: Browser version is too low')
+        // obj.value += str;
+    }
+    // 触发change事件
+    $vm.d_value = obj.value
+    obj.focus();
+}
+// 插入tab
+export const insertTab = ($vm, tab) => {
+    tab = tab ? (new Array(tab)).fill(' ').join('') : '\t'
+    let obj = $vm.getTextareaDom();
+    if (isExistSelectionObj(obj)) {
+        var startPos = obj.selectionStart;
+        var endPos = obj.selectionEnd;
+        var tmpStr = obj.value;
+        let lastLine = tmpStr.substring(0, startPos).split('\n').pop()
+        if (lastLine.match(/^\s*[0-9]+\.\s+\S*/)) {
+            // 有序列表
+            let temp = lastLine.replace(/(\d+)/, 1)
+            obj.value = tmpStr.substring(0, startPos - temp.length) + tab + temp + tmpStr.substring(endPos, tmpStr.length);
+        } else if (lastLine.match(/^\s*-\s+\S*/)) {
+            // 无序列表
+            obj.value = tmpStr.substring(0, startPos - lastLine.length) + tab + lastLine + tmpStr.substring(endPos, tmpStr.length);
+        } else {
+            obj.value = tmpStr.substring(0, startPos) + tab + tmpStr.substring(endPos, tmpStr.length);
+        }
+        obj.selectionStart = obj.selectionEnd = startPos + tab.length;
+    } else {
+        alert('Error: Browser version is too low')
+        // obj.value += str;
+    }
+    // 触发change事件
+    $vm.d_value = obj.value
+    obj.focus();
+}
+// shift + tab
+export const unInsertTab = ($vm, tab) => {
+    let regTab = new RegExp(tab ? `\\s{${tab}}` : '\t')
+    console.log(`regTab:`, regTab)
+    let obj = $vm.getTextareaDom();
+    if (isExistSelectionObj(obj)) {
+        var startPos = obj.selectionStart;
+        var endPos = obj.selectionEnd;
+        var tmpStr = obj.value;
+        let lastLine = tmpStr.substring(0, startPos).split('\n').pop()
+        if (lastLine.search(regTab) >= 0) {
+            // 替换最后一个制表符为空
+            obj.value = tmpStr.substring(0, startPos - lastLine.length) +  lastLine.replace(regTab, '') + tmpStr.substring(endPos, tmpStr.length);
+            obj.selectionStart = obj.selectionEnd = startPos - (tab || 1);
+        }
+    } else {
+        alert('Error: Browser version is too low')
+        // obj.value += str;
+    }
+    // 触发change事件
+    $vm.d_value = obj.value
+    obj.focus();
+}
+// 插入enter
+export const insertEnter = ($vm, event) => {
+    let obj = $vm.getTextareaDom()
+    if (isExistSelectionObj(obj)) {
+        var startPos = obj.selectionStart;
+        var endPos = obj.selectionEnd;
+        var tmpStr = obj.value;
+        // 获取光标前最后一行字符串
+        let lastLine = tmpStr.substring(0, startPos).split('\n').pop()
+        let matchListNeedChangeLine = lastLine.match(/^\s*(?:[0-9]+\.|-)\s+\S+/)
+        if (matchListNeedChangeLine) {
+            // 需要自动产生下一个列表项
+            event.preventDefault()
+            // eg: [1.  test] 仅获取[1. ]
+            let subfix = matchListNeedChangeLine.shift().match(/^\s*(?:[0-9]+\.|-)\s/).shift()
+            if (subfix.search(/-/) >= 0) {
+                // 无序列表
+                obj.value = tmpStr.substring(0, startPos) + '\n' + subfix + tmpStr.substring(endPos, tmpStr.length);
+                obj.selectionStart = obj.selectionEnd = startPos + subfix.length + 1
+            } else {
+                // 有序列表
+                let temp = subfix.replace(/(\d+)/, parseInt(subfix) + 1)
+                obj.value = tmpStr.substring(0, startPos) + '\n' + temp + tmpStr.substring(endPos, tmpStr.length);
+                obj.selectionStart = obj.selectionEnd = startPos + temp.length + 1
+            }
+        } else {
+            let matchListNeedRemoveLine = lastLine.match(/^\s*(?:[0-9]+\.|-)\s+$/)
+            if (matchListNeedRemoveLine) {
+                // 需要跳出列表
+                event.preventDefault()
+                let preLength = matchListNeedRemoveLine.shift().length
+                obj.value = tmpStr.substring(0, startPos - preLength) + '\n' + tmpStr.substring(endPos, tmpStr.length);
+                obj.selectionStart = obj.selectionEnd = startPos - preLength
+                // TODO 检测是否存在嵌套列表，自动生成上一级
+            }
+        }
+    } else {
+        alert('Error: Browser version is too low')
+    }
+    $vm.d_value = obj.value
+    obj.focus();
+}
+/**
+ * 生成导航目录
+ */
+export const getNavigation = ($vm , full) => {
+    let navigationContent;
+
+    navigationContent = $vm.$refs.navigationContent
+
+    navigationContent.innerHTML = $vm.d_render
+    let nodes = navigationContent.children
+    if (nodes.length) {
+        for (let i = 0; i < nodes.length; i++) {
+            judageH(nodes[i] , i , nodes)
+        }
+    }
+    function judageH(node , i , nodes) {
+        let reg = /^H[1-6]{1}$/;
+        if (!reg.exec(node.tagName)) {
+            node.style.display = 'none'
+        } else {
+            node.onclick = function () {
+                let vShowContent = $vm.$refs.vShowContent;
+                let vNoteEdit = $vm.$refs.vNoteEdit;
+                if ($vm.s_subfield) {
+                    // 双栏
+                    if ($vm.s_preview_switch) {
+                        // 编辑预览
+                        vNoteEdit.scrollTop = vShowContent.children[i].offsetTop * (vNoteEdit.scrollHeight - vNoteEdit.offsetHeight) / (vShowContent.scrollHeight - vShowContent.offsetHeight);
+                    } else {
+                        // todo 编辑
+                    }
+                } else {
+                    // 单栏
+                    if ($vm.s_preview_switch) {
+                        // 预览
+                        vShowContent.scrollTop = vShowContent.children[i].offsetTop;
+                    } else {
+                        // todo 编辑
+                    }
+                }
+            }
+        }
+    }
+}
+
+/**
+ * 滚动条联动
+ */
+export const scrollLink = ($event, $vm) => {
+    let element = $event.srcElement ? $event.srcElement : $event.target
+    let ratio = element.scrollTop / (element.scrollHeight - element.offsetHeight)
+    if ($vm.edit_scroll_height >= 0 && element.scrollHeight !== $vm.edit_scroll_height && (element.scrollHeight - element.offsetHeight - element.scrollTop <= 30)) {
+        // star 内容变化 导致 高度增加  且滚动条距离底部小于25px  自动滚动到底部
+        $vm.$refs.vNoteEdit.scrollTop = element.scrollHeight - element.offsetHeight
+        ratio = 1
+    }
+    $vm.edit_scroll_height = element.scrollHeight
+    // end ----
+    if ($vm.$refs.vShowContent.scrollHeight > $vm.$refs.vShowContent.offsetHeight) {
+        $vm.$refs.vShowContent.scrollTop = ($vm.$refs.vShowContent.scrollHeight - $vm.$refs.vShowContent.offsetHeight) * ratio
+    }
+}
+/**
+ * 监听浏览器fullscreen
+ * @param $vm
+ */
+export const fullscreenchange = ($vm) => {
+    // 阅读模式 全屏监听事件
+    $vm.$el.addEventListener('fullscreenchange', function (e) {
+        $vm.$toolbar_right_read_change_status()
+    }, false);
+    $vm.$el.addEventListener('mozfullscreenchange', function (e) {
+        $vm.$toolbar_right_read_change_status()
+    }, false);
+    $vm.$el.addEventListener('webkitfullscreenchange', function (e) {
+        $vm.$toolbar_right_read_change_status()
+    }, false);
+    $vm.$el.addEventListener('msfullscreenchange', function (e) {
+        $vm.$toolbar_right_read_change_status()
+    }, false);
+}
+
+/**
+ * 监听浏览器onresize
+ * @param $vm
+ */
+export const windowResize = ($vm) => {
+    function sizeToStatus() {
+        if ($vm.$el.clientWidth > 768) {
+            // > 768
+            $vm.s_subfield = $vm.subfield;
+        }
+        else {
+            // <  768
+            $vm.s_subfield = false;
+        }
+    }
+
+    sizeToStatus();
+    window.addEventListener('resize', sizeToStatus);
+}
+
+export function loadScript(src, callback) {
+    if (!(typeof callback === 'function')) {
+        callback = function() {};
+    }
+    var check = document.querySelectorAll("script[src='" + src + "']");
+    if (check.length > 0) {
+        check[0].addEventListener('load', function() {
+            callback();
+        });
+        callback();
+        return;
+    }
+    var script = document.createElement('script');
+    var head = document.getElementsByTagName('head')[0];
+    script.type = 'text/javascript';
+    script.charset = 'UTF-8';
+    script.src = src;
+    if (script.addEventListener) {
+        script.addEventListener('load', function () {
+            callback();
+        }, false);
+    } else if (script.attachEvent) {
+        script.attachEvent('onreadystatechange', function () {
+            var target = window.event.srcElement;
+            if (target.readyState === 'loaded') {
+                callback();
+            }
+        });
+    }
+    head.appendChild(script);
+}
+
+// <link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/agate.min.css" rel="stylesheet">
+export function loadLink(src, callback, id) {
+    if (!(typeof callback === 'function')) {
+        callback = function() {};
+    }
+    var check = document.querySelectorAll("link[href='" + src + "']");
+    if (check.length > 0) {
+        callback();
+        return;
+    }
+
+    if (id) {
+        var styles = document.querySelectorAll("link#" + id);
+        if (styles.length) {
+            styles[0].href = src;
+            return;
+        }
+    }
+
+    var link = document.createElement('link');
+    var head = document.getElementsByTagName('head')[0];
+    link.rel = 'stylesheet';
+    link.href = src;
+    id && (link['id'] = id);
+    if (link.addEventListener) {
+        link.addEventListener('load', function () {
+            callback();
+        }, false);
+    } else if (link.attachEvent) {
+        link.attachEvent('onreadystatechange', function () {
+            var target = window.event.srcElement;
+            if (target.readyState === 'loaded') {
+                callback();
+            }
+        });
+    }
+    head.appendChild(link);
+}
+
+export const ImagePreviewListener = ($vm) => {
+    // vShowContent
+    $vm.$refs.vShowContent.addEventListener('click', function (event) {
+        event = event ? event : window.event;
+        let ele = event.srcElement ? event.srcElement : event.target;
+        if (ele.tagName === 'IMG') {
+            if ($vm.imageClick != null) {
+                // 覆盖图片点击事件
+                $vm.imageClick(ele);
+            } else {
+                $vm.d_preview_imgsrc = ele.src;
+            }
+        }
+    })
+}

package/src/components/ed-base-vue/package/EdMarkEditor/src/highlight.js

@@ -0,0 +1,95 @@
+/**
+ * @Author: HuaChao Chen <CHC>
+ * @Date:   2017-06-16T21:01:47+08:00
+ * @Email:  chenhuachaoxyz@gmail.com
+ * @Filename: highlight.js
+ * @Last modified by:   chc
+ * @Last modified time: 2017-11-24T19:55:22+08:00
+ * @License: MIT
+ * @Copyright: 2017
+ */
+
+import {
+    loadScript
+} from './extra-function.js'
+function highLightCode(str, callback, hljsLangFuc, hljsFuc) {
+    var hljs = window.hljs;
+    if (!hljs) {
+        if (typeof hljsFuc !== 'function') {
+            console.warn('external_link.hljs_js is not a function, hljs can not load by mavon-editor, if you want to disabled this log, set external_link.hljs_js to function');
+            callback(str);
+            return;
+        }
+        var url = hljsFuc();
+        console.warn('hljs parsing file is missing. mavon-editor will autoload', url);
+        loadScript(url, function() {
+            _highLightCode(str, callback, hljsLangFuc);
+        });
+    } else {
+        if (typeof hljsLangFuc === 'function') {
+            _highLightCode(str, callback, hljsLangFuc);
+        } else {
+            console.warn('external_link.hljs_lang is not a function, hljs will not to work');
+            callback(str);
+        }
+    }
+}
+function _highLightCode(str, callback, hljsLangFuc) {
+    var dom = document.createElement('div');
+    var hljs = window.hljs;
+    dom.innerHTML = str;
+    var pre_code = dom.querySelectorAll('pre > div.hljs > code');
+    if (pre_code && hljs && (typeof hljsLangFuc === 'function')) {
+        var flag = 0;
+        var i = 0;
+        var deal = 0;
+        var not_include_lang = {}; // these lang parse file need to be include.
+        var url = '';
+        for (i = 0; i < pre_code.length; i++) {
+            var lang = pre_code[i].className.toLowerCase();
+            if (lang.length > 0) {
+                // if this lang parse file missing
+                url = hljsLangFuc(lang);
+                if (!hljs.getLanguage(lang) && !not_include_lang.hasOwnProperty(lang) && url.length > 0) {
+                    not_include_lang[lang] = url;
+                }
+            }
+        }
+        // we need to include these lang parse file manually
+        var need_langs = [];
+        for (var key in not_include_lang) {
+            if (not_include_lang.hasOwnProperty(key)) {
+                need_langs.push(key);
+            }
+        }
+        for (i = 0; i < need_langs.length; i++) {
+            url = not_include_lang[need_langs[i]];
+            loadScript(url, function() {
+                deal = deal + 1;
+                if (deal === need_langs.length) {
+                    for (var i = 0; i < pre_code.length; i++) {
+                        var lang = pre_code[i].className;
+                        // if lang is valid.
+                        if (lang.length > 0 && hljs.getLanguage(lang)) {
+                            hljs.highlightBlock(pre_code[i])
+                        }
+                    }
+                    callback(dom.innerHTML);
+                }
+            });
+        }
+        if (need_langs.length === 0) {
+            for (i = 0; i < pre_code.length; i++) {
+                lang = pre_code[i].className;
+                // if lang is valid.
+                if (lang.length > 0 && hljs.getLanguage(lang)) {
+                    hljs.highlightBlock(pre_code[i])
+                }
+            }
+            callback(dom.innerHTML);
+        }
+    } else {
+        callback(dom.innerHTML);
+    }
+}
+export default highLightCode;

package/src/components/ed-base-vue/package/EdTable/index.js

@@ -0,0 +1,8 @@
+import EdTable from './src/EdTable.vue';
+
+/* istanbul ignore next */
+EdTable.install = function (Vue) {
+  Vue.component(EdTable.name, EdTable)
+}
+
+export default EdTable;