代码拉取完成,页面将自动刷新
提供给 vue 开发者使用的 TinyMCE 组件
为开发人员简单使用 TinyMCE 的 Vue 组件。提供非常简单易懂的源代码提供给开发人员作为参考,当然你也可以直接使用这个组件到你的项目。发现问题可以提到 issue,期望你的反馈 👏。
yarn add @packy-tang/vue-tinymce
# or
npm install @packy-tang/vue-tinymce
<template>
<!-- 全局引入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>
</template>
<script>
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)
}
}
})
</script>
名称 | 描述 |
---|---|
:content |
类型String ,作为文本内容传入编辑器,可以使用v-model 实现双向绑定 |
@change |
类型Function ,编辑器中Input Change Undo Redo ExecCommand KeyUp NodeChange 事件响应后触发的事件返回文本内容 |
:setting |
类型Object ,编辑器的设置,setup 不建议在这设置 |
:setup |
类型Function , 常用与自定义编辑器处理,组件内部做了些处理,建议在这里添加自定义的代码 |
想了解更多内容请移步至使用细节
# 运行本地例子
$ npm run serve
# 构建
$ npm run build
# 发布版本
$ npm run release
本仓库由sao-esm作为模板构建。
Copyright (c) packy-tang lpreterite@126.com
根据MIT协议的开源软件.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型