feat:第一版

77c78aa2 · 璃白. · 95dde5e4 · 77c78aa2 · 77c78aa2 · 77c78aa2
7 changed file
--- a/dist/index.html
+++ b/dist/index.html
@@ -9,7 +9,7 @@
  </head>
  <body>
    <div id="app"></div>
-    <script src="./bundle.js"></script>
+    <script src="./markdown-editor.js"></script>
    <script>
      new MdEditor({
        el: "#app", // required
@@ -20,18 +20,21 @@
          textColorActive: "#000"
        },
        canAttachFile: true,
+        placeholder: "请输入内容",
        onChange: function(res) {
          console.log(res);
        },
-        onUpload: function(fileList, callback) {
+        onUpload: function(file, callback) {
          new Promise((res, rej) => {
            setTimeout(() => {
-              res(fileList);
+              res(file);
            }, 2000);
          }).then(res => {
-            callback(
-              "https://img2.baidu.com/it/u=3681880960,455182084&fm=26&fmt=auto&gp=0.jpg"
-            );
+            var reader = new FileReader();
+            reader.readAsDataURL(res);
+            reader.onload = () => {
+              callback(reader.result);
+            };
          });
        }
      });

--- a/src/assets/js/utils.js
+++ b/src/assets/js/utils.js
-import store from '@/store'
+import store from "@/store";

 // 获取选中文本信息

@@ -8,21 +8,36 @@ export function getSelectionInfo(selectorId) {
  const { selectionStart = 0, selectionEnd = 0 } = selector;
  if (selectionStart === selectionEnd) return "";
  return {
+    selectorId,
    selectionStart,
    selectionEnd
  };
 }

+export const getPosition = function(selectorId) {
+  const element = document.getElementById(selectorId);
+  let cursorPos = 0;
+  if (document.selection) {
+    //IE
+    var selectRange = document.selection.createRange();
+    selectRange.moveStart("character", -element.value.length);
+    cursorPos = selectRange.text.length;
+  } else if (element.selectionStart || element.selectionStart == "0") {
+    cursorPos = element.selectionStart;
+  }
+  return cursorPos;
+};
+
 // 工具栏格式化文本
 export function formatText(text, selectionInfo, startStr = "", endStr = "") {
-  if (!selectionInfo) return text + startStr + endStr;
-  return (
+  if (!selectionInfo) return;
+  const newText =
    text.slice(0, selectionInfo.selectionStart) +
    startStr +
    text.slice(selectionInfo.selectionStart, selectionInfo.selectionEnd) +
    endStr +
-    text.slice(selectionInfo.selectionEnd)
-  );
+    text.slice(selectionInfo.selectionEnd);
+  return newText;
 }

 //
@@ -67,7 +82,7 @@ export function initStyle({
  }
 }

-// 
+//
 export function isNotEmpty(val) {
  return val !== null && val !== undefined;
 }
--- a/src/components/content/md-textarea.vue
+++ b/src/components/content/md-textarea.vue
@@ -7,6 +7,7 @@
      @blur="setFocus(false)"
      @paste="pasteFile"
      v-model="textContent"
+      :placeholder="placeholder"
      rows="10"
    >
    </textarea>
@@ -19,7 +20,7 @@
 </template>
 <script>
 import { mapState, mapMutations } from "vuex";
-import { getSelectionInfo } from "@/assets/js/utils";
+import { getSelectionInfo, getPosition } from "@/assets/js/utils";
 export default {
  data() {
    return {
@@ -43,32 +44,40 @@ export default {
    document.removeEventListener("mouseup", this.checkSelection);
  },
  computed: {
-    ...mapState(["text", "fullScreen"])
+    ...mapState(["text", "fullScreen", "placeholder"])
  },
  methods: {
    ...mapMutations([
      "setText",
      "setFullScreen",
      "setSelectionInfo",
+      "setFileList",
      "setFocus"
    ]),
    checkSelection() {
      const info = getSelectionInfo(this.id);
-      if (!info) return;
+      if (!info) {
+        const cursorPoint = getPosition(this.id);
+        this.setSelectionInfo({
+          selectorId: this.id,
+          selectionStart: cursorPoint,
+          selectionEnd: cursorPoint
+        });
+        return;
+      }
      this.setSelectionInfo(info);
    },
    pasteFile(event) {
      let fileList = [];
      const items = (event.clipboardData || window.clipboardData).items;
      for (let i = 0; i < items.length; i++) {
-        console.log(items[i]);
        if (items[i].type.indexOf("image") !== -1) {
          fileList.push(items[i].getAsFile());
          break;
        }
      }
      if (!fileList.length) return;
-      console.log(fileList);
+      this.setFileList(fileList[0]);
    }
  }
 };

--- a/src/components/footer/upload-files.vue
+++ b/src/components/footer/upload-files.vue
@@ -8,7 +8,6 @@
      name="md-upload-file"
      id="md-upload-file"
      @change="upload"
-      multiple
    />
    <span>添加附件</span>
  </div>
@@ -27,7 +26,7 @@ export default {
    ...mapMutations(["setText", "setFileList"]),
    upload(e) {
      const fileList = Array.from(e.target.files);
-      this.setFileList(fileList);
+      this.setFileList(fileList[0]);
    }
  }
 };

--- a/src/main.js
+++ b/src/main.js
@@ -9,15 +9,23 @@ import "@/assets/style/global.less";
 Vue.use(Vtip.directive);

 function initMdEditor(obj) {
-  const { el, onChange, onUpload, canAttachFile, themeOptions } = obj;
+  const {
+    el,
+    onChange,
+    onUpload,
+    placeholder,
+    canAttachFile,
+    themeOptions
+  } = obj;
  if (!el || !document.querySelector(el)) throw new Error("请指定容器");
  if (isNotEmpty(themeOptions)) initStyle(themeOptions);
  if (isNotEmpty(canAttachFile))
    store.commit("setCanAttachFile", canAttachFile);
+  if (isNotEmpty(placeholder)) store.commit("setPlaceholder", placeholder);

  new Vue({
    store,
-    render: (h) =>
+    render: h =>
      h(App, {
        on: {
          change(val) {

--- a/src/store/index.js
+++ b/src/store/index.js
@@ -9,6 +9,7 @@ export default new Vuex.Store({
    fullScreen: false,
    isFocus: false,
    showPreview: false,
+    placeholder: "请输入内容",
    toolButtonList: [
      {
        name: "bold",
@@ -82,48 +83,47 @@ export default new Vuex.Store({
    ],
    fileList: "",
    ulNum: 1,
-    text: `
-# 标题一标题一标题一
-## 标题二标题二
-666\`行内代码\`666
-\`\`\`js
-// 是注释呀
-/**
-* @params x
-*/
-function fn() {
-  return null;
-}
-\`\`\`
-**粗体文字**
+    //     text: `
+    // # 标题一标题一标题一
+    // ## 标题二标题二
+    // 666\`行内代码\`666
+    // \`\`\`js
+    // // 是注释呀
+    // /**
+    // * @params x
+    // */
+    // function fn() {
+    //   return null;
+    // }
+    // \`\`\`
+    // **粗体文字**

-_斜体文字_
+    // _斜体文字_

-> 这段是引用的内容\n
-> 这段是引用的内容
-> 这段是引用的内容
+    // > 这段是引用的内容\n
+    // > 这段是引用的内容
+    // > 这段是引用的内容

-[链接](url)
+    // [链接](url)

+    // - 无序列表
+    // - 无序列表
+    // - 无序列表

- 无序列表
- 无序列表
- 无序列表
+    // 1. 有序列表
+    // 2. 有序列表
+    // 3. 有序列表

+    // - [ ] 任务列表
+    // - [x] 任务列表
+    // - [ ] 任务列表

-1. 有序列表
-2. 有序列表
-3. 有序列表
-
- [ ] 任务列表
- [x] 任务列表
- [ ] 任务列表
-
-| header | header |
-| ------ | ------ |
-| cell | cell |
-| cell | cell |`,
+    // | header | header |
+    // | ------ | ------ |
+    // | cell | cell |
+    // | cell | cell |`,
    selectionInfo: "",
+    text: "",
    html: "",
    canAttachFile: true
  },
@@ -155,6 +155,9 @@ _斜体文字_
    },
    setFileList(state, val) {
      state.fileList = val;
+    },
+    setPlaceholder(state, val) {
+      state.placeholder = val;
    }
  }
 });
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,7 +3,7 @@ const VueLoaderPlugin = require("vue-loader/lib/plugin");
 module.exports = {
  entry: path.resolve(__dirname, "./src/main.js"),
  output: {
-    filename: "bundle.js",
+    filename: "markdown-editor.js",
    path: path.resolve(__dirname, "dist")
  },
  devServer: {