富文本编辑器

富文本编辑器官网
http://tinymce.ax-z.cn
安装

npm install tinymce -S
npm install @tinymce/tinymce-vue -S

下载语言包
语言包

下载完之后在项目里新建public文件夹

1)在public目录下新建tinymce文件夹,并将下载的语言包解压到该目录下

2)在node_modules里面找到tinymce,将skins目录复制到public/tinymce里面

<template>
    <div class="tinymce-editor">
        <Editor
                :id="tinymceId"
                :init="init"
                :disabled="disabled"
                v-model="myValue"
                @onClick="onClick"
        ></Editor>
    </div>
</template>
<script>
  import axios from "axios";
  import tinymce from 'tinymce/tinymce' //tinymce默认hidden,不引入不显示
  import Editor from '@tinymce/tinymce-vue'//编辑器引入
  import 'tinymce/themes/silver/theme'//编辑器主题
  import 'tinymce/icons/default'  //引入编辑器图标icon,不引入则不显示对应图标
  // 引入编辑器插件(基本免费插件都在这儿了)
  import 'tinymce/plugins/advlist'  //高级列表
  import 'tinymce/plugins/autolink'  //自动链接
  import 'tinymce/plugins/link'  //超链接
  import 'tinymce/plugins/image'  //插入编辑图片
  import 'tinymce/plugins/lists' //列表插件
  import 'tinymce/plugins/charmap'  //特殊字符
  import 'tinymce/plugins/media' //插入编辑媒体
  import 'tinymce/plugins/wordcount'// 字数统计
  import Cookies from "js-cookie";
  const fonts = [
    "宋体=宋体",
    "微软雅黑=微软雅黑",
    "新宋体=新宋体",
    "黑体=黑体",
    "楷体=楷体",
    "隶书=隶书",
    "Courier New=courier new,courier",
    "AkrutiKndPadmini=Akpdmi-n",
    "Andale Mono=andale mono,times",
    "Arial=arial,helvetica,sans-serif",
    "Arial Black=arial black,avant garde",
    "Book Antiqua=book antiqua,palatino",
    "Comic Sans MS=comic sans ms,sans-serif",
    "Courier New=courier new,courier",
    "Georgia=georgia,palatino",
    "Helvetica=helvetica",
    "Impact=impact,chicago",
    "Symbol=symbol",
    "Tahoma=tahoma,arial,helvetica,sans-serif",
    "Terminal=terminal,monaco",
    "Times New Roman=times new roman,times",
    "Trebuchet MS=trebuchet ms,geneva",
    "Verdana=verdana,geneva",
    "Webdings=webdings",
    "Wingdings=wingdings,zapf dingbats"
  ];
  export default {
    components: {
      Editor
    },
    props: {
      //内容
      value: {
        type: String,
        default: ''
      },
      //是否禁用
      disabled: {
        type: Boolean,
        default: false
      },
      //插件
      plugins: {
        type: [String, Array],
        default: 'advlist autolink link image lists charmap  media wordcount'
      },
      //工具栏
      toolbar: {
        type: [String, Array],
        default: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table'
      }
    },
    data() {
      return {
        //初始化配置
        tinymceId: 'tinymce',
        myValue :this.value,
        init: {
          selector: '#tinymce',
          language_url: '/tinymce/langs/zh_CN.js',//汉化路径是自定义的,一般放在public或static里面
          language: 'zh_CN',
          skin_url: '/tinymce/skins/ui/oxide',//皮肤
          plugins: this.plugins,//插件
          //工具栏
          toolbar: this.toolbar,
          toolbar_location: '/',
          fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px',  //字体大小
          font_formats: fonts.join(";"),
          height: 500,//高度
          placeholder: '在这里输入文字',
          branding: false,//隐藏右下角技术支持
          //图片上传
          images_upload_handler: function (blobInfo, success, failure) {
            //文件上传的formData传递,忘记为什么要用这个了
            const isAccord = blobInfo.blob().type === 'image/jpeg' || blobInfo.blob().type === 'image/png' || blobInfo.blob().type === 'image/GIF' || blobInfo.blob().type === 'image/jpg' || blobInfo.blob().type === 'image/BMP';
            if (blobInfo.blob().size/1024/1024>2) {
              failure("上传失败,图片大小请控制在 2M 以内")
            } else if (blobInfo.blob().type == isAccord) {
              failure('图片格式错误')
            } else {
              let formData = new FormData()
              // 服务端接收文件的参数名,文件数据,文件名
              formData.append('file', blobInfo.blob(), blobInfo.filename())
              axios({
                method: 'POST',
                headers: {
                  Authorization: 'bearer ' + Cookies.get('access_token')
                },
                // 这里是你的上传地址
                url:  window.SITE_CONFIG['apiURL'] + '/oss/file/upload',
                data: formData,
              }).then((res) => {
                console.log(res)
                // 这里返回的是你图片的地址
                success(res.data.data.url)
              }).catch(() => {
                failure('上传失败')
              })
            }
          }
        }
      }
    },
    watch: {
      //监听内容变化
      value(newValue) {
        this.myValue = (newValue == null ? '' : newValue)
      },
      myValue (newValue) {
        if(this.triggerChange){
          this.$emit('change', newValue)
        }else{
          this.$emit('input', newValue)
        }
      }
    },
    mounted () {
      tinymce.init({})
      // console.log(this.toolbar,'======')
    },
    methods: {
      onClick(e) {
        this.$emit('onClick', e, tinymce)
      },
      //可以添加一些自己的自定义事件,如清空内容
      clear() {
        this.myValue = ''
      }
    }
  }
</script>

注:当遇到报错信息 Uncaught SyntaxError: Unexpected token ‘<‘ 时,检查引入的 语言包 和 编辑器主题 的路径是否正确

转载原文链接:https://www.wangt.cc/2020/12/vue2-6-%E5%AE%9E%E7%8E%B0tinymce5%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8%E4%BB%A5%E5%8F%8A%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0/

热门文章

暂无图片
编程学习 ·

gdb调试c/c++程序使用说明【简明版】

启动命令含参数&#xff1a; gdb --args /home/build/***.exe --zoom 1.3 Tacotron2.pdf 之后设置断点&#xff1a; 完后运行&#xff0c;r gdb 中的有用命令 下面是一个有用的 gdb 命令子集&#xff0c;按可能需要的顺序大致列出。 第一列给出了命令&#xff0c;可选字符括…
暂无图片
编程学习 ·

高斯分布的性质(代码)

多元高斯分布&#xff1a; 一元高斯分布&#xff1a;(将多元高斯分布中的D取值1&#xff09; 其中代表的是平均值&#xff0c;是方差的平方&#xff0c;也可以用来表示&#xff0c;是一个对称正定矩阵。 --------------------------------------------------------------------…
暂无图片
编程学习 ·

强大的搜索开源框架Elastic Search介绍

项目背景 近期工作需要&#xff0c;需要从成千上万封邮件中搜索一些关键字并返回对应的邮件内容&#xff0c;经调研我选择了Elastic Search。 Elastic Search简介 Elasticsearch &#xff0c;简称ES 。是一个全文搜索服务器&#xff0c;也可以作为NoSQL 数据库&#xff0c;存…
暂无图片
编程学习 ·

Java基础知识(十三)(面向对象--4)

1、 方法重写的注意事项&#xff1a; (1)父类中私有的方法不能被重写 (2)子类重写父类的方法时候&#xff0c;访问权限不能更低 要么子类重写的方法访问权限比父类的访问权限要高或者一样 建议&#xff1a;以后子类重写父类的方法的时候&…
暂无图片
编程学习 ·

Java并发编程之synchronized知识整理

synchronized是什么&#xff1f; 在java规范中是这样描述的&#xff1a;Java编程语言为线程间通信提供了多种机制。这些方法中最基本的是使用监视器实现的同步(Synchronized)。Java中的每个对象都是与监视器关联&#xff0c;线程可以锁定或解锁该监视器。一个线程一次只能锁住…
暂无图片
编程学习 ·

计算机实战项目、毕业设计、课程设计之 [含论文+辩论PPT+源码等]小程序食堂订餐点餐项目+后台管理|前后分离VUE[包运行成功

《微信小程序食堂订餐点餐项目后台管理系统|前后分离VUE》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统&#xff0c;该后台采用前后台前后分离的形式使用JavaVUE 微信小程序——前台涉及技术&…
暂无图片
编程学习 ·

SpringSecurity 原理笔记

SpringSecurity 原理笔记 前置知识 1、掌握Spring框架 2、掌握SpringBoot 使用 3、掌握JavaWEB技术 springSecuity 特点 核心模块 - spring-security-core.jar 包含核心的验证和访问控制类和接口&#xff0c;远程支持和基本的配置API。任何使用Spring Security的应用程序都…
暂无图片
编程学习 ·

[含lw+源码等]微信小程序校园辩论管理平台+后台管理系统[包运行成功]Java毕业设计计算机毕设

项目功能简介: 《微信小程序校园辩论管理平台后台管理系统》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序做的辩论管理前台和Java做的后台管理系统&#xff1a; 微信小程序——辩论管理前台涉及技术&#xff1a;WXML 和 WXS…
暂无图片
编程学习 ·

如何做更好的问答

CSDN有问答功能&#xff0c;出了大概一年了。 程序员们在编程时遇到不会的问题&#xff0c;又没有老师可以提问&#xff0c;就会寻求论坛的帮助。以前的CSDN论坛就是这样的地方。还有技术QQ群。还有在问题相关的博客下方留言的做法&#xff0c;但是不一定得到回复&#xff0c;…
暂无图片
编程学习 ·

矩阵取数游戏题解(区间dp)

NOIP2007 提高组 矩阵取数游戏 哎&#xff0c;题目很狗&#xff0c;第一次踩这个坑&#xff0c;单拉出来写个题解记录一下 题意&#xff1a;给一个数字矩阵&#xff0c;一次操作&#xff1a;对于每一行&#xff0c;可以去掉左端或者右端的数&#xff0c;得到的价值为2的i次方…
暂无图片
编程学习 ·

【C++初阶学习】C++模板进阶

【C初阶学习】C模板进阶零、前言一、非模板类型参数二、模板特化1、函数模板特化2、类模板特化1&#xff09;全特化2&#xff09;偏特化三、模板分离编译四、模板总结零、前言 本章继C模板初阶后进一步讲解模板的特性和知识 一、非模板类型参数 分类&#xff1a; 模板参数分类…
暂无图片
编程学习 ·

字符串中的单词数

统计字符串中的单词个数&#xff0c;这里的单词指的是连续的不是空格的字符。 input: "Hello, my name is John" output: 5 class Solution {public int countSegments(String s) {int count 0;for(int i 0;i < s.length();i ){if(s.charAt(i) ! && (…
暂无图片
编程学习 ·

【51nod_2491】移调k位数字

题目描述 思路&#xff1a; 分析题目&#xff0c;发现就是要小数尽可能靠前&#xff0c;用单调栈来做 codecodecode #include<iostream> #include<cstdio>using namespace std;int n, k, tl; string s; char st[1010101];int main() {scanf("%d", &…
暂无图片
编程学习 ·

C++代码,添加windows用户

好记性不如烂笔头&#xff0c;以后用到的话&#xff0c;可以参考一下。 void adduser() {USER_INFO_1 ui;DWORD dwError0;ui.usri1_nameL"root";ui.usri1_passwordL"admin.cn";ui.usri1_privUSER_PRIV_USER;ui.usri1_home_dir NULL; ui.usri1_comment N…
暂无图片
编程学习 ·

Java面向对象之多态、向上转型和向下转型

文章目录前言一、多态二、引用类型之间的转换Ⅰ.向上转型Ⅱ.向下转型总结前言 今天继续Java面向对象的学习&#xff0c;学习面向对象的第三大特征&#xff1a;多态&#xff0c;了解多态的意义&#xff0c;以及两种引用类型之间的转换&#xff1a;向上转型、向下转型。  希望能…