+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ font.label }}
+ Abc
+
+
+
+
+
+
+ {{ size.label }}
+ {{ size.desc }}
+
+
+
+
+
+
+ {{ color.label }}
+ {{ color.hex }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 复制
+ 关于
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/scripts/config.js b/src/scripts/config.js
new file mode 100644
index 0000000..2a623c5
--- /dev/null
+++ b/src/scripts/config.js
@@ -0,0 +1,60 @@
+export default {
+ builtinFonts: [
+ {
+ label: '无衬线',
+ value: '-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif'
+ },
+ {
+ label: '衬线',
+ value: "Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif"
+ }
+ ],
+ sizeOption: [
+ {
+ label: '12px',
+ value: '12px',
+ desc: '更小'
+ },
+ {
+ label: '13px',
+ value: '13px',
+ desc: '稍小'
+ },
+ {
+ label: '14px',
+ value: '14px',
+ desc: '推荐'
+ },
+ {
+ label: '15px',
+ value: '15px',
+ desc: '稍大'
+ },
+ {
+ label: '16px',
+ value: '16px',
+ desc: '更大'
+ }
+ ],
+ colorOption: [
+ {
+ label: '经典蓝',
+ value: 'rgba(15, 76, 129, 1)',
+ hex: '最新流行'
+ },
+ {
+ label: '翡翠绿',
+ value: 'rgba(0, 152, 116, 1)',
+ hex: '优雅清新'
+ },
+ {
+ label: '活力橘',
+ value: 'rgba(250, 81, 81, 1)',
+ hex: '热情活泼'
+ }
+ ],
+ form: {
+ rows: 1,
+ cols: 1
+ }
+};
\ No newline at end of file
diff --git a/src/scripts/util.js b/src/scripts/util.js
index fe6ce62..d7f8893 100644
--- a/src/scripts/util.js
+++ b/src/scripts/util.js
@@ -167,3 +167,29 @@ export function css2json (css) {
// 返回JSON形式的结果串
return json
}
+
+
+/**
+ * 将编辑器内容保存到 LocalStorage
+ * @param {*} editor
+ * @param {*} name
+ */
+export function saveEditorContent(editor, name) {
+ const content = editor.getValue(0)
+
+ if (content) {
+ localStorage.setItem(name, content)
+ } else {
+ localStorage.removeItem(name)
+ }
+}
+
+export function checkImage(file) {
+ if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name)) {
+ return '请上传 JPG/PNG/GIF 格式的图片';
+ }
+ if (file.size > 5 * 1024 * 1024) {
+ return '由于公众号限制，图片大小不能超过 5.0M';
+ }
+ return false;
+}
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index 332b916..8689f0a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,15 +1,136 @@
import Vue from 'vue'
import Vuex from 'vuex'
+import config from '../scripts/config';
+import WxRenderer from '../scripts/renderers/wx-renderer'
+import marked from 'marked'
+import CodeMirror from 'codemirror/lib/codemirror'
+import DEFAULT_CONTENT from '../scripts/default-content'
+import DEFAULT_CSS_CONTENT from '../scripts/themes/default-theme-css'
+import {
+ setColor
+} from '../scripts/util'
Vue.use(Vuex)
+const state = {
+ wxRenderer: null,
+ output: '',
+ editor: null,
+ cssEditor: null,
+ html: '',
+ currentFont: {},
+ currentSize: {},
+ currentColor: {}
+};
+const mutations = {
+ setEditorValue(state, data) {
+ state.editor.setValue(data)
+ },
+ setCssEditorValue(state, data) {
+ state.cssEditor.setValue(data)
+ },
+ setWxRendererOptions(state, data) {
+ state.wxRenderer.setOptions(data);
+ },
+ setCurrentFont(state, data) {
+ state.currentFont = data;
+ localStorage.setItem('fonts', data)
+ },
+ setCurrentSize(state, data) {
+ state.currentSize = data;
+ localStorage.setItem('size', data)
+ },
+ setCurrentColor(state, data) {
+ state.currentColor = data;
+ localStorage.setItem('color', data)
+ },
+ initEditorState(state) {
+ state.currentFont = localStorage.getItem('fonts') || config.builtinFonts[0].value
+ state.currentColor = localStorage.getItem('color') || config.colorOption[1].value
+ state.currentSize = localStorage.getItem('size') || config.sizeOption[2].value
+ state.status = localStorage.getItem('status') === 'true'
+ state.wxRenderer = new WxRenderer({
+ theme: setColor(state.currentColor),
+ fonts: state.currentFont,
+ size: state.currentSize,
+ status: state.status
+ })
+ },
+ initEditorEntity(state) {
+ state.editor = CodeMirror.fromTextArea(
+ document.getElementById('editor'),
+ {
+ value: '',
+ mode: 'text/x-markdown',
+ theme: 'xq-light',
+ lineNumbers: false,
+ lineWrapping: true,
+ styleActiveLine: true,
+ autoCloseBrackets: true
+ }
+ )
+ // 如果有编辑器内容被保存则读取，否则加载默认内容
+ if (localStorage.getItem('__editor_content')) {
+ state.editor.setValue(localStorage.getItem('__editor_content'))
+ } else {
+ state.editor.setValue(DEFAULT_CONTENT)
+ }
+ },
+ initCssEditorEntity(state) {
+ state.cssEditor = CodeMirror.fromTextArea(
+ document.getElementById('cssEditor'), {
+ value: '',
+ mode: 'css',
+ theme: 'style-mirror',
+ lineNumbers: false,
+ lineWrapping: true,
+ matchBrackets: true,
+ autofocus: true,
+ extraKeys: {
+ 'Ctrl-F': function autoFormat(editor) {
+ const totalLines = editor.lineCount()
+ editor.autoFormatRange({
+ line: 0,
+ ch: 0
+ }, {
+ line: totalLines
+ })
+ }
+ }
+ }
+ )
+
+ // 如果有编辑器内容被保存则读取，否则加载默认内容
+ if (localStorage.getItem('__css_content')) {
+ state.cssEditor.setValue(localStorage.getItem('__css_content'))
+ } else {
+ state.cssEditor.setValue(DEFAULT_CSS_CONTENT)
+ }
+ },
+ editorRefresh(state) {
+ let output = marked(state.editor.getValue(0), {
+ renderer: state.wxRenderer.getRenderer(state.status)
+ })
+ // 去除第一行的 margin-top
+ output = output.replace(/(style=".*?)"/, '$1;margin-top: 0"')
+ if (state.status) {
+ // 引用脚注
+ output += state.wxRenderer.buildFootnotes()
+ // 附加的一些 style
+ output += state.wxRenderer.buildAddition()
+ }
+
+ state.output = output
+ },
+ clearEditorToDefault(state) {
+ state.editor.setValue(DEFAULT_CONTENT)
+ state.cssEditor.setValue(DEFAULT_CSS_CONTENT)
+ }
+}
+
export default new Vuex.Store({
- state: {
- },
- mutations: {
- },
- actions: {
- },
- modules: {
- }
+ state,
+ mutations,
+ actions: {},
+ modules: {}
})
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 02d9ab5..7d00042 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,17 +1,14 @@
