# lcg-markdown-editor

> 这是一款基于 zx-markdown-editor 封装的 vue markdown 编辑器，在此基础上丰富了实时预览功能

Latest version **1.0.4** (published 2020-05-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install lcg-markdown-editor
pnpm add lcg-markdown-editor
yarn add lcg-markdown-editor
bun add lcg-markdown-editor
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2020-05-26 |
| First published | 2020-05-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 15.7 KB |
| Known vulnerabilities | 0 (+5 in 3 direct dependencies) |
| Install scripts | no |
| Author | lcg |
| Maintainers | mysofa |

## Links

- npm: https://www.npmjs.com/package/lcg-markdown-editor
- npm.io page: https://npm.io/package/lcg-markdown-editor

## Dependencies (6)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [marked](https://npm.io/package/marked.md) ^1.0.0
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [simplemde](https://npm.io/package/simplemde.md) ^1.11.2
- [font-awesome](https://npm.io/package/font-awesome.md) ^4.7.0
- [github-markdown-css](https://npm.io/package/github-markdown-css.md) ^4.0.0

## Recent versions

- 1.0.4 (latest) — 2020-05-26
- 1.0.3 — 2020-05-26
- 1.0.2 — 2020-05-26
- 1.0.1 — 2020-05-26
- 1.0.0 — 2020-05-26

## README

# lcg-markdown-editor(作者:河北钢谷<939138263@qq.com>)

这是一款基于 zx-markdown-editor 封装的 vue markdown 编辑器，在此基础上丰富了实时预览功能

## 鸣谢

```
努力了这么久,终于成了一名合格的代码搬运工,我只是有幸站在了巨人的肩膀上,感谢自己,感谢巨人...

```

## 实现功能

```
1.markdown编辑器的全部功能
2.支持实时预览
```

### 商务合作与赞赏

```
邮箱  939138263@qq.com
QQ 939138263

如果你觉得这个项目帮助到了你，你可以赞赏一下作者:
```

![image](https://raw.githubusercontent.com/chuzhixin/donate/master/donation.png)

## 安装方法

```
cnpm i -S lcg-markdown-editor

```

### 组件 main.js 全局引入

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

```
<template>
  <div id="app">
    <lcg-markdown-editor
      ref="mde"
      v-model="value"
      @show-html="handleShowHtml"
    ></lcg-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: "# lcg-markdown-editor",
      html: '<h1 id="lcg-markdown-editor">lcg-markdown-editor</h1>',
    };
  },
  methods: {
    handleAddText() {
      this.$refs.mde.add("\n### 新增加的内容");
    },
    handleAddImg() {
      this.$refs.mde.add(
        "\n![](https://s1.ax1x.com/2020/05/14/YB0Wb6.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>

```

---
_Source: https://npm.io/package/lcg-markdown-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._