借用了,看过一个项目就是有一个模块用到了富文本编辑器,先收藏起来~
前端的水太深了,在使用vue-element-admin整合富文本的时候走了不少弯路,踩了不少坑。
在网上查了一些博客,但是问题都没能解决好此问题,要么是版本不对应,我使用的是vue-element-admin最新的 版本,目录结构发生了一些变化,要么是整合过来富文本显示为空白。因此想记录一下,供其他人一些参考:
最新版的vue-element-admin整合tinymce是非常简单的,省去了之前版本的复杂。
首先我们去到官网,将tinymce组件下载下来,文件本身不大,下载很快。
将下载下来的文件拷贝到项目的src/components下
在所需的页面中引入组件,代码如下:
<template>
<div class="app-container">
<tinymce :height="300" v-model="content"/>
</div>
</template>
<script>
import Tinymce from "@/components/Tinymce"
export default {
components: {
Tinymce
},
data() {
return {
content: "welcome to tinymce!"
}
},
}
</script>
启动项目后页面的样式
因为tinymce默认为英文,所以需要在文件中修改一下配置,在index.vue的120行左右,将en修改为zh
最后页面的样式