当前位置:网站首页>Tinymce富文本编辑器实现步骤

Tinymce富文本编辑器实现步骤

2020-12-06 08:11:18 osc_w4iy68wg

一 Tinymce可视化编辑器

参考:https://panjiachen.gitee.io/vue-element-admin/#/components/tinymce

二 组件初始化

Tinymce是一个传统javascript插件,默认不能用于Vue.js因此需要做一些特殊的整合步骤

1 复制脚本库

将脚本库复制到项目的static目录下(在vue-element-admin-master的static路径下)

2 引入js脚本

在guli-admin/index.html 中引入js脚本

<script src="/static/tinymce4.7.5/tinymce.min.js"></script>
<script src="/static/tinymce4.7.5/langs/zh_CN.js"></script>

三 组件引入

为了让Tinymce能用于Vue.js项目,vue-element-admin对Tinymce进行了封装,下面将它引入到课程信息页面

1 复制组件

src/components/Tinymce(在vue-element-admin-master的src路径下)

2 引入组件

Info.vue 组件中引入 Tinymce

  // 注册富文本组件
  components: { Tinymce },

3 使用组件

      <!-- 课程简介-->
      <el-form-item label="课程简介">
        <tinymce :height="300" v-model="courseInfo.description"/>
      </el-form-item>

4 组件样式

<style>
.tinymce-container {
  position: relative;
  line-height: normal;
}
</style>

四 测试

版权声明
本文为[osc_w4iy68wg]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4301811/blog/4776527