zoukankan      html  css  js  c++  java
  • vue整合富文本编辑器

    1.vue整合富文本编辑器Tinymce

    Tinymce是一个传统的JavaScript组件,默认不能用于vue.js因此需要做一些特殊的整合步骤,具体代码和组件下载可参考https://gitee.com/gateway-1997/eduservice.git

    2.组件初始化

    2.1将脚本库复制到项目的static目录下

    2.2配置html变量

    在 /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
          }
        })

    2.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>

    3.组件引入

    3.1复制组件

    将下载好的组件复制到src/components/Tinymce

    3.2引入组件

    import Tinymce from '@/components/Tinymce'
    export default {
      components: { Tinymce },
      ......
    }

    3.2组件模板

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

    3.3组件样式

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

    3.4图片的base64编码

    Tinymce中的图片上传功能直接存储的是图片的base64编码,因此无需图片服务器

    一点点学习,一丝丝进步。不懈怠,才不会被时代所淘汰!

  • 相关阅读:
    Python的条件判断和循环
    Python分支和循环结构的练习
    Python的变量和运算符
    Python简介
    Git的使用及网络编程多线程多进程
    函数面向对象编程及文件的读取
    函数模块字符串列表
    python变量运算符分支结构循环结构及例题
    集合
    三级菜单
  • 原文地址:https://www.cnblogs.com/fqh2020/p/14697352.html
Copyright © 2011-2022 走看看