富文本编辑器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 关于安装插件的其他详细内容
    • 2.7 下载项目
  • 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(常用插件安装及使用).

2.7 下载项目

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

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

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.
  • 感兴趣的、用过的朋友可以交流一下!

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

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

相关文章

[Meachines][Hard]Office

Main $ nmap -sC -sV 10.10.11.3 --min-rate 1000 CMS:joomla # echo 10.10.11.3 office.htb DC.office.htb>>/etc/hosts 在扫描报告中,可以看到robots.txt目录泄露 http://10.10.11.3/administrator/index.php 根据CVE-2023-23752存在未授权访问 http://10.10.11.3/…

【数学建模】2024五一数学建模C题完整论文代码更新

最新更新&#xff1a;2024五一数学建模C题 煤矿深部开采冲击地压危险预测&#xff1a;建立基于多域特征融合与时间序列分解的信号检测与区间识别模型完整论文已更新 2024五一数学建模题完整代码和成品论文获取↓↓↓↓↓ https://www.yuque.com/u42168770/qv6z0d/gyoz9ou5upv…

hive分区上传数据

hive分区上传数据 目录 hive分区上传数据 一、开启HIVE中分区表支持中文字段 二、分区表操作 1.建表语句 2.分区表插入数据 3.查询分区 4.删除分区 5.恢复被删除分区 6.添加分区 7.创建多级分区&#xff08;插入数据与单级分区类似&#xff09; 一、开启HIVE中分区表支…

探索高级聚类技术:使用LLM进行客户细分

在数据科学领域&#xff0c;客户细分是理解和分析客户群体的重要步骤。最近&#xff0c;我发现了一个名为“Clustering with LLM”的GitHub仓库&#xff0c;它由Damian Gil Gonzalez创建&#xff0c;专门针对这一领域提供了一些先进的聚类技术。在这篇文章中&#xff0c;我将概…

Linux下top命令指标说明

目录 Linux下top命令指标说明1. 概览2. CPU利用率3. 内存利用率4. 进程信息 Linux下top命令指标说明 在Linux系统中&#xff0c;top 命令是一个用于实时监视系统运行状态的工具。通过 top 命令&#xff0c;我们可以了解系统的负载情况、CPU利用率、内存使用情况以及各个进程的…

cmake的使用方法: 多个源文件的编译

一. 简介 前面一篇文章学习了针对只有一个 .c源文件&#xff0c;如何编写 CMakeLists.txt内容&#xff0c;从而使用 cmake工具如何编译工程。文章如下&#xff1a; cmake的使用方法: 单个源文件的编译-CSDN博客 本文学习针对 多个 .c源文件&#xff0c; CMakeLists.txt文件如…

【算法设计与分析】实验报告c++实现(矩阵链相乘问题、投资问题、背包问题、TSP问题、数字三角形)

一、实验目的 1&#xff0e;加深学生对动态规划算法设计方法的基本思想、基本步骤、基本方法的理解与掌握&#xff1b; 2&#xff0e;提高学生利用课堂所学知识解决实际问题的能力&#xff1b; 3&#xff0e;提高学生综合应用所学知识解决实际问题的能力。 二、实验任务 1、…

Mac环境下ollama部署和体验

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 关于ollama ollama和LLM&#xff08;大型语言模型&#xff09;的关系&#xff0c;类似于docker和镜像&#xff0c;可以在ollama服务中管理和运行各种LLM&…

Java | Leetcode Java题解之第63题不同路径II

题目&#xff1a; 题解&#xff1a; class Solution {public int uniquePathsWithObstacles(int[][] obstacleGrid) {int n obstacleGrid.length, m obstacleGrid[0].length;int[] f new int[m];f[0] obstacleGrid[0][0] 0 ? 1 : 0;for (int i 0; i < n; i) {for (i…

spring boot学习第十八篇:使用clickhouse

1、pom.xml文件内容如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://…

Vitis HLS 学习笔记--MAXI手动控制突发传输

目录 1. 简介 2. MAXI 突发传输详解 2.1 突发传输的前置条件 2.2 hls::burst_maxi 详解 2.2.1 基本知识 2.2.2 hls::burst_maxi 构造函数 2.2.3 hls::burst_maxi 读取方法 2.2.4 hls::burst_maxi 写入方法 2.3 示例一 2.4 示例二 3. 总结 1. 简介 这篇文章探讨了在…

win11 Terminal 部分窗口美化

需求及分析&#xff1a;因为在 cmd、anaconda prompt 窗口中输入命令较多&#xff0c;而命令输入行和输出结果都是同一个颜色&#xff0c;不易阅读&#xff0c;故将需求定性为「美化窗口」。 美化结束后&#xff0c;我在想是否能不安装任何软件&#xff0c;简单地通过调整主题颜…

前端高频算法

分析算法排序&#xff1a; 时间复杂度: 一个算法执行所耗费的时间。 空间复杂度: 运行完一个程序所需内存的大小。 执行效率、内存消耗、稳定性 三方面入手。 1. 排序 1.1 冒泡排序 冒泡的过程只涉及相邻数据的交换操作&#xff0c;所以它的空间复杂度为 O(1)。 为了保证…

详细设计(上)

结构程序化 三种基本控制结构 其他常用控制结构 人机界面设计 三条“黄金规则” 1、置用户于控制之下 2、减少用户记忆负担 3、保持界面一致 设计问题 设计人机界面过程中会遇到的4个问题&#xff1a; 1、系统响应时间 2、用户帮助设施 3、出错信息处理 4、命令交互 设计过…

每日算法之二叉树的层序遍历

题目描述 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;[[3],[9,20],[15,7]] 示例 2&#…

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…

采用“3+1”模式,开展新部门组建的各项工作解决思路

【背景】 A公司成立于2000年&#xff0c;位于浙江省杭州市&#xff0c;是一家大中型即将上市的公司&#xff0c;近年来发展一直不错&#xff1b;同时A公司还有另外一个产业是国家级公共服务平台&#xff0c;由“1平台”、“6中心”构成&#xff0c;主要围绕园区及区域做服务。…

搭建智能客服机器人设计流程

一、检索型机器人FAQ-Bot 在客服处理的问题中70%都是简单的问答业务&#xff0c;只要找到QA知识库中与用户当前问句语义最相近的标准问句&#xff0c;取出答案给用户就可以了。FAQ-Bot就是处理这类问题的。在没有使用深度学习算法之前&#xff0c;通常采用检索NLP技术处理。 …

深入图像分类:使用美国手语数据集训练定制化神经网络

引言 在前一篇博客中&#xff0c;我们探讨了如何使用MNIST数据集训练一个基础的神经网络来进行手写数字识别。在本文中&#xff0c;我们将更进一步&#xff0c;使用美国手语字母表&#xff08;ASL&#xff09;数据集来构建一个定制化的图像分类模型。通过这个过程&#xff0c;…

免费通配符证书的申请指南——从申请到启动https

如果您的网站拥有众多二级子域名&#xff0c;那么通配符证书证书是最好的选择。 免费通配符申请流程如下&#xff1a; 1 创建证书服务商账号 首先选择一个提供免费通配符的服务商&#xff0c;打开国产服务商JoySSL官网&#xff0c;创建一个账号&#xff08;注册账号时填写注册…