• 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编码,因此无需图片服务器

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

  • 相关阅读:
    平衡二叉树的遍历/删除/新增/维护平衡因子
    二分查找算法(加法方式:斐波那契查找)
    Ubuntu14 配置开机自启动/关闭
    JAVA & JSON详解
    jQuery---EasyUI小案列
    jquery---基本标签
    NoSql---MongoDB基本操作
    Java框架篇---Mybatis 构建SqlSessionFactory
    Java框架篇---Mybatis 入门
    hessian入门
  • 原文地址:https://www.cnblogs.com/fqh2020/p/14697352.html
Copyright © 2020-2023  润新知