更新记录

0.0.1（2020-05-04） 下载此版本

zx-markdown-editor第一版发布

平台兼容性

简版演示地址

全功能演示地址，点击登录即可访问

说明

同时支持 PC 端 web 项目 和 uniapp

本地启动方法

cnpm i

cnpm run serve

安装方法（uniapp 使用前请学习 npm 使用方法）

uni-app 引用 npm 第三方库

cnpm i -S zx-markdown-editor

组件 main.js 全局引入

import Vue from "vue";
import App from "./App.vue";
import ZxMarkdownEditor from "./components/export.js";
Vue.component("byui-markdown-editor", ZxMarkdownEditor);
Vue.config.productionTip = false;
new Vue({
  render: (h) => h(App),
}).$mount("#app");

<template>
  <div id="app">
    <byui-markdown-editor
      ref="mde"
      v-model="value"
      @show-html="handleShowHtml"
    ></byui-markdown-editor>
    <button @click="handleAddText">增加文本</button>&nbsp;&nbsp;&nbsp;
    <button class="ivu-ml" @click="handleAddImg">增加图片</button>
    <div v-html="html"></div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: "# vue-admin-beautiful",
      html: '<h1 id="vue-admin-beautiful">vue-admin-beautiful</h1>',
    };
  },
  methods: {
    handleAddText() {
      this.$refs.mde.add("\n### 新增加的内容");
    },
    handleAddImg() {
      this.$refs.mde.add(
        "\n![](https://chu1204505056.gitee.io/byui-bookmarks/img/ewm.png)"
      );
    },
    handleShowHtml(html) {
      this.html = html;
    },
  },
};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-color: #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 2px;
}
</style>