mirror of
https://github.com/doocs/md.git
synced 2024-11-24 19:10:34 +08:00
fix: update css editor
更新样式编辑器代码
This commit is contained in:
yanglbme
parent
5982d5a0b0
commit
f01c3fe280
29
.gitignore
vendored
Normal file
29
.gitignore
vendored
Normal file
@ -0,0 +1,29 @@
|
||||
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.vscode
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
dist
|
||||
package-lock.json
|
||||
lib
|
||||
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
@ -1,3 +0,0 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
@ -32,14 +32,14 @@ let app = new Vue({
|
||||
{ label: '翡翠绿', value: 'rgba(0, 152, 116, 0.9)', hex: '清新且优雅' },
|
||||
{ label: '辣椒红', value: 'rgba(155, 35, 53, 0.9)', hex: '自信且迷人' }
|
||||
],
|
||||
showBox:true,
|
||||
showBox: true,
|
||||
aboutDialogVisible: false
|
||||
};
|
||||
d.currentEditorTheme = d.editorThemes[0].value;
|
||||
d.currentCssEditorTheme = d.editorThemes[0].value;
|
||||
d.currentFont = d.builtinFonts[0].value;
|
||||
d.currentSize = d.sizeOption[1].value;
|
||||
d.currentColor = d.colorOption[1].value;
|
||||
d.currentColor = d.colorOption[0].value;
|
||||
return d;
|
||||
},
|
||||
mounted() {
|
||||
@ -56,34 +56,34 @@ let app = new Vue({
|
||||
}
|
||||
);
|
||||
this.cssEditor = CodeMirror.fromTextArea(
|
||||
document.getElementById('cssEditor'), {
|
||||
mode: 'css',
|
||||
theme: 'style-mirror',
|
||||
lineNumbers:false,
|
||||
lineWrapping: true,
|
||||
matchBrackets: true,
|
||||
autofocus: true,
|
||||
extraKeys: {
|
||||
"Ctrl-F": function autoFormat(editor) {
|
||||
var totalLines = editor.lineCount();
|
||||
editor.autoFormatRange({line:0, ch:0}, {line:totalLines});
|
||||
}
|
||||
},
|
||||
document.getElementById('cssEditor'), {
|
||||
mode: 'css',
|
||||
theme: 'style-mirror',
|
||||
lineNumbers: false,
|
||||
lineWrapping: true,
|
||||
matchBrackets: true,
|
||||
autofocus: true,
|
||||
extraKeys: {
|
||||
"Ctrl-F": function autoFormat(editor) {
|
||||
var totalLines = editor.lineCount();
|
||||
editor.autoFormatRange({ line: 0, ch: 0 }, { line: totalLines });
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
// 自动提示
|
||||
this.cssEditor.on("keyup", (cm, e) => {
|
||||
if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) {
|
||||
cm.showHint(e);
|
||||
}
|
||||
});
|
||||
if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) {
|
||||
cm.showHint(e);
|
||||
}
|
||||
});
|
||||
this.editor.on("change", (cm, change) => {
|
||||
this.refresh();
|
||||
this.saveEditorContent(this.editor, '__editor_content');
|
||||
});
|
||||
this.cssEditor.on('update', (instance) => {
|
||||
this.cssChanged()
|
||||
this.saveEditorContent(this.cssEditor, '__css_content');
|
||||
this.cssChanged();
|
||||
this.saveEditorContent(this.cssEditor, '__css_content');
|
||||
});
|
||||
this.wxRenderer = new WxRenderer({
|
||||
theme: setColor(this.currentColor),
|
||||
@ -98,9 +98,9 @@ let app = new Vue({
|
||||
}
|
||||
|
||||
if (localStorage.getItem("__css_content")) {
|
||||
this.cssEditor.setValue(localStorage.getItem("__css_content"));
|
||||
} else {
|
||||
this.cssEditor.setValue(DEFAULT_CSS_CONTENT);
|
||||
this.cssEditor.setValue(localStorage.getItem("__css_content"));
|
||||
} else {
|
||||
this.cssEditor.setValue(DEFAULT_CSS_CONTENT);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -140,12 +140,12 @@ let app = new Vue({
|
||||
this.refresh();
|
||||
},
|
||||
cssChanged() {
|
||||
let json = css2json(this.cssEditor.getValue(0))
|
||||
let theme = customCssWithTemplate(json,this.currentColor)
|
||||
this.wxRenderer.setOptions({
|
||||
theme
|
||||
});
|
||||
this.refresh();
|
||||
let json = css2json(this.cssEditor.getValue(0))
|
||||
let theme = customCssWithTemplate(json, this.currentColor)
|
||||
this.wxRenderer.setOptions({
|
||||
theme: theme
|
||||
});
|
||||
this.refresh();
|
||||
},
|
||||
// 图片上传结束
|
||||
uploaded(response, file, fileList) {
|
||||
@ -215,7 +215,6 @@ let app = new Vue({
|
||||
}
|
||||
},
|
||||
customStyle() {
|
||||
console.log(this.currentColor)
|
||||
this.showBox = !this.showBox;
|
||||
},
|
||||
setDefaultContent() {
|
||||
|
||||
@ -13,35 +13,40 @@ function setColorWithTemplate(template) {
|
||||
|
||||
let setColor = setColorWithTemplate(default_theme);
|
||||
|
||||
function customCssWithTemplate(jsonString,color) {
|
||||
let custom_theme = JSON.parse(JSON.stringify(default_theme));
|
||||
// block
|
||||
custom_theme.block.h1 = Object.assign(custom_theme.block.h1,jsonString.h1);
|
||||
custom_theme.block.h2 = Object.assign(custom_theme.block.h2,jsonString.h2);
|
||||
custom_theme.block.h3 = Object.assign(custom_theme.block.h3,jsonString.h3);
|
||||
custom_theme.block.h4 = Object.assign(custom_theme.block.h4,jsonString.h4);
|
||||
custom_theme.block.p = Object.assign(custom_theme.block.p,jsonString.p);
|
||||
custom_theme.block.blockquote = Object.assign(custom_theme.block.blockquote,jsonString.blockquote);
|
||||
custom_theme.block.blockquote_p = Object.assign(custom_theme.block.blockquote_p,jsonString.blockquote_p);
|
||||
custom_theme.block.code = Object.assign(custom_theme.block.code,jsonString.code);
|
||||
custom_theme.block.image = Object.assign(custom_theme.block.image,jsonString.image);
|
||||
custom_theme.block.ol = Object.assign(custom_theme.block.ol,jsonString.ol);
|
||||
custom_theme.block.ul = Object.assign(custom_theme.block.ul,jsonString.ul);
|
||||
custom_theme.block.footnotes = Object.assign(custom_theme.block.footnotes,jsonString.footnotes);
|
||||
custom_theme.block.figure = Object.assign(custom_theme.block.figure,jsonString.figure);
|
||||
function customCssWithTemplate(jsonString, color) {
|
||||
let custom_theme = JSON.parse(JSON.stringify(default_theme));
|
||||
// block
|
||||
console.log(jsonString)
|
||||
custom_theme.block.h1['border-bottom'] = `2px solid ${color}`;
|
||||
custom_theme.block.h2['background'] = color;
|
||||
custom_theme.block.h3['border-left'] = `3px solid ${color}`;
|
||||
custom_theme.block.h4['color'] = color;
|
||||
custom_theme.inline.strong['color'] = color;
|
||||
|
||||
// inline
|
||||
custom_theme.inline.strong = Object.assign(custom_theme.inline.strong,jsonString.strong);
|
||||
custom_theme.inline.table = Object.assign(custom_theme.inline.table,jsonString.table);
|
||||
custom_theme.inline.thead = Object.assign(custom_theme.inline.thead,jsonString.thead);
|
||||
custom_theme.inline.strong = Object.assign(custom_theme.inline.strong,jsonString.strong);
|
||||
custom_theme.inline.link = Object.assign(custom_theme.inline.link,jsonString.link);
|
||||
custom_theme.inline.wx_link = Object.assign(custom_theme.inline.wx_link,jsonString.wx_link);
|
||||
custom_theme.block.h1 = Object.assign(custom_theme.block.h1, jsonString.h1);
|
||||
custom_theme.block.h2 = Object.assign(custom_theme.block.h2, jsonString.h2);
|
||||
custom_theme.block.h3 = Object.assign(custom_theme.block.h3, jsonString.h3);
|
||||
custom_theme.block.h4 = Object.assign(custom_theme.block.h4, jsonString.h4);
|
||||
custom_theme.block.p = Object.assign(custom_theme.block.p, jsonString.p);
|
||||
custom_theme.block.blockquote = Object.assign(custom_theme.block.blockquote, jsonString.blockquote);
|
||||
custom_theme.block.blockquote_p = Object.assign(custom_theme.block.blockquote_p, jsonString.blockquote_p);
|
||||
custom_theme.block.code = Object.assign(custom_theme.block.code, jsonString.code);
|
||||
custom_theme.block.image = Object.assign(custom_theme.block.image, jsonString.image);
|
||||
custom_theme.block.ol = Object.assign(custom_theme.block.ol, jsonString.ol);
|
||||
custom_theme.block.ul = Object.assign(custom_theme.block.ul, jsonString.ul);
|
||||
custom_theme.block.footnotes = Object.assign(custom_theme.block.footnotes, jsonString.footnotes);
|
||||
custom_theme.block.figure = Object.assign(custom_theme.block.figure, jsonString.figure);
|
||||
|
||||
custom_theme.block.h2['background'] = color;
|
||||
custom_theme.block.h3['border-left'] = `3px solid ${color}`;
|
||||
custom_theme.inline.strong['color'] = color;
|
||||
return custom_theme;
|
||||
// inline
|
||||
custom_theme.inline.strong = Object.assign(custom_theme.inline.strong, jsonString.strong);
|
||||
custom_theme.inline.table = Object.assign(custom_theme.inline.table, jsonString.table);
|
||||
custom_theme.inline.thead = Object.assign(custom_theme.inline.thead, jsonString.thead);
|
||||
custom_theme.inline.strong = Object.assign(custom_theme.inline.strong, jsonString.strong);
|
||||
custom_theme.inline.link = Object.assign(custom_theme.inline.link, jsonString.link);
|
||||
custom_theme.inline.wx_link = Object.assign(custom_theme.inline.wx_link, jsonString.wx_link);
|
||||
|
||||
|
||||
return custom_theme;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -160,7 +160,6 @@
|
||||
<script src="libs/scripts/prettify.min.js"></script>
|
||||
<script src="libs/scripts/index.js"></script>
|
||||
<script src="libs/scripts/jquery.min.js"></script>
|
||||
<script src="libs/scripts/json5.js"></script>
|
||||
|
||||
<script src="assets/scripts/sync-scroll.js"></script>
|
||||
<script src="assets/scripts/themes/default-theme.js"></script>
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user