富文本编辑器Tinymce

最新推荐文章于 2025-07-11 17:05:18 发布

Fairy要carry

最新推荐文章于 2025-07-11 17:05:18 发布

阅读量774

点赞数

CC 4.0 BY-SA版权

分类专栏：项目文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/weixin_57128596/article/details/126080076

项目专栏收录该内容

9 篇文章

订阅专栏

本文档详细介绍了如何在Vue项目中集成并配置Tinymce富文本编辑器。步骤包括：1)将脚本库复制到项目static目录；2)在webpack.dev.conf.js中配置html变量；3)在index.html中引入js脚本；4)复制并引入组件；5)设置组件模板和基础样式。通过这些步骤，可以在课程信息等场景中方便地使用Tinymce进行文本编辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、复制脚本库

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

2、配置html变量

在 guli-admin/build/webpack.dev.conf.js 中添加配置

使在html页面中可是使用这里定义的BASE_URL变量

   new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon: resolve('favicon.ico'),
      title: 'vue-admin-template',
      templateParameters: {
        BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
     }
    })
  ]
})

3、引入js脚本

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

<script src=<%= BASE_URL %>/tinymce4.7.5/tinymce.min.js></script>
<script src=<%= BASE_URL %>/tinymce4.7.5/langs/zh_CN.js></script

4.复制组件

src/components/Tinymce

课程信息组件中引入 Tinymce

import Tinymce from '@/components/Tinymce'

export default {
  components: { Tinymce },
  ......
}

5.组件模板与基础样式

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

<style scoped>
.tinymce-container {
  line-height: 29px;
}
</style>