https://github.com/lpreterite/vue-tinymce
提供给 vue 开发者使用的 TinyMCE 组件
https://github.com/lpreterite/vue-tinymce
editor tinymce vue vue-component
Last synced: about 2 months ago
JSON representation
提供给 vue 开发者使用的 TinyMCE 组件
- Host: GitHub
- URL: https://github.com/lpreterite/vue-tinymce
- Owner: lpreterite
- License: mit
- Created: 2016-02-14T09:40:56.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-05-01T20:18:08.000Z (about 1 year ago)
- Last Synced: 2025-03-29T17:03:13.124Z (about 2 months ago)
- Topics: editor, tinymce, vue, vue-component
- Language: CSS
- Homepage: http://lpreterite.github.io/vue-tinymce/
- Size: 2.68 MB
- Stars: 183
- Watchers: 8
- Forks: 31
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-tinymce
[](https://www.npmjs.com/package/@packy-tang/vue-tinymce)
[](https://www.npmjs.com/package/@packy-tang/vue-tinymce)
提供给 vue 开发者使用的 TinyMCE 组件
## 目的
为开发人员简单使用 TinyMCE 的 Vue 组件。提供非常简单易懂的源代码提供给开发人员作为参考，当然你也可以直接使用这个组件到你的项目。发现问题可以提到 issue，期望你的反馈 👏。
## 如何使用
### 安装组件
```sh
yarn add @packy-tang/vue-tinymce
# or
npm install @packy-tang/vue-tinymce
```
### 引入
```html
import Vue from "vue"
import VueTinymce from "@packy-tang/vue-tinymce"
//安装组件
Vue.use(VueTinymce)
new Vue({
el: "#app",
data: function() {
return {
content: "<p>html content</p>",
setting: {
height: 500
}
}
},
methods: {
setup(editor) {
console.log(editor)
}
}
})
```
### 其他使用例子
- vue-cli使用例子：[传送门](https://github.com/lpreterite/vue-tinymce-example/tree/master/vue)
- webpack使用例子：传送门(待补上)
## 属性
| 名称 | 描述 |
| ---------- | ----------------------------------------------------- |
| `:content` | 类型`String`，作为文本内容传入编辑器，可以使用`v-model`实现双向绑定 |
| `@change` | 类型`Function`，编辑器中`Input` `Change` `Undo` `Redo` `ExecCommand` `KeyUp` `NodeChange`事件响应后触发的事件返回文本内容 |
| `:setting` | 类型`Object`，编辑器的设置，`setup`不建议在这设置 |
|`:setup`| 类型`Function`, 常用与自定义编辑器处理，组件内部做了些处理，建议在这里添加自定义的代码 |
### 更多使用细节
想了解更多内容请移步至[使用细节](http://lpreterite.github.io/vue-tinymce/#/Example)
## 本地调试
```sh
# 运行本地例子
$ npm run serve
# 构建
$ npm run build
# 发布版本
$ npm run release
```
## 构建支持
本仓库由[sao-esm](https://github.com/lpreterite/sao-esm)作为模板构建。
## License
Copyright (c) packy-tang [email protected]
根据[MIT协议](./LICENSE)的开源软件.