# ha-tinymce

> #### 演示案例：

Latest version **1.1.0** (published 2020-07-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install ha-tinymce
pnpm add ha-tinymce
yarn add ha-tinymce
bun add ha-tinymce
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-07-09 |
| First published | 2020-07-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 3.6 MB |
| Known vulnerabilities | 0 (+7 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | zhaohaha |

## Links

- npm: https://www.npmjs.com/package/ha-tinymce
- Repository: http://10.131.12.9:8181/repository/public-npm/
- Issues: http://10.131.12.9:8181/repository/public-npm/
- npm.io page: https://npm.io/package/ha-tinymce

## Dependencies (5)

- [tinymce](https://npm.io/package/tinymce.md) ^5.3.1
- [element-ui](https://npm.io/package/element-ui.md) ^2.12.0
- [font-awesome](https://npm.io/package/font-awesome.md) ^4.7.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.7.2
- [@tinymce/tinymce-vue](https://npm.io/package/@tinymce/tinymce-vue.md) ^3.2.2

## Recent versions

- 1.1.0 (latest) — 2020-07-09
- 0.0.1 — 2020-07-09
- 1.0.0 — 2020-07-02

## README

## 富文本编辑器

#### 演示案例：

1.创建一个vue.js项目并启动。

```
npm install -g @vue/cli @vue/cli-service-global' 
npm run dev
```
2.在入口文件 main.js中引入组件。
```
import csdcUI from 'csdc-tinymce/packages/index.js'
import 'csdc-tinymce/packages/style/index.scss'
Vue.use(csdcUI)

```
3.在template中添加DOM结构。
```
  <cs-tinymce
      ref="editor"
      v-model="msg"
      :disabled="disabled"
      height= '400'
      @onClick="onClick"
    />
    <div class="margin">
      <el-button type="primary" @click="clear">清空内容</el-button>
      <el-button type="primary" @click="disabled = !disabled">禁用</el-button>
    </div>

```
4.在script中定义数据与编写逻辑。
```
export default {
  name: 'home',
  data () {
    return {
      msg: `<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1><p style="text-align: center; font-size: 15px;"><ul>
        <li>Our <a href="//www.tinymce.com/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li><li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/">Community Forum</a>.</li><li>We also offer enterprise grade support as part of <a href="https://tinymce.com/pricing">TinyMCE premium subscriptions</a>.</li>
      </ul>`,
      disabled: false
    }
  },
  methods: {
    // 鼠标单击的事件
    onClick (e, editor) {
      console.log('Element clicked')
      console.log(e)
      console.log(editor)
    },
    // 清空内容
    clear () {
      this.$refs.editor.clear()
    }
  }
}
```

5.在style中编写CSS。
```
.container {
    width: 100%;
    height: 100%;
  }
```

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