vue2 tinymce富文本插件

一、介绍

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有:UEditorKindeditorSimditorCKEditorwangEditorSuneditorfroala等等。

TinyMCE的优势:

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

中文官网:TinyMCE中文文档中文手册 (ax-z.cn)

官网及文档:www.tiny.cloud

官网下载:www.tiny.cloud/get-tiny/self-hosted/

Githubgithub.com/tinymce

【推荐】为vue开发者整合的tinymce组件

二、下载

项目是vue2,使用的tinymce版本是4.7.5,可点击【下载】源文件,然后解压到前端工程public文件夹下,如下图所示:

三、引入

在项目public文件夹中的index.html文件中引入tinymce,代码如下:

<script src="./tinymce4.7.5/tinymce.min.js"></script>

四、封装

封装好的组件可点击【下载】源文件引入到前端工程components目录下

五、使用

value就是传入富文本html字符串

<template><Tinymce v-model="value" />
</template><script>
import Tinymce from "@/components/Tinymce/index";export default {components: { Tinymce },data: {return {value: ''}}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/146251.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OpenAI的Whisper蒸馏:速度提升6倍的Distil-Whisper

1 Distil-Whisper诞生 Whisper 是 OpenAI 研发并开源的一个自动语音识别&#xff08;ASR&#xff0c;Automatic Speech Recognition&#xff09;模型&#xff0c;他们通过从网络上收集了 68 万小时的多语言&#xff08;98 种语言&#xff09;和多任务&#xff08;multitask&am…

B站批量取消关注

找到关注页面&#xff1a; 右键检查或者按F12进入开发者界面 然后选console&#xff0c;在页面下面输入下面jQuery代码&#xff0c;然后按回车。复制粘贴两次这一页的博主就能全部取消大概20个 然后刷新页面&#xff0c;接着粘贴两边代码&#xff0c;循环如此即可。 $(".…

【新闻稿】Solv 与 zCloak 联合开发跨境贸易场景下可编程数字凭证项目,获得新加坡、加纳两国央行支持...

关于昨天 Solv 携手 zCloak 与新加坡和加纳两个央行合作的 Project DESFT&#xff0c;很多朋友都发来恭喜和祝福&#xff0c;并希望了解详情。这个事我们秘密努力了半年多&#xff0c;终于有一个阶段性的成果。这里我转载中文版官宣新闻稿&#xff0c;欢迎大家关注。等我忙过这…

Javaweb之Vue的概述

2.1 Vue概述 通过我们学习的htmlcssjs已经能够开发美观的页面了&#xff0c;但是开发的效率还有待提高&#xff0c;那么如何提高呢&#xff1f;我们先来分析下页面的组成。一个完整的html页面包括了视图和数据&#xff0c;数据是通过请求 从后台获取的&#xff0c;那么意味着我…

Android Proguard混淆

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览三、语法规则3.1 输入/输出选项3.2 保留选项3.3 缩…

系统韧性研究(5)| 常用的系统韧性技术

如果不利事件或条件导致系统无法正常运行&#xff0c;则它们可能会对有价值的资产造成各种形式的损害。正如我在本系列的前几篇文章中概述的那样&#xff0c;系统韧性很重要&#xff0c;因为没有人想要一个无法克服“不可避免的逆境”的脆弱系统。 在本系列的第一篇文章中&…

36、Flink 的 Formats 之Parquet 和 Orc Format

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…

人生阶段总结

--回顾一下我迷茫、努力、不开心又失败的阶段人生自我介绍一下&#xff0c;我是一个智力平平&#xff0c;记忆力差&#xff0c;适合自学的长睡眠者。 大专之前 国内的应试教育基本上不适合我&#xff0c;厌恶补课厌恶机械式听课刷题&#xff0c;所有的优势学科都是自学&#xf…

eclipse启动无法找到类(自定义监听器)

一.报错 二.排查 1.首先检查代码是否有问题 本人报错是找不到监听器&#xff0c;故检查监听器的代码和web.xml文件是否有问题 public class DoorListener implements ServletContextListener 监听器是否继承并实现ServletContextListener中的方法。 web.xml中&#xff1a; &…

EMP.DLL是什么东西?怎么解决EMP.DLL文件缺失

在我们使用电脑的过程中&#xff0c;有时会遇到一些特定的错误提示&#xff0c;比如“emp.dll文件缺失”。这样的提示对许多用户来说可能一脸懵逼&#xff0c;不知道怎么处理&#xff0c;那么&#xff0c;究竟什么是emp.dll&#xff1f;它的缺失会产生什么影响&#xff1f;又应…

阿里云CentOS主机开启ipv6

目录 一、云主机开启和使用 ipv6 1、网络和交换机开启 ipv6 2、创建 / 编辑云主机&#xff0c;开启ipv6 3、安全组放行ipv6端口 二、使用 ipv6 地址进行 ssh 连接 三、ipv6 地址绑定域名 一、云主机开启和使用 ipv6 1、网络和交换机开启 ipv6 进入网络、交换机详情页面…

ClickHouse的分片和副本

1.副本 副本的目的主要是保障数据的高可用性&#xff0c;即使一台ClickHouse节点宕机&#xff0c;那么也可以从其他服务器获得相同的数据。 Data Replication | ClickHouse Docs 1.1 副本写入流程 1.2 配置步骤 &#xff08;1&#xff09;启动zookeeper集群 &#xff08;2&…

最新自动定位版本付费进群系统源码

更新内容&#xff1a; 1.在网站首页增加了付款轮播功能。 2.新增了城市定位功能&#xff0c;方便用户查找所在城市的相关信息。 3.对域名库及支付设置进行了更新和优化。 4.增加了一种图模板设置模式&#xff0c;简化了后台模板设置流程。 5.此外还进行了前后台的其他优化…

蓝桥杯第三周算法竞赛D题E题

发现更多计算机知识&#xff0c;欢迎访问Cr不是铬的个人网站 D迷宫逃脱 拿到题目一眼应该就能看出是可以用动态规划来解决。但是怎么定义dp呢? 这个题增加难度的点就在当所在位置与下一个要去的位置互质的时候&#xff0c;会消耗一把钥匙。当没有钥匙的时候就不能移动了。想…

Linux(3):Linux 的文件权限与目录配置

把具有相同的账户放入到一个组里面&#xff0c;这个组就是这两个账户的 群组 。在访问资源&#xff08;操作系统中计算机的资源&#xff09;时&#xff0c;可以让这个组里面的所有用户都具有访问权限。 每个账号都可以有多个群组的支持。 在我们Liux 系统当中&#xff0c;默认的…

<Linux>(极简关键、省时省力)《Linux操作系统原理分析之Linux 进程管理 4》(8)

《Linux操作系统原理分析之Linux 进程管理 4》&#xff08;8&#xff09; 4 Linux 进程管理4.4 Linux 进程的创建和撤销4.4.1 Linux 进程的族亲关系4.4.2 Linux 进程的创建4.4.3 Linux 进程创建的过程4.4.4 Linux 进程的执行4.4.5 Linux 进程的终止和撤销 4 Linux 进程管理 4.…

Redis - 订阅发布替换 Etcd 解决方案

为了减轻项目的中间件臃肿&#xff0c;由于我们项目本身就应用了 Redis&#xff0c;正好 Redis 的也具备订阅发布监听的特性&#xff0c;正好应对 Etcd 的功能&#xff0c;所以本次给大家讲解如何使用 Redis 消息订阅发布来替代 Etcd 的解决方案。接下来&#xff0c;我们先看 R…

vue2项目修改编译巨慢

前言&#xff1a;我们的一个vue项目在给新同事后他说编译贼慢&#xff0c;一个小修改项5分钟才能自动编译成功&#xff0c;我把项目放到新电脑上也巨慢&#xff0c;升级了nodejs好使了一些&#xff0c;但还是慢&#xff0c;最后引入webpack后巨快&#xff0c; 在项目的package…

redis实战篇(2)

优惠卷秒杀 通过本章节&#xff0c;我们可以学会Redis的计数器功能&#xff0c; 结合Lua完成高性能的redis操作&#xff0c;同时学会Redis分布式锁的原理&#xff0c;包括Redis的三种消息队列 3、优惠卷秒杀 3.1 -全局唯一ID 每个店铺都可以发布优惠券&#xff1a; 当用户抢…

linux课程第一课------命令的简单的介绍

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; ​&#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382; &#x1f389;&#x1f389;&#x1f389…