vue使用富文本编辑器

最新推荐文章于 2024-05-12 18:14:33 发布

是三金阿

最新推荐文章于 2024-05-12 18:14:33 发布

阅读量468

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41230572/article/details/115262279

版权

vue 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

1.static添加组件
在这里插入图片描述

2.使用webpack需要在build/webpack.dev.conf.js 中找到中添加配置

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

new HtmlWebpackPlugin({
…,
templateParameters: {
BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
}
})

  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    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.在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>
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>在线教育后台</title>
    <script src=<%= BASE_URL %>/tinymce4.7.5/tinymce.min.js></script>
    <script src=<%= BASE_URL %>/tinymce4.7.5/langs/zh_CN.js></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

4.组件引用
在src/components中导入Tinymce
在这里插入图片描述
5.js引入组件

课程信息组件中引入 Tinymce

import Tinymce from '@/components/Tinymce'

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

6.Html组件模板

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

是三金阿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue使用富文本编辑器

1.static添加组件2.使用webpack需要在build/webpack.dev.conf.js 中找到中添加配置使在html页面中可是使用这里定义的BASE_URL变量new HtmlWebpackPlugin({…,templateParameters: {BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory}}) plugins: [ new webpack.DefinePlug
复制链接

扫一扫