tinymce插件tinymce-powerpaste-plugin——将word中内容(文字图片等)直接粘贴至tinymce编辑器中

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有:UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。
TinyMCE的优势:
开源可商用,基于LGPL2.1
插件丰富,自带插件基本涵盖日常所需功能(示例看下面的Demo-2)
接口丰富,可扩展性强,有能力可以无限拓展功能
界面好看,符合现代审美
提供经典、内联、沉浸无干扰三种模式(详见“介绍与入门”)
对标准支持优秀(自v5开始)
多语言支持,官网可下载几十种语言。

客户对老系统提出一个要求:能直接把word中的图片粘贴进编辑器中,否则一张张上传太麻烦了。
网上找到这个插件tinymce-powerpaste-plugin,可满足客户的要求。

在这里插入图片描述

下载

github插件地址:https://github.com/qhx0807/tinymce-powerpaste-plugin
如果打不开,请到这里下载:https://download.csdn.net/download/snans/88111695

目录

在这里插入图片描述
将插件解压缩到tinymce目录下的plugins里。

代码

  tinymce.init({
    selector: '#tinymce', // css选择器,和jquery的选择器一个道理,建议直接用id
    language: 'zh_CN', // 需要在官网自己下载一个全局的langs包。同时我提供的powerpaste本身自带一个langs包里面含中文,所以可以100%支持中文。
    plugins: [
      'powerpaste', // plugins中,用powerpaste替换原来的paste
      //...
    ],
    powerpaste_word_import: 'propmt',// 参数可以是propmt, merge, clear,效果自行切换对比
    powerpaste_html_import: 'propmt',// propmt, merge, clear
    powerpaste_allow_local_images: true,
    paste_data_images: true,
    images_upload_handler: function (blobInfo, success, failure) {
      // 这个函数主要处理word中的图片,并自动完成上传;
      // ajaxUpload是自己定义的一个函数;在回调中,记得调用success函数,传入上传好的图片地址;
      // blobInfo.blob() 得到图片的file对象;
      ajaxUpload(blobInfo.blob()).then((data) => {
         // 上传成功后,调用success函数传入图片地址
         success(data.uploadedImageUrl)
       })
     },
    // tinymce的其他配置参数
  })

粘贴

在这里插入图片描述
无论移除格式还是保持格式,图片都能正常显示,主要是文字格式的清理。

其它

网上网友总结:

3.3.3-308版本

升级内容:

  1. 修复了第一次复制粘贴图片进入tinymce时,images_upload_handler会调用2次的bug;
  2. word中如有图片无法上传(比如图片格式错误,word中可以显示但是tinymce无法显示)增加了错误提示;
  3. 体积更小,大概小了30%;
  4. 猜测:应该与高版本tinymce兼容的更好。因为2.1.10-115是2017年初时候的版本了,那时候对应tinymce3.x,现在是tinymce4.9;

4.0.1-317版本

适用tinymce5.0以上!!!用在5.0以下版本无效。

参考

tinymce实现从word直接粘贴并自动上传图片 powerpaste plugin source code
TinyMCE是什么?
TinyMCE简介与入门 \ 上传图片和文件

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【项目设计】基于负载均衡的在线oj平台

目录 一、项目介绍 二、开发环境以及技术 三、概要设计 四、关键算法 五、项目演示 六、代码实现 一、项目介绍 该项目是基于负载均衡的在线oj,模拟平时刷题网站(leetcode和牛客)写的一个在线判题系统 项目主要分为五个模块&#xff…

OpenAI重磅官宣ChatGPT安卓版本周发布,现已开启下载预约,附详细预约教程

7月22号,OpenAI 突然宣布,安卓版 ChatGPT 将在下周发布!换句话说,本周安卓版 ChatGPT正式上线! 最早,ChatGPT仅有网页版。 今年5月,iOS版ChatGPT正式发布,当时OpenAI表示Android版将…

Docker—— consul的容器服务更新与发现

Docker—— consul的容器服务更新与发现 一、Consul概述1.什么是服务注册与发现2.什么是consul 二、consul 部署1.consul服务器①. 建立 Consul 服务②. 查看集群信息③. 通过 http api 获取集群信息 2.registrator服务器①. 安装 Gliderlabs/Registrator②. 测试服务发现功能是…

智能小说文本字幕生成器

分享一个免费的,智能小说文本字幕生成器 智能分句。短词。 链接:https://pan.baidu.com/s/15xGlQg01LmbHHuGFZbgaiw?pwd0gjv 提取码:0gjv

分类评估指标

文章目录 1. 混淆矩阵2. Precision(精准率)3. Recall(召回率)4. F1-score5. ROC曲线和AUC指标5.1 ROC 曲线5.2 绘制 ROC 曲线5.3 AUC 值6. API介绍6.1 **分类评估报告api**6.2 **AUC计算API**练习-电信客户流失预测1. 数据集介绍2. 处理流程3. 案例实现4. 小结1. 混淆矩阵 …

Windows上安装Docker Desktop

运行环境 Windows 10Docker Desktop 4.21.1 安装步骤 步骤1: 勾掉"Use WSL 2 instead of Hyper-V(recommended)"(原因见小插曲2章节) 步骤2: 安装完成 步骤3: 运行Docker Desktop 步骤4: …

【MATLAB】ILOSpsi制导率的代码解析

ILOSpsi制导率的代码解析 这里记录一下关于fossen的MMS工具箱中,关于ILOSpsi制导率的代码解析内容,结合fossen的marine carft hydrodynamics and motion control这本书来参考看 文章目录 ILOSpsi制导率的代码解析前言一、代码全文二、内容解析1.persist…

opencv-27 阈值处理 cv2.threshold()

怎么理解阈值处理? 阈值处理(Thresholding)是一种常用的图像处理技术,在机器学习和计算机视觉中经常被用于二值化图像或二分类任务。它基于设定一个阈值来将像素值进行分类,将像素值大于或小于阈值的部分分为两个不同的类别&…

Redis持久化机制 RDB、AOF、混合持久化详解!如何选择?| JavaGuide

本文已经收录进 JavaGuide(「Java学习+面试指南」一份涵盖大部分 Java 程序员所需要掌握的核心知识。) Redis 持久化机制属于后端面试超高频的面试知识点,老生常谈了,需要重点花时间掌握。即使不是准备面试,日常开发也是需要经常用到的。 最近抽空对之前写的 Redis 持久化…

【ES】---ES的聚合(aggregations)

目录 一、前言1、聚合分类2、聚合的实现方式二、RestAPI--bucket聚合案例11、按照类型分bucket2、按照(String)时间分bucket三、RestAPI-- metric聚合案例11、metric指标统计四、RestAPI-- pipeline聚合案例1一、前言 聚合是对文档数据的统计、分析、计算。 注意:参与聚合的字…

Java中I/O流是什么?输入/输出流又是什么?

在 Java中所有数据都是使用流读写的。流是一组有序的数据序列,将数据从一个地方带到另一个地方。根据数据流向的不同,可以分为输入(Input)流和输出(Output)流两种。 在学习输入和输出流之前,我们…

PDF怎么转成Excel?4个方法非常实用!

如何使用记灵在线工具将PDF转成Excel?在日常工作中,我们经常需要转换PDF文件为Excel文件以方便我们处理数据。虽然PDF格式对于文本和图片的可视化效果效果不错,但是在处理数据时,Excel表格更加便捷。当我们将PDF文件转换成Excel文…

JDBC的的使用

首先导入jar包。 https://downloads.mysql.com/archives/c-j/ package com.test.sql;import java.sql.*;public class StudySql {public static void init() throws SQLException {Statement stmt null;Connection conn null;ResultSet res null;PreparedStatement pstm…

LeetCode Top100 Liked 题单(序号1~17)

01Two Sum - LeetCode 我自己写的代码【193ms】 因为不知道怎么加cmp函数&#xff0c;就只能pair的first设为值了&#xff0c;但其实这也是瞎做&#xff0c;应该也是O(n&#xff09;吧 class Solution { public:vector<int> twoSum(vector<int>& nums, int …

【渗透测试】PNG图片隐藏部分恢复

1、图片原尺寸还原方法一 缺点就是有点慢&#xff0c;毕竟遍历的次数比较多 import binascii import struct import sysfilename sys.argv[1] crcbp open(filename, "rb").read() # 打开图片 crc32frombp int(crcbp[29:33].hex(), 16) # 读取图片中的CRC校验值 …

HarmonyOS学习路之方舟开发框架—学习ArkTS语言(状态管理 一)

状态管理概述 在前文的描述中&#xff0c;我们构建的页面多为静态界面。如果希望构建一个动态的、有交互的界面&#xff0c;就需要引入“状态”的概念。 图1 效果图 上面的示例中&#xff0c;用户与应用程序的交互触发了文本状态变更&#xff0c;状态变更引起了UI渲染&#x…

力扣热门100题之最大子数组和【中等】【动态规划】

题目描述 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 示例 1&#xff1a; 输入&#xff1a;nums [-2,1,-3,4,-1,2,1,-5,4] 输出&a…

Linux推出Debian 12.1,并进行多方面系统修复

据了解&#xff0c;Debian是最古老的 GNU / Linux 发行版之一&#xff0c;也是许多其他基于 Linux 的操作系统的基础&#xff0c;包括 Ubuntu、Kali、MX 和树莓派 OS 等。 此外&#xff0c;该操作系统以稳定性为重&#xff0c;不追求花哨的新功能&#xff0c;因此新版本的发布…

echarts制作多个纵轴的折线图

代码 <script type"text/javascript"> $(function (){var myChart echarts.init(document.getElementById(main));option {color: ["#9bbb59","#0B438B","#4141F1","#F81945","#4bacc6","#F89E19&q…

PHP8知识详解:PHP的历史版本

PHP&#xff08;全称&#xff1a;Hypertext Preprocessor&#xff09;是一种广泛应用于web开发的脚本语言。它最初由Rasmus Lerdorf在1994年开发&#xff0c;并于1995年发布了第一个版本。以下是PHP的一些历史大版本及其介绍&#xff1a; PHP 1.0&#xff08;1995年&#xff09…