diff --git a/public/assets/scripts/renderers/wx-renderer.js b/public/assets/scripts/renderers/wx-renderer.js deleted file mode 100644 index a2473dd..0000000 --- a/public/assets/scripts/renderers/wx-renderer.js +++ /dev/null @@ -1,190 +0,0 @@ -let WxRenderer = function (opts) { - this.opts = opts; - let ENV_STRETCH_IMAGE = true; - - let footnotes = []; - let footnoteIndex = 0; - let styleMapping = null; - - const CODE_FONT_FAMILY = "Menlo, Operator Mono, Consolas, Monaco, monospace"; - - let merge = (base, extend) => Object.assign({}, base, extend); - - this.buildTheme = themeTpl => { - let mapping = {}; - let base = merge(themeTpl.BASE, { - 'font-family': this.opts.fonts, - 'font-size': this.opts.size - }); - let base_block = merge(base, {}); - for (let ele in themeTpl.inline) { - if (themeTpl.inline.hasOwnProperty(ele)) { - let style = themeTpl.inline[ele]; - if (ele === 'codespan') { - style['font-family'] = CODE_FONT_FAMILY; - style['white-space'] = 'normal'; - } - mapping[ele] = merge(base, style); - } - } - - for (let ele in themeTpl.block) { - if (themeTpl.block.hasOwnProperty(ele)) { - let style = themeTpl.block[ele]; - if (ele === 'code') { - style['font-family'] = CODE_FONT_FAMILY; - } - mapping[ele] = merge(base_block, style); - } - } - return mapping; - }; - - let getStyles = (tokenName, addition) => { - let arr = []; - let dict = styleMapping[tokenName]; - if (!dict) return ''; - for (const key in dict) { - arr.push(key + ':' + dict[key]); - } - return `style="${arr.join(';') + (addition || '')}"`; - }; - - let addFootnote = (title, link) => { - footnotes.push([++footnoteIndex, title, link]); - return footnoteIndex; - }; - - this.buildFootnotes = () => { - let footnoteArray = footnotes.map(x => { - if (x[1] === x[2]) { - return `[${x[0]}]: ${x[1]}
`; - } - return `[${x[0]}] ${x[1]}: ${x[2]}
`; - }); - return `

引用链接

${footnoteArray.join('\n')}

`; - }; - - this.buildAddition = () => { - return ` - - `; - } - - this.setOptions = newOpts => { - this.opts = merge(this.opts, newOpts); - }; - - this.hasFootnotes = () => footnotes.length !== 0; - - this.getRenderer = (status) => { - footnotes = []; - footnoteIndex = 0; - - styleMapping = this.buildTheme(this.opts.theme); - let renderer = new marked.Renderer(); - - renderer.heading = (text, level) => { - switch (level) { - case 1: - return `

${text}

`; - case 2: - return `

${text}

`; - case 3: - return `

${text}

`; - default: - return `

${text}

`; - } - }; - renderer.paragraph = text => `

${text}

`; - - renderer.blockquote = text => { - text = text.replace(//, `

`); - return `

${text}
`; - }; - renderer.code = (text, infoString) => { - text = text.replace(//g, ">"); - - let lines = text.split('\n'); - let codeLines = []; - let numbers = []; - - for (let i = 0; i < lines.length; i++) { - const line = lines[i]; - codeLines.push(`${(line || '
')}
`); - numbers.push('
  • '); - } - let lang = infoString || ''; - - return ` -
    - -
    -                ${codeLines.join('')}
    -            
    -
    - `; - }; - renderer.codespan = (text, infoString) => `${text}`; - renderer.listitem = text => `<%s/>${text}`; - - renderer.list = (text, ordered, start) => { - text = text.replace(/<\/*p.*?>/g, ''); - let segments = text.split(`<%s/>`); - if (!ordered) { - text = segments.join('•'); - return `

    ${text}

    `; - } - text = segments[0]; - for (let i = 1; i < segments.length; i++) { - text = text + i + '.' + segments[i]; - } - return `

    ${text}

    `; - }; - renderer.image = (href, title, text) => { - let subText = ''; - if (text) { - subText = `
    ${text}
    `; - } - let figureStyles = getStyles('figure'); - let imgStyles = getStyles(ENV_STRETCH_IMAGE ? 'image' : 'image_org'); - return `
    ${text}${subText}
    `; - }; - renderer.link = (href, title, text) => { - if (href.indexOf('https://mp.weixin.qq.com') === 0) { - return `${text}`; - } else if (href === text) { - return text; - } else { - if (status) { - let ref = addFootnote(title || text, href); - return `${text}[${ref}]`; - } else { - return text; - } - } - }; - renderer.strong = text => `${text}`; - renderer.em = text => `

    ${text}

    `; - renderer.table = (header, body) => `
    ${header}${body}
    `; - // renderer.tablerow = (text) => `${text}`; - renderer.tablecell = (text, flags) => `${text}`; - renderer.hr = () => `
    `; - return renderer; - } -}; diff --git a/src/components/CodemirrorEditor.vue b/src/components/CodemirrorEditor.vue index 66e6de4..bc8192a 100644 --- a/src/components/CodemirrorEditor.vue +++ b/src/components/CodemirrorEditor.vue @@ -3,6 +3,7 @@ { this.initEditor() this.initCssEditor() - this.editorRefresh() + this.onEditorRefresh() }) }, methods: { @@ -109,8 +110,7 @@ export default { this.editor.on('change', (cm, e) => { if (this.changeTimer) clearTimeout(this.changeTimer); this.changeTimer = setTimeout(() => { - setTimeout(()=> PR.prettyPrint(), 0); - this.editorRefresh() + this.onEditorRefresh() console.log('tick'); saveEditorContent(this.editor, '__editor_content') }, 300); @@ -168,7 +168,7 @@ export default { this.setWxRendererOptions({ theme: theme }); - this.editorRefresh() + this.onEditorRefresh() }, onTextareaChange() { console.log('change'); @@ -188,7 +188,7 @@ export default { message: '图片插入成功', type: 'success' }) - this.editorRefresh() + this.onEditorRefresh() } else { // 上传失败 this.$message({ @@ -227,6 +227,10 @@ export default { }, 100) }) }, + onEditorRefresh() { + this.editorRefresh(); + setTimeout(()=> PR.prettyPrint(), 0); + }, ...mapMutations(['initEditorState', 'initEditorEntity', 'setWxRendererOptions', 'editorRefresh', 'initCssEditorEntity']) }, diff --git a/src/components/codeMirror/header.vue b/src/components/codeMirror/header.vue index 8abe262..ee2363c 100644 --- a/src/components/codeMirror/header.vue +++ b/src/components/codeMirror/header.vue @@ -105,7 +105,7 @@ export default { fonts: fonts }) this.setCurrentFont(fonts); - this.editorRefresh() + this.$emit('refresh') }, sizeChanged(size) { let theme = setFontSize(size.replace('px', '')) @@ -115,7 +115,7 @@ export default { theme: theme }) this.setCurrentSize(size); - this.editorRefresh() + this.$emit('refresh') }, colorChanged(color) { let theme = setFontSize(this.currentSize.replace('px', '')) @@ -124,11 +124,11 @@ export default { theme: theme }) this.setCurrentColor(color); - this.editorRefresh() + this.$emit('refresh') }, statusChanged(val) { this.setCiteStatus(val) - this.editorRefresh() + this.$emit('refresh') }, // 图片上传前的处理 beforeUpload(file) { @@ -175,6 +175,7 @@ export default { type: 'success' }) clipboardDiv.innerHTML = this.output; // 恢复现场 + this.$emit('refresh') }, // 自定义CSS样式 async customStyle () { @@ -227,7 +228,7 @@ export default { downLink.click() document.body.removeChild(downLink) }, - ...mapMutations(['editorRefresh', 'clearEditorToDefault','setCurrentColor', 'setCiteStatus', + ...mapMutations(['clearEditorToDefault','setCurrentColor', 'setCiteStatus', 'setHtml', 'setCurrentFont', 'setCurrentSize', 'setCssEditorValue', 'setWxRendererOptions']) }, mounted() {