feat: add switch for footnotes

添加脚注开关
This commit is contained in:
yanglbme 2019-12-07 21:14:02 +08:00
parent 5d13acb1e0
commit f6e2b4e3ba
3 changed files with 22 additions and 9 deletions

View File

@ -37,6 +37,7 @@ let app = new Vue({
d.currentFont = d.builtinFonts[0].value; d.currentFont = d.builtinFonts[0].value;
d.currentSize = d.sizeOption[1].value; d.currentSize = d.sizeOption[1].value;
d.currentColor = d.colorOption[0].value; d.currentColor = d.colorOption[0].value;
d.status = '1';
return d; return d;
}, },
mounted() { mounted() {
@ -59,7 +60,8 @@ let app = new Vue({
this.wxRenderer = new WxRenderer({ this.wxRenderer = new WxRenderer({
theme: setColor(this.currentColor), theme: setColor(this.currentColor),
fonts: this.currentFont, fonts: this.currentFont,
size: this.currentSize size: this.currentSize,
status: this.status
}); });
// 如果有编辑内容被保存则读取,否则加载默认文档 // 如果有编辑内容被保存则读取,否则加载默认文档
if (localStorage.getItem("__editor_content")) { if (localStorage.getItem("__editor_content")) {
@ -70,10 +72,10 @@ let app = new Vue({
}, },
methods: { methods: {
renderWeChat(source) { renderWeChat(source) {
let output = marked(source, { renderer: this.wxRenderer.getRenderer() }); let output = marked(source, { renderer: this.wxRenderer.getRenderer(this.status) });
if (this.wxRenderer.hasFootnotes()) {
// 去除第一行的 margin-top // 去除第一行的 margin-top
output = output.replace(/(style=".*?)"/, '$1;margin-top: 0"'); output = output.replace(/(style=".*?)"/, '$1;margin-top: 0"');
if (this.status) {
// 引用脚注 // 引用脚注
output += this.wxRenderer.buildFootnotes(); output += this.wxRenderer.buildFootnotes();
// 附加的一些 style // 附加的一些 style
@ -161,6 +163,9 @@ let app = new Vue({
this.editor.focus(); this.editor.focus();
}); });
}, },
statusChanged() {
this.refresh();
},
// 将左侧编辑器内容保存到 LocalStorage // 将左侧编辑器内容保存到 LocalStorage
saveEditorContent() { saveEditorContent() {
let content = this.editor.getValue(0); let content = this.editor.getValue(0);

View File

@ -1,6 +1,5 @@
let WxRenderer = function (opts) { let WxRenderer = function (opts) {
this.opts = opts; this.opts = opts;
let ENV_USE_REFERENCES = true;
let ENV_STRETCH_IMAGE = true; let ENV_STRETCH_IMAGE = true;
let footnotes = []; let footnotes = [];
@ -92,7 +91,7 @@ let WxRenderer = function (opts) {
this.hasFootnotes = () => footnotes.length !== 0; this.hasFootnotes = () => footnotes.length !== 0;
this.getRenderer = () => { this.getRenderer = (status) => {
footnotes = []; footnotes = [];
footnoteIndex = 0; footnoteIndex = 0;
@ -172,11 +171,11 @@ let WxRenderer = function (opts) {
} else if (href === text) { } else if (href === text) {
return text; return text;
} else { } else {
if (ENV_USE_REFERENCES) { if (status) {
let ref = addFootnote(title || text, href); let ref = addFootnote(title || text, href);
return `<span ${getStyles('link')}>${text}<sup>[${ref}]</sup></span>`; return `<span ${getStyles('link')}>${text}<sup>[${ref}]</sup></span>`;
} else { } else {
return `<a href="${href}" title="${(title || text)}" ${getStyles('link')}>${text}</a>`; return text;
} }
} }
}; };

View File

@ -82,6 +82,15 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-color-picker v-model="currentColor" size="mini" show-alpha @change="colorChanged"></el-color-picker> <el-color-picker v-model="currentColor" size="mini" show-alpha @change="colorChanged"></el-color-picker>
&nbsp;&nbsp;
<el-tooltip content="微信外链自动转为文末引用" placement="top">
<el-switch
v-model="status"
active-color="#67c23a"
inactive-color="#dcdfe6"
@change="statusChanged">
</el-switch>
</el-tooltip>
</el-form> </el-form>
<el-button type="success" plain size="medium" @click="copy">复制</el-button> <el-button type="success" plain size="medium" @click="copy">复制</el-button>
<el-button type="success" plain size="medium" class="about" @click="aboutDialogVisible = true">关于</el-button> <el-button type="success" plain size="medium" class="about" @click="aboutDialogVisible = true">关于</el-button>