1. 全栈程序员必看首页

vue2 renrne 引入tinymce[通俗易懂]

全栈程序员-站长 • • 未分类 • 阅读 81

vue2 renrne 引入tinymce[通俗易懂]tinymce1.引入和原始使用下载地址:https://www.tiny.cloud/get-tiny/self-hosted/语言包地址:https://www.tiny.clou

大家好，又见面了，我是你们的朋友全栈君。

tinymce

1.引入和原始使用

下载 地址 : https://www.tiny.cloud/get-tiny/self-hosted/

语言包 地址: https://www.tiny.cloud/get-tiny/language-packages/

# vue2.0版本应该使用
npm install --save "@tinymce/tinymce-vue@^3"


# vue3.0版本应该使用
npm install --save "@tinymce/tinymce-vue@^4"


# 再运行 
npm install tinymce -S

安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下

结构 如:
static

tinymce

skins

zh_CN.js

在页面中引入以下文件


import tinymce from "tinymce/tinymce";
import "tinymce/themes/silver/theme";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/icons/default/icons";
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";

tinymce-vue 是一个组件，需要在 components 中注册，

 components: { Editor },

然后直接使用

<Editor id="tinymce" v-model="tinymceHtml" :init="editorInit"></Editor>

编辑器需要一个 skin 才能正常工作，所以要设置一个 skin_url 指向之前复制出来的 skin 文件

editorInit: {
    language_url: '/static/tinymce/zh_CN.js',
    language: 'zh_CN',
    skin_url: '/static/tinymce/skins/ui/oxide', // skin路径
    height: 300, // 编辑器高度
    branding: false, // 是否禁用“Powered by TinyMCE”
    menubar: true, // 顶部菜单栏显示
    plugins: this.plugins,
    toolbar: this.toolbar,
}

同时在 mounted 中也需要初始化一次：

mounted (){
	tinymce.init({});
},

如果在这里传入上面的 init 对象，并不能生效，但什么参数都不传也会报错，所以这里传入一个空对象

https://blog.csdn.net/zjiang1994/article/details/79880806

https://blog.csdn.net/zjiang1994/article/details/79856058

完成了上面的初始化之后，就已经能正常运行编辑器了，但只有一些基本功能

tinymce 通过添加插件 plugins 的方式来添加功能

比如要添加一个上传图片的功能，就需要用到 image 插件，添加超链接需要用到 link 插件

<template>
  <div class='tinymce'>
    <h1>tinymce</h1>
    <editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
    <div v-html='tinymceHtml'></div>
  </div>
</template>

<script>
import tinymce from "tinymce/tinymce";
import "tinymce/themes/silver/theme";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/icons/default/icons";
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
  
export default {
  name: 'tinymce',
  data () {
    return {
      tinymceHtml: '请输入内容',
      init: {
          language_url: '/static/tinymce/zh_CN.js',
          language: 'zh_CN',
          skin_url: '/static/tinymce/skins/ui/oxide', // skin路径
          content_css:'/static/tinymce/skins/content/default/content.css',
          height: 300, // 编辑器高度
          branding: false, // 是否禁用“Powered by TinyMCE”
          menubar: true, // 顶部菜单栏显示
          font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif',
          fontsize_formats:'12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px 50px 60px 70px 80px 90px 100px 120px 140px 160px 180px 200px',
          plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
          toolbar:'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
      }
    }
  },
  mounted () {
    tinymce.init({})
  },
  components: {Editor}
}
</script>

但是当富文本在某一个弹窗上使用时，

工具栏会出现下拉选择时的层级比弹窗的小，所以，选项会被弹窗遮挡。

而解决这个问题，需要把工具栏的下拉框的层级提高，

找到static/tinymce/skins/ui/oxide/skin.min.css文件

把class名为tox-tinymce-aux的第一个的z-index属性变大即可

tinymce 提供了 images_upload_url 等 api 让用户配置上传图片的相关参数

但为了在不麻烦后端的前提下适配自家的项目，还是得用 images_upload_handler 来自定义一个上传方法

     images_upload_handler: (blobInfo, success, failure) => {
       // const img = 'data:image/jpeg;base64,' + blobInfo.base64();
      // success(img);
       this.handleImgUpload(blobInfo, success, failure);
     }

这个方法会提供三个参数：blobInfo, success, failure

其中 blobinfo 是一个对象，包含上传文件的信息

success 和 failure 是函数，上传成功的时候向 success 传入一个图片地址，失败的时候向 failure 传入报错信息

handleImgUpload (blobInfo, success, failure) {
      // 上传的文件信息
        let fd = new FormData();
        fd.append("file", blobInfo.blob());
        fd.append("type","tinymec")
        this.$http({
          url: this.$http.adornUrl(
            "/localUpload/uploadForType" 
          ),
          method: "post",
          data: fd,
          headers: {
            "Content-Type":
              "multipart/form-data;boundary=" + new Date().getTime(),
            "token": this.$cookie.get('token')
          },
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: data.path + ",操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                 success(data.path)
              },
            });
          } else {
            failure('error')
          }
        });
}

2.模块封装

<template>
  <Editor id="tinymce" v-model="editHtml" :init="editorInit" @change="changeEdit" ></Editor>
</template>

<script>
import tinymce from "tinymce/tinymce";
import "tinymce/themes/silver/theme";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/icons/default/icons";
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";

export default {
  props: {
    value: {
      //父组件传进来的默认值
      default: "",
    },
  },
  components: { Editor },

  Myeditmounted() {
    tinymce.init({});
  },
  created() {},
  data() {
    return {
      editHtml: "",
      editorInit: {
        language_url: "/static/tinymce/zh_CN.js",
        language: "zh_CN",
        skin_url: "/static/tinymce/skins/ui/oxide", // skin路径
        content_css: "/static/tinymce/skins/content/default/content.css",
        height: 300, // 编辑器高度
        branding: false, // 是否禁用“Powered by TinyMCE”
        menubar: true, // 顶部菜单栏显示
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif",
        fontsize_formats:
          "12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px 50px 60px 70px 80px 90px 100px 120px 140px 160px 180px 200px",
        plugins:
          "link lists image code table colorpicker textcolor wordcount contextmenu",
        toolbar:
          "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat",
        images_upload_handler: (blobInfo, success, failure) => {
          // const img = "data:image/jpeg;base64," + blobInfo.base64();
          // success(img);
           this.handleImgUpload(blobInfo, success, failure);
          
        },
      },
    };
  },
  watch: {
    value: {
      //data改变的时候同步到子组件
      deep: true,
      handler(value) {
        this.editHtml = value;
        // console.log(value);
      },
      
    },
    editHtml: {
      //data改变的时候同步到子组件
      deep: true,
      handler(val) {
        this.$emit('update:value', val);
        console.log(val);
        // console.log(this.value);
      },
      
    },
  },
  methods: {
    handleImgUpload (blobInfo, success, failure) {
      // 上传的文件信息
        let fd = new FormData();
        fd.append("file", blobInfo.blob());
        fd.append("type","tinymec")
        this.$http({
          url: this.$http.adornUrl(
            "/file/uploadForType" 
          ),
          method: "post",
          data: fd,
          headers: {
            "Content-Type":
              "multipart/form-data;boundary=" + new Date().getTime(),
            "token": this.$cookie.get('token')
          },
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: data.path + ",操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                 success(data.path)
              },
            });
          } else {
            failure('error')
          }
        });
},
    changeEdit(){
        console.log(1111);
    },
  },
};
</script>

<style>
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/155091.html原文链接：https://javaforall.net

赞 (0)
0 0

关于作者

全栈程序员-站长的头像

全栈程序员-站长

133.5K 文章
3 粉丝
本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”
上一篇 2022年7月2日 下午9:36
下一篇 2022年7月2日 下午9:46


相关推荐

  • 用Python进行web开发需要学习什么?「建议收藏」

    用Python进行web开发需要学习什么?「建议收藏」

    第一步：HTMLHTML是网页的核心，学好HTML是成为Web开发人员的基本条件。HTML很容易学习的，但也很容易误用，要学精还得费点功夫。　　随着HTML5的发展和普及，了解HTML5也将成为Web开发人员的必修课。　　涉及到网页外观时，就需要学习CSS了，它可以帮你把网页做得更美观。　　利用HTML和CSS模拟一些你所见过的网站的排版和布局（色彩，图片，文字样式等等）。第二步：学习javascript,了解DOMJavaScript是一种能让你的网页更加生动活泼的程序语言。学习JavaScr

    全栈程序员-站长的头像 全栈程序员-站长
    2022年4月11日
    42
  • css修改导航条样式

    css修改导航条样式

    css修改导航条样式css 修改导航条样式近期由于工作需要要修改 table 表格导航条样式 本人特整理出相关代码 以及最后效果 供各位小伙伴参考 具体代码如下 xp table content webkit scrollbar width 8px height 8px xp table content webkit scrollbar thumb horizontal border radius 10px background rgba 0 0 0 0

    全栈程序员-站长的头像 全栈程序员-站长
    2026年3月17日
    2
  • VMware安装RedFlag Linux Desktop 5.0「建议收藏」

    VMware安装RedFlag Linux Desktop 5.0「建议收藏」

    VMware安装RedFlag Linux Desktop 5.0「建议收藏」第一次安装的时候提示找不到硬盘,google了一下,原来在新建虚拟机的时候要选择”OtherLinux2.6.xkernel”,另外SCSI适配器选择“LSILogic”。这样就ok了.

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月20日
    12
  • 小米将多枚“kimi”商标转让给月之暗面 月之暗面

    小米将多枚“kimi”商标转让给月之暗面

    小米将多枚“kimi”商标转让给月之暗面

    Ai探索者的头像 Ai探索者
    2026年3月12日
    2
  • binlog日志记录什么内容_mysqlbinlog日志在哪

    binlog日志记录什么内容_mysqlbinlog日志在哪

    binlog日志记录什么内容_mysqlbinlog日志在哪（一）binlog介绍binlog,即二进制日志,它记录了数据库上的所有改变，并以二进制的形式保存在磁盘中；它可以用来查看数据库的变更历史、数据库增量备份和恢复、Mysql的复制（主从数据库的复制）。（二）binlog格式binlog有三种格式：Statement、Row以及Mixed。–基于SQL语句的复制(statement-basedreplic

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月14日
    7
  • C语言程序设计第五版谭浩强课后答案 第五章习题答案

    C语言程序设计第五版谭浩强课后答案 第五章习题答案

    C语言程序设计第五版谭浩强课后答案 第五章习题答案第五章 1 请画出例 5 6 中给出的 3 个程序段的流程图流程图 1 流程图 2 流程图 3 2 请补充例 5 7 程序 分别统计当 fabs t gt le 6 和 fabs t gt le 8 时执行循环体的次数 fabs t gt le 6 示例代码 include stdio h include math h intmain intsign 1 doublepi 0 0 term 1 0 i math h stdio h

    全栈程序员-站长的头像 全栈程序员-站长
    2026年3月18日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号