1. 全栈程序员必看首页

Vue富文本编辑器_前端富文本编辑器插件

全栈程序员-用户IM • • 未分类

Vue富文本编辑器_前端富文本编辑器插件富文本编辑器博客（coder的自我修养）原文链接：http://www.imcoder.fun/archives/1591583350241TinyMC编辑器简介TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费。TinyMCE的优势：开源可商用，基于LGPL2.1插件丰富，自带插件基本涵盖日常所需功能接口丰富，可扩展性强，有能力可以无限拓展功能界面好看，符合现代审美提供经典、内联、沉浸无干

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

富文本编辑器

博客（coder的自我修养）原文链接：http://www.imcoder.fun/archives/1591583350241

TinyMC编辑器简介

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费。

TinyMCE的优势：

  • 开源可商用，基于LGPL2.1
  • 插件丰富，自带插件基本涵盖日常所需功能
  • 接口丰富，可扩展性强，有能力可以无限拓展功能
  • 界面好看，符合现代审美
  • 提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）
  • 对标准支持优秀（自v5开始）
  • 多语言支持，官网可下载几十种语言。

下图为开启全部功能的截图

img

可以看到功能很多，跟word很类似，基本的功能需求都能满足，除此之外还可以变换彩色图标

img

TinyMCE中文文档地址：http://tinymce.ax-z.cn/

vue项目集成TinyMCE编辑器

1、安装

  • vue3.x安装插件

    vue-cli版本：4.4.0

    安装vue-tinymce

    npm i @packy-tang/vue-tinymce@next

    安装tinymce-vue

    npm install @tinymce/tinymce-vue -S

  • vue2.x安装插件

    vue-cli版本：最新

    安装vue-tinymce

    npm install @packy-tang/vue-tinymce

    vue-tinymce版本：1.1.2

    安装tinymce-vue

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

    tinymce-vue版本：3.0.1

tinymce-vue是tinymce官方提供的一个vue组件，可以直接拿过来使用，但是必须要到官网注册获取api-key，否则只有一段时间的试用期。所以你不想购买的话就老老实实编写自己的组件。

这两个组件安装完之后，在public目录下新建文件夹static/tinymce，目录建好后（如果没有public文件，就在index.html同级的static中创建tinymce文件），找到node_modules文件夹下的tinymce/skins目录，将skins目录复制到我们创建的static/tinymce文件夹内，如下图所示

img

2、配置中文语言

到官网下载中文语言包 zh_CN.js

img

在刚才创建的static/tinymce文件夹内再新建langs文件夹，用来存放我们下载的中文语言包，如下图所示

img

3、组件编写

新建一个组件，在此我把它命名为imcoder-tinymce.vue

在组件中我们引入tinymce

import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";

编写组件props

props: { 
   
    value: { 
   
      type: String,
      default: ""
    },
    // 默认插件 这里写的比较全，基本上是全部了
    plugins: { 
   
      type: [String, Array],
      default:
        "preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr nonbreaking insertdatetime advlist lists wordcount imagetools textpattern autosave bdmap autoresize lineheight"
    },
    // 默认工具栏 这里写的比较全，基本上是全部了
    toolbar: { 
   
      type: [String, Array],
      default:
        "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link codesample | alignleft aligncenter alignright alignjustify outdent indent lineheight formatpainter | \ styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \ table image media charmap hr pagebreak insertdatetime | bdmap fullscreen preview"
    }
  },

tinymce-vue需要在components中注册，然后才能使用

components: { 
   
    Editor
 },

使用方式如下

<template>
  <!-- 富文本 -->
  <div>
    <editor v-model="content" :init="init"></editor>
  </div>
</template>

init是tinymce的配置项

//初始化配置
      init: { 
   
        language_url: "/static/tinymce/langs/zh_CN.js", // 中文语言包路径
        language: "zh_CN",
        skin_url: "/static/tinymce/skins/ui/oxide",
        height: 770,
        min_height: 770,
        max_height: 770,
        toolbar_mode: "wrap",
        plugins: this.plugins,
        toolbar: this.toolbar,
        content_style: "p {margin: 5px 0;}",
        fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
        branding: false,
        //此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        //如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        images_upload_handler: (blobInfo, success, failure) => { 
   
          const img = "data:image/jpeg;base64," + blobInfo.base64();
          success(img);
        }
      },

以上步骤做完之后还要再mounted里再初始化一次

mounted() { 
   
  tinymce.init({ 
   }); // 这里传个空对象就可以了
},

如果出现以下报错，则可能是路径配置错误，仔细检查路径是否写错

img

如果出现这种状况，则是因为没有引入字体图标组件

img

手动引入就好

import "tinymce/icons/default/icons";

引入tinymce插件，有些功能是需要引入插件才能支持，例如图片上传、表格等，这里我把大多数插件都引入进来了。如下所示：

import "tinymce/plugins/image";
import "tinymce/plugins/media";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/preview";
import "tinymce/plugins/code";
import "tinymce/plugins/link";
import "tinymce/plugins/advlist";
import "tinymce/plugins/codesample";
import "tinymce/plugins/hr";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/textpattern";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/autolink";
import "tinymce/plugins/directionality";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/template";
import "tinymce/plugins/charmap";
import "tinymce/plugins/nonbreaking";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/imagetools";
import "tinymce/plugins/autosave";
import "tinymce/plugins/autoresize";

引入扩展插件

有些插件并不是第三方提供的，而是别人开源的，这时候我们要是使用的话就要把他们引入进来，网上一些文章说把下载的插件直接放到node_modules/tinymce/plugins下，然后直接引用就好，但是我发现并不能使用，也可能是我的方式不对。

解决方案：在src/assets下新建/tinymce/plugins目录，把下载的插件解压缩放进去，然后引用进来，如下所示

img

这里我使用了行高插件和百度地图插件

// 扩展插件
import "../assets/tinymce/plugins/lineheight/plugin";
import "../assets/tinymce/plugins/bdmap/plugin";

完整代码如下

<template>
  <!-- 富文本 -->
  <div>
    <editor v-model="content" :init="init" :disabled="disabled" @onClick="onClick"></editor>
  </div>
</template>


<script> import tinymce from "tinymce/tinymce"; import Editor from "@tinymce/tinymce-vue"; import "tinymce/icons/default/icons"; import "tinymce/themes/silver"; import "tinymce/plugins/image"; import "tinymce/plugins/media"; import "tinymce/plugins/table"; import "tinymce/plugins/lists"; import "tinymce/plugins/contextmenu"; import "tinymce/plugins/wordcount"; import "tinymce/plugins/colorpicker"; import "tinymce/plugins/textcolor"; import "tinymce/plugins/preview"; import "tinymce/plugins/code"; import "tinymce/plugins/link"; import "tinymce/plugins/advlist"; import "tinymce/plugins/codesample"; import "tinymce/plugins/hr"; import "tinymce/plugins/fullscreen"; import "tinymce/plugins/textpattern"; import "tinymce/plugins/searchreplace"; import "tinymce/plugins/autolink"; import "tinymce/plugins/directionality"; import "tinymce/plugins/visualblocks"; import "tinymce/plugins/visualchars"; import "tinymce/plugins/template"; import "tinymce/plugins/charmap"; import "tinymce/plugins/nonbreaking"; import "tinymce/plugins/insertdatetime"; import "tinymce/plugins/imagetools"; import "tinymce/plugins/autosave"; import "tinymce/plugins/autoresize"; // 扩展插件 import "../assets/tinymce/plugins/lineheight/plugin"; import "../assets/tinymce/plugins/bdmap/plugin"; export default { 
      components: { 
      Editor }, props: { 
      value: { 
      type: String, default: "" }, disabled: { 
      type: Boolean, default: false }, plugins: { 
      type: [String, Array], default: "preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr nonbreaking insertdatetime advlist lists wordcount imagetools textpattern autosave bdmap autoresize lineheight" }, toolbar: { 
      type: [String, Array], default: "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link codesample | alignleft aligncenter alignright alignjustify outdent indent lineheight formatpainter | \ styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \ table image media charmap hr pagebreak insertdatetime | bdmap fullscreen preview" } }, data() { 
      return { 
      //初始化配置 init: { 
      language_url: "/static/tinymce/langs/zh_CN.js", language: "zh_CN", skin_url: "/static/tinymce/skins/ui/oxide", height: 770, min_height: 770, max_height: 770, toolbar_mode: "wrap", plugins: this.plugins, toolbar: this.toolbar, content_style: "p {margin: 5px 0;}", fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px", font_formats: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;", branding: false, //此处为图片上传处理函数，这个直接用了base64的图片形式上传图片， //如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler images_upload_handler: (blobInfo, success, failure) => { 
      const img = "data:image/jpeg;base64," + blobInfo.base64(); success(img); } }, content: this.value }; }, mounted() { 
      tinymce.init({ 
     }); }, methods: { 
      }, watch: { 
      value(newValue) { 
      this.content = newValue; }, content(newValue) { 
      this.$emit("input", newValue); } } }; </script>
<style scoped lang="scss"> </style>

4、组件使用

import Editor from "@/components/imcoder-tinymce";
components: { Editor },
<editor v-model="yourContent"></editor>

一些问题：

  1. 工具栏z-index导致遮盖弹出层的问题
    解决方案：修改\skins\ui\oxide\skin.min.css文件，搜索“.tox .tox-editor-header”，将其z-index的值从1变为0后问题解决。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/183499.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0


相关推荐

  • centos7安装图形化界面图文详解

    centos7安装图形化界面图文详解

    centos7安装图形化界面图文详解centos7没有图形化操作可能对很多人来说都不太习惯，下面我们来为centos7安装图形化界面，本文以安装GNOME图形化为例写在安装前：如果你的centos7是最小化安装的那默认都是不带XWINDOWS的，那在安装图形化界面之前，你得先安装一下XWINDOWS，这个控制功能 yumgroupinstall”XWindowSystem”1.输入安装命令 yumgro…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年4月28日
  • CCF-CSP认证历年真题解

    CCF-CSP认证历年真题解

    CCF-CSP认证历年真题解CSP认证考什么怎么考？CCF计算机职业资格认证的每一道试题都十分经典，覆盖现实世界中方方面面的问题。这个历年试题解主要使用C/C++语言编写，将逐步增加Python和Java的解题程序。程序中附有注释，力求解题思路清晰简洁，值得珍藏与模仿。逐题改写过程中，富文本编辑器写的博客将全部用Markdown编辑器改写。改写的第一题，都增加了Python和Java的解题程序。2021.04第22次：CCF202104-1灰度直方图（100分）【计数】CCF202104-2邻域均值（100分.

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年6月7日
  • 网络舆情分析与研判的指标还应有哪些_舆情监测是什么

    网络舆情分析与研判的指标还应有哪些_舆情监测是什么

    网络舆情分析与研判的指标还应有哪些_舆情监测是什么网络聚集的人气、展开的场景与揭示的真相，不仅会推动新闻事件的发展、形成网络舆论，甚至还会直接影响社会主流舆论、推动社会变革。对舆情监测主体来说，如何加强对网络舆情的实时全面监测，并对其做出及时反馈、防患于未然；如何利用现代信息技术做好网络舆情分析，从而进行有效引导和控制；如何化解网络舆情危机，实现网络舆情的高效管理是一项任重而道远的任务。在网络舆情分析和管理中，舆情监测主体的业务需求是基础和根本，业务需求的满足与否，是评判网络舆情分析系统的核心指标。网络舆情分析系统的评判指标参考项，如下：网络舆情分析

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年9月16日
  • <span>如何使用Python读取大文件</span>

    如何使用Python读取大文件

    如何使用Python读取大文件

    全栈程序员-用户IM 全栈程序员-用户IM
    2021年11月26日
  • 关系数据库设计理论中,起核心作用的是_关系数据库设计理论主要包括

    关系数据库设计理论中,起核心作用的是_关系数据库设计理论主要包括

    关系数据库设计理论中,起核心作用的是_关系数据库设计理论主要包括关系数据库设计理论设计一个好的关系数据库系统，关键是要设计一个好的数据库模式（数据库逻辑设计问题）数据库逻辑设计主要解决的问题关系数据库应该组织成几个关系模式关系模式中包括哪些属性“不好”的数据库设计举例：为学校设计一个关系数据库关系模式:UN(Sno,Cno,G,Sdept,MN)Sno:描述学生Sdept:描述系名MN:描述系…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年10月16日
  • window.onresize 怎么用_仅完成部分readprocess如何解决

    window.onresize 怎么用_仅完成部分readprocess如何解决

    window.onresize 怎么用_仅完成部分readprocess如何解决BOOLWriteProcessMemory(HANDLEhProcess,//进程的句柄(可由OpenProcess函数返回)LPVOIDlpBaseAddress,//进程地址LPVOIDlpBuffer,//数据当前存放地址DWORDnSize,…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年9月6日

发表回复

您的电子邮箱地址不会被公开。

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