From c2be8bbe006ef01697b00717c29b8b0e159ec25a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=92=83=E7=99=BD?= <18511759309@163.com>
Date: Tue, 1 Jun 2021 19:49:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E7=BC=96=E8=BE=91=E5=99=A8=E4=B8=BB?=
=?UTF-8?q?=E4=BD=93=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.gitignore | 3 +
components/index.vue | 0
main.js | 0
package.json | 15 ++++
src/App.vue | 60 ++++++++++++++
src/assets/img/icon-bold.svg | 1 +
src/assets/style/global.less | 31 +++++++
src/assets/style/iconfont.less | 57 +++++++++++++
src/assets/style/iconfont.ttf | Bin 0 -> 4276 bytes
src/assets/style/variable.less | 4 +
src/components/md-footer.vue | 27 ++++++
src/components/md-header.vue | 143 ++++++++++++++++++++++++++++++++
src/components/md-preview.vue | 26 ++++++
src/components/tool-button.vue | 27 ++++++
src/components/upload-files.vue | 31 +++++++
src/main.js | 21 +++++
webpack.config.js | 37 +++++++++
17 files changed, 483 insertions(+)
delete mode 100644 components/index.vue
delete mode 100644 main.js
create mode 100644 src/App.vue
create mode 100644 src/assets/img/icon-bold.svg
create mode 100644 src/assets/style/global.less
create mode 100644 src/assets/style/iconfont.less
create mode 100644 src/assets/style/iconfont.ttf
create mode 100644 src/assets/style/variable.less
create mode 100644 src/components/md-footer.vue
create mode 100644 src/components/md-header.vue
create mode 100644 src/components/md-preview.vue
create mode 100644 src/components/tool-button.vue
create mode 100644 src/components/upload-files.vue
create mode 100644 src/main.js
diff --git a/.gitignore b/.gitignore
index 9ea23f0..1e3e341 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 e69de29..0000000
diff --git a/main.js b/main.js
deleted file mode 100644
index e69de29..0000000
diff --git a/package.json b/package.json
index 41a1ffe..f52d470 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 0000000..b492281
--- /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 0000000..400b713
--- /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 0000000..b8e4449
--- /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 0000000..d293a53
--- /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
GIT binary patch
literal 4276
zcmd^CYiuLc6~5=*@r*s58QU3;?f4Zx*5lnQ#96C%B
zt-r$h
zm$5!Gy--@Z^vs2`gwPn~6LZzGvxibA9E1p8BE%7%FPCP*uRZ%Va!S=TRVifqez>
zFEQ_$Uuc{eM1bSHi?6|IZMx)oQ@sKESFs*kD4kh?KJra$4`4mESXwBLPP9Hxi27Ze
zZ(*sn+<5%*-**w>_G0^af@^21?N#iL)y|uL&DBZa9G)+(z53*Ru7m$3PK*2I8$WrE
z6RonnArN*GR_%mxDJI@eA&(OLI!s(DyGya!
zt*I;w)yiB6$M4pV$6Emk_GHZiH)K3Bhu}&M`y@J
zQ@VJ$qmNIqH_0l}_!>V*_zmqgpY(spNXPY{br6F4#Jj@JyW{>CrF@1Putd$ETp*8N
zJwV(ju{Wir(Tp`y&2)3PIo3SdJkxyl;^j8#@8esr_lFbUh#&Ric55RNYS4k}pr}RM
z#Lh~%KL6j7(ow)Sx@vH8ty>wjMw*6|`QA2TRz^*dX3EOkPMc{fa}Q_^Tbb{7bIi)z
zCz?mC%q_Ti#>(7An&{s=<9?8fm#y6K9zt#*e}(Tslio~UW?pu`APD<~uOhSKcWgKP
zI{Hw7kW?XG%w>m?3G)!-izATrMZl|3tfvwpLSHUBO0mh@3s!vuM7l?lZ?WAfYnuE!
zSql%}bwJiyFY)UByNAOap(dZOJu)S`p3vl1dBdwmmnSpY!!CJB)-sdzW0p|Xp5WSO
zZ?FwK6?Bp$88U(^KS^fM&f^IU439Soxp;OI3ZDD`=w2}yPnd{{DD)XpJR#x|KHE7PaiK^==blz9tRxX;4M)L>xOHdLKS?!DadMkTGk4F&%aa<0{s}4QL#&KL6
zpO4GOA4zPJpvi|0rBb2udQiuwO|0_v?sz!p*A%A5``lv4
z4~>Gq=#zYs=mJqfN^wZ%dK@aIi)PwP7P81l7Y6{zqrf|Jx>phF+inN2ONy!}
zq6nZFY8)I6$>CH2Nsw)lUDN>F-jFNgaL~7-{ZV{czrVJm_XU9ALIw7t&$S*3Xim-P
zl085r(dpECG#75>?#w3jH#lmfv%_lyC^V#u+OE4jEb7q
z@6jo!s=J4KAi5#Y*U*mxB!Rnup2N*=FQ7v~GVY0Iqo~vOG$5+*ky`y%*kz_a7SvXD*|atvJ`w>pvXihEI9;GzvQ*lQf)
z{Xg`CxY=$Kh;3|)Z*9GzZ=Da(H_YJqt*tFeHY_K)V(j17Q=!$>Q0wT{7Lv!eT6$0D
z{MLBTM9j~i_HWn=Y?SOFr*N$a^vW@GQ8R;{%1sZgNdq%IK#N?A?uwd2F(f#{5=H?9
z{wSa;=dwuS_K8$~lp<3D`l8FJ3i7(w?hkkahxU8d1JLUff(fVLqdsFjUYhUM`_o!{
zU2PqSjRp0-w8IFjJL4hj6cw4TNAKGm9CSa^%fbrnO*s7_X86`4cYxrK6Y6H~!2`NW
zclZOFu{-+Igu&F{*v&TuH~EmR_|#ngrn_~)@VWy>Zu>;vrYab5Z8Mee@77!apKmiZ
z*{8<+p!SX*I~?BJg%QBI|F8@6KOL+R4Lv(V!X$+{B6`y6<7Zq#OvQ~9T&WEi@xryW
zhYzQR()h5|?Yrpu`xm;^*RRF&r(sS?_e?_TJ%szyY0tz&Yc14~x+f+(5vBc4w#GEP
zWyHyixJzlA-rENfp17UEGlhsBq{Vy&j{;m=sB_9njGwpck#kBspqx9W1meoMz;^Xq
zAn<{tbio#hyM@jho<~lCGZV-U9C;cuQg=k#f26;5dmItZ_9!oS)N8ldDg)Hb0WwMI
zxUyol4+{K*k5CQ$Z2$^*OpQPW%wihtgyynnLS9kAsFuc9#?8bSDrPa*`FXTMODjlx
z(PKRBWiSp7#d8=gP_~!b7ZNgHaKa%v3OU+vgdA(s+v}l<^t|E*=uz%nV-nr6Q;DtJ
ztMuSuq&zPv)YI#wYmN~7;|lK8ucEY`6t3#6_g)zk6o+GNN_F9p^PC{bv`0bW8j}Nd
zdq8GuZmjlDSrVR8ba1ItYYw<{P0iDLg>|KGuLrIk)4E%-H2n*n8w6u*C)kewOLoIP
z##Afp>*!t_v1sddX0x%MJ@su~zz_NR7f(Hn1>Lf-ac0}LiVmi+PGQ|>37ez8B|Uh9
z#Ty5o%kYSP!wTFO%S{`PhP`yI1LY0;#*SuAe9NOhNC
zCIYeSsH&M}ad-Hpgzh!qTq>W!hrU!aTenJ*-z*l=uxS?e8?M%OaxtGE-R9N{d&k0F
zUnaB%`d!8sgS-P?$av}@Z&{i_jCZ##=KmgyE~a>6iF7gEzR9jG77*Xi#Wsw~`7Rbw
zKGwxDp3ld-*opU@Iz|mVPjH@o@^BXe`r8k>nBpn$LKicXztY75;y-t>jrhnrT`Uqe
zur8L#DbTyvNld87hwJ51qdXIvIvcA@*A{1Miw$`P+*zJmsg~+H)t&NGxxQSfEynf@
z4DN`Imlw7?^J~mWDGKJ`tA>OxG6h
za(Wm)yG%-?f$td-BU9uozAI#!)W{-U{P??pyz3=*B7csokSg}Af2j3(_94C3mO5>xahz#n
z50LpzuO$q`8T{>h(GGv0^Q8;8>DFBwOa6cNqmlv?7zkj)&?kW%93X=e6i|t4s#H5&
zDLuGSYm^$eL$-Q(@zX2H+1kpPm1?CtRVmeksakbLdEPPxx6S=8l`GwT5PN=A)S!_0#YKa;s5{u
literal 0
HcmV?d00001
diff --git a/src/assets/style/variable.less b/src/assets/style/variable.less
new file mode 100644
index 0000000..7e73aae
--- /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 0000000..0978a52
--- /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 0000000..b7332f3
--- /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 0000000..f3354e6
--- /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 0000000..e60cd26
--- /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 0000000..4016d63
--- /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 0000000..c209aa1
--- /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 e69de29..a121d8a 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()]
+};
--
GitLab