Day08-整合富文本编辑器-p115

最新推荐文章于 2022-11-28 15:36:05 发布

小码哥呀

最新推荐文章于 2022-11-28 15:36:05 发布

阅读量350

点赞数

分类专栏：在线教育项目

本文链接：https://blog.csdn.net/qq_46112274/article/details/114644858

版权

68 篇文章 6 订阅

订阅专栏

一、Tinymce可视化编辑器

下载好的组件解压后里面有两个文件夹，如下图所示：

在这里插入图片描述

将两个文件夹中的文件分别放到前端工程中对应文件夹内，需要找到前端工程在本地磁盘的位置，不能直接复制到vscode中对应文件夹。
在这里插入图片描述

在这里插入图片描述

,
templateParameters: {
    BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
}

添加后：
在这里插入图片描述

在项目根目录下的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>

在这里插入图片描述
代码

import Tinymce from '@/components/Tinymce'//引入组件
components: { Tinymce },//声明组件

在这里插入图片描述

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

在info.vue文件的最后添加如下代码，调整上传图片按钮的高度
在这里插入图片描述

//scoped是该样式的一个属性，表示该样式只在该页面有效
<style scoped>
.tinymce-container {
  line-height: 29px;
}
</style>

在这里插入图片描述