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

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

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

2.1 下载段落插件 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 关于安装插件的其他详细内容

3. 查看自己的CKEditor4版本号

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

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

4.1 问题描述

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

4.2 关于Paste from Word插件

4.2.1 下载Paste from Word插件

4.3 解压所有插件

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-03 06:04:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-03 06:04:04       100 阅读
  3. 在Django里面运行非项目文件

    2024-05-03 06:04:04       82 阅读
  4. Python语言-面向对象

    2024-05-03 06:04:04       91 阅读

热门阅读

  1. OpenGL 的内置矩阵种种

    2024-05-03 06:04:04       33 阅读
  2. 【.Net Core/.Net8教程】(三)如何优雅地校验参数

    2024-05-03 06:04:04       27 阅读
  3. iframe隐藏scrollbar并且还能够继续滚动

    2024-05-03 06:04:04       32 阅读
  4. 【Python】异常

    2024-05-03 06:04:04       29 阅读
  5. GESP一级 - 第三章 - 第1节 - 标准输入输出

    2024-05-03 06:04:04       25 阅读
  6. 目标跟踪难点及算法介绍

    2024-05-03 06:04:04       32 阅读
  7. 数据结构与算法——栈和队列

    2024-05-03 06:04:04       32 阅读
  8. 图文、视频处理等自媒体工具

    2024-05-03 06:04:04       27 阅读
  9. centos部署前后端项目

    2024-05-03 06:04:04       30 阅读
  10. Docker 虚拟机 WSL

    2024-05-03 06:04:04       35 阅读
  11. Android 当存在双卡时,移动网络默认为SIM卡1

    2024-05-03 06:04:04       38 阅读