diff --git a/.gitignore b/.gitignore index 9ea23f025c62dea37ca23d1eca63d782590f233e..1e3e341fc78200ca0ab65c991aa8f2696b4d17e5 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,5 @@ node_modules node_modules/* +dist +.vscode +*.css diff --git a/components/index.vue b/components/index.vue deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git a/main.js b/main.js deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git a/package.json b/package.json index 41a1ffe427a4a490e5111e8cc32779ea0d715fed..f52d4701182f8cf7fb0070856b5891a8b180880b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,22 @@ { + "scripts": { + "dev": "webpack serve --mode=development", + "build": "webpack" + }, "devDependencies": { + "css-loader": "^5.2.6", + "less": "^4.1.1", + "less-loader": "^9.0.0", + "style-loader": "^2.0.0", + "url-loader": "^4.1.1", + "vue-loader": "^15.9.7", + "vue-template-compiler": "^2.6.12", "webpack": "^5.38.1", "webpack-cli": "^4.7.0", "webpack-dev-server": "^3.11.2" + }, + "dependencies": { + "marked": "^2.0.6", + "vue": "^2.6.12" } } diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000000000000000000000000000000000000..b492281b096f76d3141beb9408bc9ce5ace87a0d --- /dev/null +++ b/src/App.vue @@ -0,0 +1,60 @@ + + + diff --git a/src/assets/img/icon-bold.svg b/src/assets/img/icon-bold.svg new file mode 100644 index 0000000000000000000000000000000000000000..400b713fa22eed4df056e3beb234d8e7ac709361 --- /dev/null +++ b/src/assets/img/icon-bold.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/style/global.less b/src/assets/style/global.less new file mode 100644 index 0000000000000000000000000000000000000000..b8e4449d91f0d0250200d10e3145ab6a1df20f0f --- /dev/null +++ b/src/assets/style/global.less @@ -0,0 +1,31 @@ +@import "./variable.less"; +@import "./iconfont.less"; + +* { + padding: 0; + margin: 0; +} + +html, +body, +#app { + padding: 0; + margin: 0; + min-height: 100vh; +} + +ul, +ol, +li, +input, +textarea { + list-style: none; + outline: none; + border: none; + padding: 0; +} + +img { + display: block; + margin: 0; +} diff --git a/src/assets/style/iconfont.less b/src/assets/style/iconfont.less new file mode 100644 index 0000000000000000000000000000000000000000..d293a5330bd3b1be85d11b3a295322155896986f --- /dev/null +++ b/src/assets/style/iconfont.less @@ -0,0 +1,57 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1622541171105') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-baojiaquotation:before { + content: "\e63a"; +} + +.icon-renwu:before { + content: "\e63f"; +} + +.icon-youxuliebiao:before { + content: "\e6f0"; +} + +.icon-bold:before { + content: "\e678"; +} + +.icon-biaoge:before { + content: "\e615"; +} + +.icon-lianjie:before { + content: "\e645"; +} + +.icon-unorderedList:before { + content: "\e620"; +} + +.icon-code:before { + content: "\e625"; +} + +.icon-fullScreen:before { + content: "\e627"; +} + +.icon-italic:before { + content: "\eaef"; +} + +.icon-tupian:before { + content: "\e607"; +} + diff --git a/src/assets/style/iconfont.ttf b/src/assets/style/iconfont.ttf new file mode 100644 index 0000000000000000000000000000000000000000..c38c2b749614c2a4ea8c5806f3f2b1553ae6172d Binary files /dev/null and b/src/assets/style/iconfont.ttf differ diff --git a/src/assets/style/variable.less b/src/assets/style/variable.less new file mode 100644 index 0000000000000000000000000000000000000000..7e73aae9aeb6b3b8376d208ec03f0aa49baa0480 --- /dev/null +++ b/src/assets/style/variable.less @@ -0,0 +1,4 @@ +:root { + --md-editor-theme-color: #dbdbdb; + --md-editor-theme-color-active: #409eff; +} diff --git a/src/components/md-footer.vue b/src/components/md-footer.vue new file mode 100644 index 0000000000000000000000000000000000000000..0978a5291dacdb45888ae7ffffab05c3a7d00238 --- /dev/null +++ b/src/components/md-footer.vue @@ -0,0 +1,27 @@ + + + diff --git a/src/components/md-header.vue b/src/components/md-header.vue new file mode 100644 index 0000000000000000000000000000000000000000..b7332f31c5691587d63e6be6e1580ce637b84099 --- /dev/null +++ b/src/components/md-header.vue @@ -0,0 +1,143 @@ + + + diff --git a/src/components/md-preview.vue b/src/components/md-preview.vue new file mode 100644 index 0000000000000000000000000000000000000000..f3354e6f48f713dd7c57ee5c36ef1bc42006b31a --- /dev/null +++ b/src/components/md-preview.vue @@ -0,0 +1,26 @@ + + + diff --git a/src/components/tool-button.vue b/src/components/tool-button.vue new file mode 100644 index 0000000000000000000000000000000000000000..e60cd26dd930bc429cf6b085672aa628f2d67930 --- /dev/null +++ b/src/components/tool-button.vue @@ -0,0 +1,27 @@ + + + diff --git a/src/components/upload-files.vue b/src/components/upload-files.vue new file mode 100644 index 0000000000000000000000000000000000000000..4016d6371c3be5e1ed6a559c6d84486e3b67b9d7 --- /dev/null +++ b/src/components/upload-files.vue @@ -0,0 +1,31 @@ + + + diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000000000000000000000000000000000000..c209aa17d63e37ed83193f6656dc32afc1186dd5 --- /dev/null +++ b/src/main.js @@ -0,0 +1,21 @@ +import Vue from "vue"; +import App from "./App"; +import "@/assets/style/global.less"; + +function MdEditor(obj) { + const { el, onChange } = obj; + if (!el || !document.querySelector(el)) throw new Error("请指定容器"); + + new Vue({ + render: h => + h(App, { + on: { + change(val) { + onChange(val); + } + } + }) + }).$mount(el); +} + +window.MdEditor = MdEditor; diff --git a/webpack.config.js b/webpack.config.js index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..a121d8ae7b30f32697c6bf5c38a298bdedc6f261 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -0,0 +1,37 @@ +const path = require("path"); +const VueLoaderPlugin = require("vue-loader/lib/plugin"); +module.exports = { + entry: path.resolve(__dirname, "./src/main.js"), + output: { + filename: "bundle.js", + path: path.resolve(__dirname, "dist") + }, + devServer: { + contentBase: path.resolve(__dirname, "dist"), + open: true + }, + resolve: { + extensions: [".js", ".vue", ".json"], + alias: { + "@": path.resolve(__dirname, "./src") + } + }, + module: { + rules: [ + { + test: /\.vue$/, + loader: "vue-loader" + }, + { + test: /\.less$/i, + use: ["style-loader", "css-loader", "less-loader"] + }, + + { + test: /\.ttf$/, + loader: "url-loader" + } + ] + }, + plugins: [new VueLoaderPlugin()] +};