富文本编辑器CKEditor4简单使用-08(段落首行缩进插件 + 处理粘贴 Microsoft Word 中的内容后保持原始内容格式(包括首行缩进))

富文本编辑器CKEditor4简单使用-08(段落首行缩进插件 + 处理粘贴 Microsoft Word 中的内容后保持原始内容格式(包括首行缩进))

  • 1. 缩进,特殊方式处理——修改原工具栏里的增加缩进量
  • 2 缩进,插件处理——不含图片的可以解决
    • 2.1 下载段落插件 textindent
    • 2.2 使用段落插件 textindent
    • 2.3 修改textindent插件中的plugins.js文件
      • 2.3.1 修改插件按钮提示信息
      • 2.3.2 修改插件里的缩进偏移量和缩进单位
    • 2.4 开启textindent插件 并 看效果
      • 2.4.1 开启插件
      • 2.4.2 段落首行缩进测试
      • 2.4.3 来源word粘贴(保留缩进格式测试)
    • 2.5 附核心代码
    • 2.6 关于安装插件的其他详细内容
  • 3. 查看自己的CKEditor4版本号
  • 4. word里有图片的问题(待解决)
    • 4.1 问题描述
    • 4.2 关于Paste from Word插件
      • 4.2.1 下载Paste from Word插件
      • 4.3 解压所有插件

1. 缩进,特殊方式处理——修改原工具栏里的增加缩进量

  • 请看上篇文章,如下:

    富文本编辑器CKEditor4简单使用-07(处理浏览器不支持通过工具栏粘贴问题 和 首行缩进的问题).

2 缩进,插件处理——不含图片的可以解决

2.1 下载段落插件 textindent

  • 下载段落缩进插件,如下:

    https://ckeditor.com/cke4/addon/textindent.
    在这里插入图片描述

  • 备注:该插件没有依赖插件,所以只需要下载该一个插件即可使用!

2.2 使用段落插件 textindent

  • 下载之后解压,然后放在plugins目录下,如下:
    在这里插入图片描述

2.3 修改textindent插件中的plugins.js文件

2.3.1 修改插件按钮提示信息

  • 这个看自己,因为提示信息是一串英文的,所以这里改成明了的汉字,如下:
    在这里插入图片描述

2.3.2 修改插件里的缩进偏移量和缩进单位

  • 如下:
    在这里插入图片描述
    在这里插入图片描述

2.4 开启textindent插件 并 看效果

2.4.1 开启插件

  • 开启插件配置如下:
    在这里插入图片描述
    在这里插入图片描述

2.4.2 段落首行缩进测试

  • 看效果

  • 如果不修改缩进偏移量和缩进单位的话,原本效果如下
    在这里插入图片描述

  • 修改缩进偏移量和缩进单位后的效果,如下:
    在这里插入图片描述

2.4.3 来源word粘贴(保留缩进格式测试)

  • 使用这个插件之后,从word里复制出的内容再粘贴格式保持不变(包括首行缩进格式),如下:
    在这里插入图片描述
  • 通过工具栏的按钮粘贴也是一样的可以实现这种效果。
  • 注意前提:一定要开启textindent插件,否则首行缩进格式丢失!

2.5 附核心代码

  • text.html,如下:
    <!doctype html>
    <html lang="en"><head><meta charset="utf-8"><meta name="robots" content="noindex, nofollow"><title>Setting text part language</title><script src="../ckeditor/ckeditor.js"></script>
    </head><body><textarea cols="80" id="editor2" name="editor2" rows="10"></textarea><script>var editor = CKEDITOR.replace('editor2', {});editor.on("beforeCommandExec", function (event) {// 显示粘贴按钮的粘贴对话框并右键单击粘贴if (event.data.name == "paste") {event.editor._.forcePasteDialog = true;}// 不要显示Ctrl+Shift+V的粘贴对话框if (event.data.name == "pastetext" && event.data.commandData.from == "keystrokeHandler") {event.cancel();}});</script>
    </body></html>
    
  • config.js,如下:
    CKEDITOR.editorConfig = function( config ) {// 启用皮肤config.skin = 'office2013';// textindent-首行缩进插件config.extraPlugins = 'textindent';};

2.6 关于安装插件的其他详细内容

  • 可参考下面的文章:
    富文本编辑器CKEditor4简单使用-02(常用插件安装及使用).

3. 查看自己的CKEditor4版本号

  • 后续下载插件有的会根据CKEditor4的版本下载对应插件的版本号,所以先确定一下自己的版本号,在浏览器的控制台中输入命令即可查询,查询版本号的方式如下:
    CKEDITORCKEDITOR.version
    
    在这里插入图片描述

4. word里有图片的问题(待解决)

4.1 问题描述

  • 如果粘贴的word里有图片,复制之后图片不展示,如下:
    在这里插入图片描述

4.2 关于Paste from Word插件

4.2.1 下载Paste from Word插件

  • 下载地址:
    https://ckeditor.com/cke4/addon/pastefromword.
  • 下载所需的所有依赖插件,如下:
    在这里插入图片描述
  • 关于Paste from Word插件,如下:
    在这里插入图片描述

4.3 解压所有插件

  • 解压所有插件并放到plugins目录下(已有的插件不用替换),如下
    在这里插入图片描述
  • 问题是:此插件无论怎么配置都不生效,把默认插件换成下载的插件之后重新配置还是不生效,不知道此插件啥情况!!!
  • 参考官网配置如下:
    https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-pasteFromWordRemoveFontStyles.
  • 感兴趣的、用过的朋友可以交流一下!

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Redis协议与异步方式

Rredis Pipeline redis pipeline 是一个客户端提供的机制&#xff0c;而不是服务端提供的&#xff1b; pipeline 不具备事务性&#xff1b; 目的&#xff1a;节约网络传输时间&#xff1b; 通过一次发送多次请求命令&#xff0c;从而减少网络传输的时间。 Redis发布订阅 为了支…

使用jdbc方式操作ClickHouse

1、创建测试表&#xff0c;和插入测试数据 create table t_order01(id UInt32,sku_id String,total_amount Decimal(16,2),create_time Datetime ) engine MergeTreepartition by toYYYYMMDD(create_time)primary key (id)order by (id,sku_id);insert into t_order01 values …

【Vue】结合ElementUI实现简单数据请求和页面跳转功能

一、准备工作 1、创建一个Vue-cli程序 之前的博客有。各位看官姥爷&#xff0c;可以自查。 2、安装ElementUI 在创建Vue-cli程序的过程中&#xff0c;需要在控制台执行以下指令&#xff1a; #安装 element-ui npm i element-ui -S #安装 SASS 加载器 cnpm install sass-loa…

echarts 拖动markline,并计算中间区域的差值,标注红色虚线

<!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><!-- 引入 echarts.js --><script src"https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js" rel"external nof…

Linux 学习 --- 编辑 vi 命令

1、vi 基本概念&#xff08;了解&#xff09; 基本上 vi 可以分为三种状态&#xff0c;分别是命令模式 (command mode)、插入模式 (Insert mode) 和底行模式 (last line mode)&#xff0c;各模式的功能区分如下: 命令行模式 command mode&#xff09;  控制屏幕光标的移动&a…

工业项目组态用这个开源软件ScadaBR

软件介绍 ScadaBR 是一个开源软件&#xff0c;提供完整的 SCADA&#xff08;Supervisory Control and Data Acquisition&#xff0c;监控与数据采集&#xff09;系统的所有功能。SCADA 类型的软件自60年代末开始存在&#xff0c;并且在涉及机器、可编程逻辑控制器&#xff08;P…

ssh远程访问windows系统下的jupyterlab

网上配置这一堆那一堆&#xff0c;特别乱&#xff0c;找了好久整理后发在这里 由于既想打游戏又想做深度学习&#xff0c;不舍得显卡性能白白消耗&#xff0c;这里尝试使用笔记本连接主机 OpenSSH 最初是为 Linux 系统开发的&#xff0c;现在也支持包括 Windows 和 macOS 在内…

《R语言与农业数据统计分析及建模》学习——数字图像处理

数字图像处理&#xff08;digital image processing&#xff09;又称计算机图像处理&#xff0c;它是指将图像信号转换成数字信号并利用数字图像处理计算机对其进行处理的过程。 常见的数字图像处理是通过计算机对图像进行去除噪声、增强、复原、分割、提取特征等处理。 R语言…

QT上位机的学习

后面又该找工作了&#xff0c;这块的内容也需要好好学习&#xff01; QT 篇 QT上位机串口编程-CSDN博客 (1)可以通过安装虚拟串口来模拟串口通信的情况 发现我之前安装过&#xff08;9.0): 可以生成虚拟串口&#xff0c;无需实际硬件串口就可以实现同一台电脑上串口模拟通信…

电路笔记 : 电容电阻大小表示(103、104、151、2R5、R15的含义)

电容电阻大小表示 电阻 数字索位标称法 数字索位标称法就是在电阻体上用三位数字来标明其阻值。它的第一位和第二位为有效数字&#xff0c;第三位表示在有效数字后面所加“0”的个数.这一位不会出现字母。如果阻值是小数.则用“R”表示“小数点”.并占用一位有效数字&#xf…

【51单片机普中板子74LS138+245+573可调时钟整点蜂鸣中级应用】2022-12-7

缘由用51单片机普中开发板实现数字时钟-嵌入式-CSDN问答 #include "reg52.h" //定义按键 sbit key0P3^0; sbit key1P3^1; sbit key2P3^2; sbit key3P3^3; //定义数码管位驱运位 sbit L1P2^2; sbit L2P2^3; sbit L3P2^4; sbit beepP2^5; unsigned char code ShuMaGua…

微调Mistral 7B以实现命名实体识别 (NER)

文章来源&#xff1a;fine-tuning-mistral-7b-for-named-entity-recognition-ner 2024 年 4 月 19 日 在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;命名实体识别&#xff08;NER&#xff09;被认为是一项关键任务&#xff0c;应用范围广泛&#xff0c;包括信息…

tensorflow报错

参考 TensorFlow binary is optimized to use available CPU instructions in performance-critical operations._this tensorflow binary is optimized to use availab-CSDN博客 解决Python中cuBLAS插件无法注册问题_unable to register cudnn factory: attempting to re-CS…

SQL数据库

一.什么是数据库 数据库&#xff1a;存储数据的仓库&#xff0c;数据是有组织的进行存储。&#xff08;database 简称DB&#xff09; 数据库管理系统&#xff1a;管理数据库的大型软禁&#xff08;DataBase Management System 简称DBMS&#xff09; SQL&#xff1a;操作关系…

【MySQL 5.7安装时候 出现2503报错,解决方案】

MySQL5.7 安装遇 2503问题如何解决 1.能正常安装就点这里2.出现2503问题就看这2.1先看问题2.1.1在官网下载好安装包后&#xff0c;首先先确认安装包是否完整&#xff0c;排除安装包损坏的问题2.1.2 安装时候出现这个2503问题 2.2上解决方案2.2.1 打开任务管理器2.2.2 解决 1.能…

「C/C++ 01」volatile关键字 和 修改const修饰的变量

目录 一、修改const修饰的局部变量 二、无法修改const修饰的全局变量 三、volatile关键字 面试题】 一、修改const修饰的局部变量 可以通过指针和强转来修改const修饰的局部变量。 #include <iostream> using namespace std;int main(void) {const int a 1;int* pa (in…

hive表基本语法

hive表基本语法 青少年是一个美好而又是一去不可再得的时期 是将来一切光明和幸福的开端 目录 hive表基本语法 1.ROW FORMAT用法 2.LOCATION用法 3.EXTERNAL用法 &#xff08;外部表&#xff09; 4.STORED AS 用法&#xff1a;设置数据存储格式 5.TBLPROPERTIES 用法 6.P…

.位运算.

本题涉及到计算机组成与原理的相关知识 找了一篇相当不错的讲解&#xff0c;大家可以借鉴&#xff1a;位运算&#xff1a;按位与、按位或、按位异或、按位左移、按位右移-CSDN博客 给定一个长度为 n&#x1d45b; 的数列&#xff0c;请你求出数列中每个数的二进制表示中 11 的…

设计模式: 工厂模式

工厂模式&#xff08;Factory Pattern&#xff09;是 Java 中最常用的设计模式之一&#xff0c;这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。 工厂模式提供了一种创建对象的方式&#xff0c;而无需指定要创建的具体类。 工厂模式属于创建型…

网络架构建模:一个云案例研究-文章翻译

网络架构建模:一个云案例研究 摘要 互联网支持广泛服务的能力取决于网络架构以及未来网络所需的理论和实践创新。本文中的网络体系结构指的是计算机网络系统的结构及其物理组件、配置和通信协议之间的交互。多年来,人们对网络架构进行了各种各样的描述,其中有大量的表面图…