富文本编辑器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. 缩进,插件处理——优化(简直完美)
    • 3.1 如果不优化存在的问题
    • 3.2 修改插件的plugin.js——设置缩进2个字体空间
      • 3.2.1 直接换单位(rem)
      • 3.2.2 更改源码,计算缩进空间
        • 3.2.2.1 更改位置
        • 3.2.2.2 看效果
        • 3.2.2.3 核心代码
        • 3.2.2.4 更改后完整 plugin.js 代码
        • 3.2.2.5 优化后完整 plugin.js 代码
  • 4. 下载项目
  • 5. word里有图片的问题(待解决)
    • 4.1 问题描述
    • 5.1 查看自己的CKEditor4版本号
    • 5.2 关于Paste from Word插件
      • 5.2.1 下载Paste from Word插件
      • 5.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里复制出的内容再粘贴格式保持不变(包括首行缩进格式),如下:
    在这里插入图片描述
    在这里插入图片描述
  • 通过工具栏的按钮粘贴也是一样的可以实现缩进效果,但是不一样的是这种缩进不是缩进的两个字符(2em),而是缩进的两个字体的空间大小(可以理解是保持原文格式不变了)。
  • 注意前提:一定要开启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. 缩进,插件处理——优化(简直完美)

3.1 如果不优化存在的问题

  • 上面我们把缩进量和单位配置成2em,看着测试没什么问题,但是我们通过复制粘贴发现,复制粘贴后缩进保留的还是原文的px,所以我们上面测试看着没问题,那是因为字体刚刚好,如果我们把字体调大或者调小再次点击缩进按钮,问题就暴露出来了,如下:
    在这里插入图片描述
  • 所以,它是一个动态的,我们要做的是如何实现缩进两个字体(根据原文字体的大小缩进),所以我们要设置成动态的缩进2个字体的空间,也就是说:
    当设置为2个字体的空间时,即首行缩进的距离为2个字体大小的距离。例如,如果你的文字大小为16px,那么缩进的距离就是32px。

3.2 修改插件的plugin.js——设置缩进2个字体空间

3.2.1 直接换单位(rem)

  • 但是这个有个问题,如果正文字体大小都一样可以,如果第二段字体大小和第一段字体大小不一样的话,效果不是很理想(这时第一段可以实现效果,但是第二段不行)如下:
    在这里插入图片描述
    在这里插入图片描述

  • 关于emrem
    在 CSS 中,em 和 rem 都是相对长度单位,其中 em 是相对于父元素的字体大小,而 rem 是相对于根元素的字体大小(即 html 元素的字体大小)。具体来说:

    • em:表示相对于当前元素的字体大小。例如,如果当前元素的字体大小为 16px,那么 1em 就等于 16px。
    • rem:表示相对于根元素(即 html 元素)的字体大小。例如,如果根元素的字体大小为 16px,那么 1rem 就等于 16px。
      由于 rem 单位是相对于根元素的字体大小,因此在整个页面中都是一致的。这使得使用 rem 单位更加方便和灵活,可以避免在多层嵌套中计算父元素字体大小的复杂性。
  • 如果字体不一致的话,上面rem可能还是不能满足,这就需要计算了,如何实现,请继续……

3.2.2 更改源码,计算缩进空间

3.2.2.1 更改位置
  • 如下:
    在这里插入图片描述
    在这里插入图片描述
3.2.2.2 看效果
  • 如下:
    在这里插入图片描述

    在这里插入图片描述

3.2.2.3 核心代码
  • 添加的核心代码如下:

    // 第一个是span,获取span标签
    var child_span = node.$.firstElementChild; 
    // console.log(child_span);
    if(child_span!=null){// 获取span里的 font-size属性的值var spanFontSize = child_span.style.fontSize;indentation = 2 * parseFloat(spanFontSize) + "px"; // 更改缩进量和缩进单位// console.log(spanFontSize);// console.log(indentation);
    }
    
3.2.2.4 更改后完整 plugin.js 代码
  • 如下:
    CKEDITOR.plugins.add( 'textindent', {icons: 'textindent',availableLangs: {'pt-br':1, 'en':1},lang: 'pt-br, en',init: function( editor ) {var indentation = editor.config.indentation;var indentationKey = editor.config.indentationKey;if(typeof(indentation) == 'undefined')indentation = '2em';if(typeof(indentationKey) == 'undefined')indentationKey = 'tab';if(editor.ui.addButton){editor.ui.addButton( 'textindent', {// label: editor.lang.textindent.labelName,label: '首行缩进',command: 'ident-paragraph',});}if( indentationKey !== false){editor.on('key', function(ev) {if(ev.data.domEvent.$.key.toLowerCase() === indentationKey.toLowerCase().trim() || ev.data.keyCode === indentationKey){editor.execCommand('ident-paragraph');ev.cancel();  }});}editor.on( 'selectionChange', function(){var style_textindente = new CKEDITOR.style({element: 'p',styles: { 'text-indent': indentation },overrides: [{element: 'text-indent', attributes: { 'size': '0'}}]});if( style_textindente.checkActive(editor.elementPath(), editor) )editor.getCommand('ident-paragraph').setState(CKEDITOR.TRISTATE_ON);elseeditor.getCommand('ident-paragraph').setState(CKEDITOR.TRISTATE_OFF);});editor.addCommand("ident-paragraph", {allowedContent: 'p{text-indent}',requiredContent: 'p',exec: function(evt) {var range = editor.getSelection().getRanges()[0]; var walker = new CKEDITOR.dom.walker( range ),node;var state = editor.getCommand('ident-paragraph').state;while ( ( node = walker.next() ) ) {if ( node.type == CKEDITOR.NODE_ELEMENT ) {if(node.getName() === "p"){// console.log(node);editor.fire('saveSnapshot');if( state == CKEDITOR.TRISTATE_ON){node.removeStyle("text-indent");editor.getCommand('ident-paragraph').setState(CKEDITOR.TRISTATE_OFF);}else{// 第一个是span,获取span标签var child_span = node.$.firstElementChild; console.log(child_span);if(child_span!=null){// 获取span里的 font-size属性的值var spanFontSize = child_span.style.fontSize;indentation = 2 * parseFloat(spanFontSize) + "px";  // 更改缩进量和缩进单位}node.setStyle( "text-indent", indentation );editor.getCommand('ident-paragraph').setState(CKEDITOR.TRISTATE_ON);}}}}if(node === null){node = editor.getSelection().getStartElement().getAscendant('p', true);console.log(node);// var outerHtml = node.getOuterHtml();// console.log(outerHtml);// 获取 childNodes// var childNodes = node.$.childNodes; // console.log(childNodes);// 第一个是span,获取span标签var child_span = node.$.firstElementChild; // console.log(child_span);if(child_span!=null){// 获取span里的 font-size属性的值var spanFontSize = child_span.style.fontSize;indentation = 2 * parseFloat(spanFontSize) + "px"; // 更改缩进量和缩进单位// console.log(spanFontSize);// console.log(indentation);}editor.fire('saveSnapshot');if( state == CKEDITOR.TRISTATE_ON){node.removeStyle("text-indent");editor.getCommand('ident-paragraph').setState(CKEDITOR.TRISTATE_OFF);}else{node.setStyle( "text-indent", indentation );editor.getCommand('ident-paragraph').setState(CKEDITOR.TRISTATE_ON);}}}});}});
3.2.2.5 优化后完整 plugin.js 代码
  • 上述代码修改2处,并且原本也有重复代码,优化后如下:
    CKEDITOR.plugins.add( 'textindent', {icons: 'textindent',availableLangs: {'pt-br':1, 'en':1},lang: 'pt-br, en',init: function( editor ) {var indentation = editor.config.indentation;var indentationKey = editor.config.indentationKey;if(typeof(indentation) == 'undefined')indentation = '2em';if(typeof(indentationKey) == 'undefined')indentationKey = 'tab';if(editor.ui.addButton){editor.ui.addButton( 'textindent', {// label: editor.lang.textindent.labelName,label: '首行缩进',command: 'ident-paragraph',});}if( indentationKey !== false){editor.on('key', function(ev) {if(ev.data.domEvent.$.key.toLowerCase() === indentationKey.toLowerCase().trim() || ev.data.keyCode === indentationKey){editor.execCommand('ident-paragraph');ev.cancel();  }});}editor.on( 'selectionChange', function(){var style_textindente = new CKEDITOR.style({element: 'p',styles: { 'text-indent': indentation },overrides: [{element: 'text-indent', attributes: { 'size': '0'}}]});if( style_textindente.checkActive(editor.elementPath(), editor) )editor.getCommand('ident-paragraph').setState(CKEDITOR.TRISTATE_ON);elseeditor.getCommand('ident-paragraph').setState(CKEDITOR.TRISTATE_OFF);});editor.addCommand("ident-paragraph", {allowedContent: 'p{text-indent}',requiredContent: 'p',exec: function(evt) {var range = editor.getSelection().getRanges()[0]; var walker = new CKEDITOR.dom.walker( range ),node;var state = editor.getCommand('ident-paragraph').state;while ( ( node = walker.next() ) ) {if ( node.type == CKEDITOR.NODE_ELEMENT ) {if(node.getName() === "p"){calculateAndDoFirstLineIndent();}}}if(node === null){node = editor.getSelection().getStartElement().getAscendant('p', true);calculateAndDoFirstLineIndent();}/*** 计算并处理首行缩进*/function calculateAndDoFirstLineIndent(){editor.fire('saveSnapshot');if( state == CKEDITOR.TRISTATE_ON){node.removeStyle("text-indent");editor.getCommand('ident-paragraph').setState(CKEDITOR.TRISTATE_OFF);}else{// 第一个是span,获取span标签var child_span = node.$.firstElementChild; if(child_span!=null){// 获取span里的 font-size属性的值var spanFontSize = child_span.style.fontSize;// 更改缩进量和缩进单位(缩进2个字体的空间)indentation = 2 * parseFloat(spanFontSize) + "px"; }node.setStyle( "text-indent", indentation );editor.getCommand('ident-paragraph').setState(CKEDITOR.TRISTATE_ON);}}}});}});

4. 下载项目

  • 如果不想下载官网项目,下载后还需要单独下载插件,可直接从下面链接下载,包括常用的插件,项目拿来即用,如下:

    ckeditor4(4.22.1-含上传图片、快速表格、首行缩进等插件).

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

4.1 问题描述

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

5.1 查看自己的CKEditor4版本号

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

5.2 关于Paste from Word插件

5.2.1 下载Paste from Word插件

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

5.3 解压所有插件

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

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

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

相关文章

并查集~~

值为v的数封为Node型的节点&#xff0c;除了nodes中保存了V和Node的对应关系外&#xff0c;并查集相关的parents&#xff0c;sizeMap都是用Node来关联的。 #include<iostream> #include<map> #include<vector> #include<stack> using namespace std;t…

建一个wordpress外贸独立站的费用构成与分析

外贸独立站因为独特的优势&#xff0c;越来越被做外贸的跨境电商所青睐。简站主题经常接到做外贸的老板咨询&#xff0c;建一个wordpress外贸独立站大约多少钱&#xff0c;也是被问的最多的问题之一。下面小简就从几个方面讲一下&#xff0c;决定一个wordpress外贸独立站的费用…

TypeScript的使用:可以谈谈TypeScript的优点以及如何在实际项目中引入和使用TypeScript,包括一些基本的语法和编程技巧。

TypeScript是JavaScript的一个超集&#xff0c;它主要提供了类型系统和对ES6的兼容。下面是一些TypeScript的主要优点&#xff1a; 静态类型检查&#xff1a;这是TypeScript最主要的功能&#xff0c;它可以在编译阶段发现和报告错误&#xff0c;帮助开发者提前找到问题。更好的…

TensorFlow轻松入门(二)——小案例:ANN构建一个或运算的模型

或运算&#xff1a; 位与位进行比较&#xff0c;如果有任一个是1&#xff0c;结果为1&#xff1b;两个都为0&#xff0c;结果则为0。 实现步骤 构建Feature与Label数据 创建顺序模型 指定模型的第一层&#xff0c;线性模型 添加一层激活函数 模型编译 模型训练 模型预测…

GitHub 异常——无法连接22端口:Connection timed out

GitHub 异常——无法连接22端口&#xff1a;Connection timed out 问题描述原因分析&#xff1a;解决方案&#xff1a;参考 问题描述 正常配置并使用使用SSH方式&#xff0c;使用以下命令git clone、git pull、git push&#xff0c;报错如下&#xff1a; ssh: connect to host …

C语言-链表实现贪吃蛇控制台游戏

使用C语言和链表实现贪吃蛇游戏 一、引言 贪吃蛇游戏是一个经典的游戏&#xff0c;它的玩法简单而富有挑战性。在这个博客中&#xff0c;我将分享如何使用C语言和链表数据结构来自主实现贪吃蛇游戏。我会详细介绍游戏的设计思路、编码过程、遇到的问题及解决方案&#xff0c;…

翻译《The Old New Thing》 - Why does the CreateProcess function do autocorrection?

Why does the CreateProcess function do autocorrection? - The Old New Thing (microsoft.com)https://devblogs.microsoft.com/oldnewthing/20050623-03/?p35213 Raymond Chen 在 2005 年 6 月 23 日 为什么 CreateProcess 函数会进行自动更正&#xff1f; 译注&#xff…

【华为OD机试C卷D卷】符号运算(C++/Java/Python)

【华为OD机试】-(A卷+B卷+C卷+D卷)-2024真题合集目录 【华为OD机试】-(C卷+D卷)-2024最新真题目录 题目描述 给定一个表达式,求其分数计算结果。 表达式的限制如下: 所有的输入数字皆为正整数(包括0) 仅支持四则运算(+-*,/)和括号 结果为整数或分数,分数必须化为最简格…

13_Scala面向对象编程_伴生对象

文章目录 1.伴生对象1.1 scala的一个性质&#xff0c;scala文件中的类都是公共的&#xff1b;1.2 scala使用object关键字也可以声明对象&#xff1b; 3.关于伴生对象和类4.权限修饰符&#xff0c;scala仅有private;5.伴生对象可以访问伴生类中的私有属性&#xff1b;6.案例7.伴…

世界十大最具影响力人物颜廷利:真正的高人,靠谱的行为

对于真正的‘高人’&#xff0c; 在面对‘狗洞’时&#xff0c; 他们都比较理智&#xff0c; 从来都不趾高气扬&#xff0c; 因为他们晓得&#xff0c; 倘若说不能弯下腰&#xff0c; 并而直立着身子走路的话&#xff0c; 那么&#xff0c; 他们就不是纯粹的‘高人’&#xff0…

华为OD机试题:字符串变换最小字符串

题目描述&#xff1a; 给定一个字符串s&#xff0c;最多只能进行一次变换&#xff0c;返回变换后能得到的最小字符串&#xff08;按照字典序进行比较&#xff09;。 变换规则&#xff1a;交换字符串中任意两个不同位置的字符。 一串小写字母组成的字符串s 输出描述 按照要求进…

启程Python机器学习之旅:从JupyterLab到神经网络初探

引言 在数据科学和人工智能的浪潮中&#xff0c;Python已经成为最受欢迎的编程语言之一。其简洁的语法和强大的库支持&#xff0c;使得从科研到商业的各个领域都能见到Python的身影。今天&#xff0c;我们将通过JupyterLab——一个交互式的开发环境&#xff0c;开始我们的Pyth…

1850H-The Third Letter

题目链接&#xff1a;The Third Letter 本道题目就是带权并查集的模板题&#xff0c;但又好久没学忘了&#xff0c;再复习一遍。。。 路径压缩函数模板&#xff1a; int root(int x){if(pre[x]!x){int troot(pre[x]);d[x]d[pre[x]];pre[x]t;}return pre[x]; } 之后就模拟一…

c++ 红黑树学习及简单实现

1. 了解红黑树 1.1. 概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个节点增加一个存储位表示节点的颜色&#xff0c;可以是红色&#xff0c;或是黑色&#xff0c;通过对任何一条从根到叶子的路径上各个节点的着色方式进行限制&#xff0c;红黑树确保没有一条路…

初识webpack项目

新建一个空的工程 -> % mkdir webpack-project 为了方便追踪执行每一个命令&#xff0c;最终产生了哪些变更&#xff0c;将这个空工程初始化成git项目 -> % cd webpack-project/-> % git init Initialized empty Git repository in /Users/lixiang/frontworkspace/…

selenium自动化,Chrome 启动参数

常用参数 常用参数请参考下表。 序号参数说明1--allow-outdated-plugins不停用过期的插件。2--allow-running-insecure-content默认情况下&#xff0c;https 页面不允许从 http 链接引用 javascript/css/plug-ins。添加这一参数会放行这些内容。3--allow-scripting-gallery允许…

R语言 统计篇之T-test 检验

《Cookbook for R》 Statistical Analysis 数据统计篇之 T-test 检验 当你想测试两个样本是否来自均值不同的群体 或者测试一个样本是否来自均值不同于某个理论均值的群体。 示例数据&#xff1a;R内置数据集 sleep sleep #> extra group ID #> 1 0.7 1 1 #…

AI文章框架分析

大家在文章写作的时候结构难免会有点凌乱&#xff0c;但是自己可能无法发现问题所在&#xff0c;那么有没有一款工具可以帮你自动分析你写的文章框架存在的问题&#xff0c;然后并给你详细的分析报告呢&#xff1f;今天给大家介绍一下文件框架分析助手&#xff01; 使用说明 打…

如何配置X86应用程序启用大地址模式(将用户态虚拟内存从2GB扩充到3GB),以解决用户态虚拟内存不够用问题?(项目实战案例解析)

目录 1、概述 2、为什么不直接将程序做成64位的&#xff1f; 3、进程内存不足导致程序发生闪退的案例分析 3.1、问题说明 3.2、将Windbg附加到程序进程上进行动态调试 3.3、动态调试的Windbg感知到了中断&#xff0c;中断在DebugBreak函数调用上 3.4、malloc或new失败的…

IoTDB 入门教程 问题篇②——RPC远程连接IoTDB服务器失败

文章目录 一、前文二、发现问题三、分析问题四、检查6667端口是否监听所有IP五、检查ECS云服务器的安全组是否允许六、检查Linux防火墙是否允许 一、前文 IoTDB入门教程——导读 二、发现问题 使用本地IP127.0.0.1可以连接IoTDB服务器使用远程IPxx.xx.xx.xx却连接不到。提示你…