实现网址: https://codepen.io/packy1980/pen/BayPrVO
官网文档: http://lpreterite.github.io/vue-tinymce/#/
1.下载安装
yarn add @packy-tang/vue-tinymce
# or
npm install @packy-tang/vue-tinymce
2.下载 之后 在 index.html 中引入
先将node_modules下的 tinymce 文件复制到static 下
<script src="./static/tinymce/tinymce.min.js"></script>
下拉框层级可能不够 看不到下拉框显示
就在上面那行代码下引入一下代码
覆盖原有样式
<style>
.tox-tinymce-aux {
// 未显示的下拉框class
z-index: 3000 !important
}
</style>
3.main.js 中引入
import VueTinymce from '@packy-tang/vue-tinymce' // 富文本编辑器
import 'tinymce/plugins/table' // 表格插件
import 'tinymce/icons/default/icons'
import tinymce from 'tinymce'
Vue.prototype.$tinymce = tinymce
// 安装组件
Vue.use(VueTinymce)
4.vue中直接使用
<vue-tinymce
id="textarea"
v-model="content"
:setup="setup"
:setting="setting">
</vue-tinymce>
5.在 vue 对应的 js 中
加入配置项 ---- 表格啥的乱七八糟的 基本上想要的功能就全了
data () {
return {
content: "", // 这个是文本框里的内容
setting: {
menubar: true,
toolbar: "undo redo | fullscreen | formatselect alignleft aligncenter alignright
alignjustify | link unlink | numlist bullist | image media table | fontselect
fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent
outdent | superscript subscript | removeformat |",
toolbar_drawer: "sliding",
quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough |
fontsizeselect forecolor backcolor",
plugins: "link image media table lists fullscreen quickbars",
language: 'zh_CN',
language_url: 'https://lab.uxfeel/node_modules/tinymce/langs/zh_CN.js',
height: 500
}
}
}
6.完成之后案例
安装 使用 ------
配置 表格 ------
下面是遇到的问题及解决
问题:先是为了回显 由于是在弹层中使用 所以加了v-if=”drawer” drawer是弹层是否弹出还是关闭的自定义属性(true/false) 加完之后回显没问题了 但是获取编辑器内容获取不到了 于是
解决办法:
加入change事件 是改变编辑器内容就会返回val 直接在事件下赋值 编辑器内容就会获取到, v-model 后端返回的值也要改编成 :content="contentTex"
全部代码:
这是VUE中改法
<vue-tinymce
id="textarea"
v-if="drawer"
:content="contentTex"
@change="changeTinyMce"
:setup="setup"
:setting="setting">
</vue-tinymce>
// 富文本编辑器 编辑器内容改变就触发 获取VAL --- js中
changeTinyMce (val) {
this.contentTex = val // 把变化的值赋给this.contentTex
},
// contentTex 是在data中命的空值
onSubmit () { // 编辑、新增提交
this.ruleForm.contentTex = this.contentTex
// 将 上面拿到的 值 赋给即将要传给后端的 form表单中 的contentTex
Request.onSubmit(this)
},
data() {
Return {
contentTex: “”, // 编辑器内容
ruleForm: {
contentTex: null // 内容
}
}
}
以上代码要自上而下执行 按顺序赋值 按理说是不会出错了 不按理说 我也不会啊
再一个是啥呢 就是这个步骤全部完事之后 会报个错 会说 setup 报错
解决一下就是
在初始化 mounted () 加 this.setup()
在事件函数里加 methods () 加 setup(editor) {}
更多推荐
vue项目实现富文本编辑器(实践用过)
发布评论