-
-
-
+
+
+
@@ -14,7 +31,7 @@ import markdownHeader from "./components/header/md-header";
import markdownFooter from "./components/footer/md-footer";
import markdownEditor from "./components/content/md-textarea";
import markdownPreview from "./components/content/md-preview";
-import { mapState } from "vuex";
+import { formatText } from "@/assets/js/utils";
export default {
components: {
markdownHeader,
@@ -22,16 +39,71 @@ export default {
markdownEditor,
markdownPreview
},
- computed: {
- ...mapState([
- "showPreview",
- "isFocus",
- "canAttachFile",
- "text",
- "html",
- "fileList"
- ])
+ props: {
+ placeholder: {
+ type: String,
+ default: "请输入内容"
+ },
+ canAttachFile: {
+ type: Boolean,
+ default: true
+ }
},
+ data() {
+ return {
+ fullScreen: false,
+ isFocus: false,
+ showPreview: false,
+ fileList: [],
+ text: "",
+// text: `
+// # 标题一标题一标题一
+// ## 标题二标题二
+// 666\`行内代码\`666
+// \`\`\`js
+// // 是注释呀
+// /**
+// * @params x
+// */
+// function fn() {
+// return null;
+// }
+// \`\`\`
+// **粗体文字**
+
+// _斜体文字_
+
+// > 这段是引用的内容\n
+// > 这段是引用的内容
+// > 这段是引用的内容
+
+// [链接](url)
+
+// - 无序列表
+// - 无序列表
+// - 无序列表
+
+// 1. 有序列表
+// 2. 有序列表
+// 3. 有序列表
+
+// - [ ] 任务列表
+// - [x] 任务列表
+// - [ ] 任务列表
+
+// | header | header |
+// | ------ | ------ |
+// | cell | cell |
+// | cell | cell |`,
+ html: "",
+ selectionInfo: {
+ selectorId: "",
+ selectionStart: "",
+ selectionEnd: ""
+ }
+ };
+ },
+
watch: {
html: {
immediate: true,
@@ -46,7 +118,23 @@ export default {
immediate: false,
deep: true,
handler: function(val) {
- this.$emit("upload", val);
+ const _this = this;
+ if (!val.length) return;
+ this.$emit("upload", {
+ val: val[0],
+ callback: function(url) {
+ const originalText = _this.text;
+ const selectionInfo = _this.selectionInfo;
+ const newText = formatText(
+ originalText,
+ selectionInfo,
+ "\n\n![img](",
+ `${url})\n`
+ );
+ _this.text = newText;
+ }
+ });
+ this.fileList = [];
}
}
}
diff --git a/src/assets/js/utils.js b/src/assets/js/utils.js
index f294a7d224944d3a95c2b441351d576caad36220..39c704f411db2e6d2fd6772a61a05c558b62cdc5 100644
--- a/src/assets/js/utils.js
+++ b/src/assets/js/utils.js
@@ -1,5 +1,3 @@
-import store from "@/store";
-
// 获取选中文本信息
export function getSelectionInfo(selectorId) {
@@ -40,15 +38,6 @@ export function formatText(text, selectionInfo, startStr = "", endStr = "") {
return newText;
}
-//
-export function updateText(startStr, endStr) {
- const selectionInfo = store.state.selectionInfo;
- const originalText = store.state.text;
- const newText = formatText(originalText, selectionInfo, startStr, endStr);
- if (!newText) return;
- store.commit("setText", newText);
-}
-
// 初始化样式
export function initStyle({
borderColor,
diff --git a/src/components/content/md-preview.vue b/src/components/content/md-preview.vue
index 74adb2b8546f18fc0ff24b61762297001414c416..d9da964e0f983f151924f7137217d06aa362ccd0 100644
--- a/src/components/content/md-preview.vue
+++ b/src/components/content/md-preview.vue
@@ -4,18 +4,23 @@