@packy-tang/vue-tinymce

A simple vue-based tinymce component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@packy-tang/vue-tinymce
17171.1.22 years ago5 years agoMinified + gzip package size for @packy-tang/vue-tinymce in KB

Readme

vue-tinymce
vue-tinymce
npm version vue tinymce NPM downloads
已支持vue3npm i @packy-tang/vue-tinymce@next 就可使用vue3版本支持。
提供给 vue 开发者使用的 TinyMCE 组件

目的

为开发人员简单使用 TinyMCE 的 Vue 组件。提供非常简单易懂的源代码提供给开发人员作为参考,当然你也可以直接使用这个组件到你的项目。发现问题可以提到 issue,期望你的反馈 👏。

如何使用

安装组件

```sh yarn add @packy-tang/vue-tinymce
or
npm install @packy-tang/vue-tinymce ```

引入

```html
<!-- 全局引入TinyMCE -->
<script src="//unpkg.com/tinymce@5.1.5/tinymce.min.js"></script>
<!-- App -->
<div id="app">
<vue-tinymce
v-model="content"
:setup="setup"
:setting="setting" />
</div>
```

其他使用例子

  • webpack使用例子:传送门(待补上)

属性

| 名称 | 描述 | | ---------- | ----------------------------------------------------- | | :content | 类型String,作为文本内容传入编辑器,可以使用v-model实现双向绑定 | | @change | 类型Function,编辑器中Input Change Undo Redo ExecCommand KeyUp NodeChange事件响应后触发的事件返回文本内容 | | :setting | 类型Object,编辑器的设置,setup不建议在这设置 | |:setup| 类型Function, 常用与自定义编辑器处理,组件内部做了些处理,建议在这里添加自定义的代码 |

更多使用细节

想了解更多内容请移步至使用细节