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

View File

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

View File

@ -82,6 +82,15 @@
</el-select>
</el-form-item>
<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-button type="success" plain size="medium" @click="copy">复制</el-button>
<el-button type="success" plain size="medium" class="about" @click="aboutDialogVisible = true">关于</el-button>