富文本编辑器CKEditor4简单使用-04(跟源码设置image2插件图片的默认宽高等相关配置)

本文主要是介绍富文本编辑器CKEditor4简单使用-04(跟源码设置image2插件图片的默认宽高等相关配置),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

富文本编辑器CKEditor4简单使用-04(跟源码设置image2插件图片的默认宽高等相关配置)

  • 1. 前言
    • 1.1 CKEditor4快速上手
  • 2. CKEditor4的一般配置
    • 2.1 工具栏相关
    • 2.2 插件相关
    • 2.3 设置界面宽高等
  • 3. CKEditor4的图片相关配置
    • 3.1 关于增强的图像插件的必要配置
    • 3.2 隐藏image2插件的上传界面的URL
      • 3.2.1 默认界面
      • 3.2.2 修改源码,隐藏
    • 3.3 禁止图片上传完毕后自动填充图片长和宽
    • 3.4 上传图片之后设置宽、高默默认值
      • 3.4.1 说明
      • 3.4.2 跟源码,找控制款高的代码
      • 3.4.3 方法1:修改源码1处(在 image2.js 里更改)
        • 3.4.3.1 添加宽高默认配置(代码1处 简单设置——初版)
        • 3.4.3.2 添加宽高默认配置(代码1处 简单设置——优化1)
        • 3.4.3.3 添加宽高默认配置(代码1处 简单设置——优化2)
      • 3.4.4 方法2:修改源码2处(在 plugin.js 里更改)
        • 3.4.4.1 说明
        • 3.4.4.2 在 plugin.js 中实现宽高默认配置(问题)
  • 4. 更多配置

1. 前言

1.1 CKEditor4快速上手

  • 快速入门,如下:
    富文本编辑器CKEditor4简单使用-01(入门).
  • 关于CKEditor4的插件安装及使用,如下:
    富文本编辑器CKEditor4简单使用-02(常用插件安装及使用).
  • 关于CKEditor4的图片上传功能
    富文本编辑器CKEditor4简单使用-03(图片上传).

2. CKEditor4的一般配置

2.1 工具栏相关

  • 工具栏配置组(一般配置),配置属性,例子如下:
    config.toolbarGroups = [{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },'/',{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },'/',{ name: 'styles', groups: [ 'styles' ] },{ name: 'colors', groups: [ 'colors' ] },
    ];
    
  • 工具栏配置(高级配置),配置属性,例子如下:
    config.toolbar = [{ name: 'document', items: [ 'Source', '-', 'Save', 'ExportPdf', 'Preview', 'Print', '-', 'Templates' ] },{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar' ] },'/',{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },'/',{name: 'paragraph', items: ['NumberedList', 'BulletedList', 'Language']}
    ];
    
  • 工具栏中移除不需要的按钮工具,例如:
    config.removeButtons = 'Strike,Subscript,Superscript,Outdent,Language';
    
  • 关于工具栏的更多,入门文章里有些,可参考:
    富文本编辑器CKEditor4简单使用-01(入门).

2.2 插件相关

2.3 设置界面宽高等

  • 更多请去官网,这些都是源码自带的可配置的!

3. CKEditor4的图片相关配置

3.1 关于增强的图像插件的必要配置

  • 开启插件,如下:
    config.extraPlugins = 'image2,uploadimage';
    
  • 接口配置,如下:
    // 1. 注释掉的话,【上传】按钮不展示
    config.filebrowserImageUploadUrl = 'http://localhost:8993/cke4/file/upload/uploadFileTest2';// 2. 这个配置是用于拖拉拽,贴图
    config.uploadUrl = 'http://localhost:8993/cke4/file/upload/uploadFileTest2';// 3. 这个注释掉可能使增强上传图片界面失效,回到默认界面,【上传】按钮丢失(只是可能失效)
    // config.filebrowserImageBrowseUrl = 'http://localhost:8993/cke4/file/upload/uploadFileTest2'; // 4. filebrowserImageBrowseUrl 与 filebrowserBrowseUrl都注释掉的话,【浏览服务器】按钮不展示
    // config.filebrowserBrowseUrl = 'http://localhost:8993/cke4/file/upload/uploadFileTest2';// 5. 这个配置是控制什么的?
    // config.filebrowserUploadUrl = 'http://localhost:8993/cke4/file/upload/uploadFileTest2';
    

3.2 隐藏image2插件的上传界面的URL

3.2.1 默认界面

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

3.2.2 修改源码,隐藏

  • 这个好像没有对应的配置项,如果想要隐藏,需要修改源码。
  • 修改处代码如下:
    • 修改前代码:
      在这里插入图片描述
    • 修改后代码:
      // 自定义配置项 image2_server_url_hideFlage ,如果配置了false就不隐藏,否则隐藏(即:默认是隐藏的)
      hidden: editor.config.image2_server_url_hideFlage === false ? false : true,
      
      在这里插入图片描述
  • 然后就可以使用配置控制展示和隐藏,看效果:
    • 如果不加配置,默认隐藏:
      在这里插入图片描述
    • 如果配置false,就展示:
      config.image2_server_url_hideFlage = false;
      
      在这里插入图片描述

3.3 禁止图片上传完毕后自动填充图片长和宽

  • 这个是系统自带的参数,可以配置,先看默认不配置的效果:
    在这里插入图片描述
  • 如果配置 false 之后,效果如下(不过,个人觉得这个没有必要设置,显示着还挺好,还方便对比调整图片大小):
    // 设置为false,禁止图片上传完毕后自动填充图片长和宽
    config.image2_prefillDimensions = false;
    
    在这里插入图片描述

3.4 上传图片之后设置宽、高默默认值

3.4.1 说明

  • 为啥有想设置默认值的需求,主要是有的图片太大,上传之后铺满了编辑区域,虽然可拖拽改变尺寸,但是目前还得找到图片的最右下角点击拖拽,也不是很方便,如果能控制图片默认不展示那个大,更好调整,加载也快,关于这个设置默认值的源码没有配置,所以也是需要自己自定义配置并添加。

3.4.2 跟源码,找控制款高的代码

  • 根据入口跟源码,如下:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

3.4.3 方法1:修改源码1处(在 image2.js 里更改)

3.4.3.1 添加宽高默认配置(代码1处 简单设置——初版)
  • 先从简单处随便设置一个数字看效果,如下:
    在这里插入图片描述
    在这里插入图片描述
  • 所以,可以在这里设置,但是如果写死的话,好像也不太好,所以还是配置的好些,继续吧……
3.4.3.2 添加宽高默认配置(代码1处 简单设置——优化1)
  • 代码如下:

    // 自定义配置项 image2_default_width名字自己起,和代码里的名字保持一致即可
    config.image2_default_width = 160;
    config.image2_default_height = 290;
    
    widthField.setValue( editor.config.image2_prefillDimensions === false ? 0 : editor.config.image2_default_width );
    heightField.setValue( editor.config.image2_prefillDimensions === false ? 0 : editor.config.image2_default_height );
    

    在这里插入图片描述

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

3.4.3.3 添加宽高默认配置(代码1处 简单设置——优化2)
  • 上面看着很完美了,但是还有个问题,得按着图片的比例缩放图片呀,自己设置一个款高默认值,图片很有可能变形,所以,需要找一个根据宽度的值计算高度,根据高度的值计算宽度的方法,这个源码里是有的,因为当你输入宽度 或 高度的时候,另一个值是自动计算出来的,那我们只需要拿来即用就行!
  • 先找到源码的计算规则,如下:
    在这里插入图片描述
  • 然后进行优化,优化代码如下:
    在这里插入图片描述
    /**
    * 优化: 
    * 1. 如果默认宽度配置了,直接计算默认高度,高度不再取默认值
    * 2. 如果默认高度配置了,直接计算默认宽度,宽度不取默认值
    * 3. 二者都配置的情况下,以配置宽度为主
    * 4. 二者都没有配置的情况下,取图片原始值
    */
    var image2_width = editor.config.image2_default_width;
    var image2_height = editor.config.image2_default_height;
    if(image2_width){image2_height = Math.round( height * ( image2_width / width ) );
    }else if(image2_height){image2_width = Math.round( width * ( image2_height / height ) );
    }else{image2_width = width;image2_height = height;
    }
    widthField.setValue( editor.config.image2_prefillDimensions === false ? 0 : image2_width );
    heightField.setValue( editor.config.image2_prefillDimensions === false ? 0 : image2_height );
    
  • 配置代码如下:
    /*** 自定义配置项 image2_default_width名字自己起,和代码里的名字保持一致即可* 可配置一个,配置两个的时候,以配置宽度优先*/
    config.image2_default_width = 190;
    config.image2_default_height = 290;
    
  • 效果,如下:
    在这里插入图片描述

3.4.4 方法2:修改源码2处(在 plugin.js 里更改)

3.4.4.1 说明
  • 如果在另外一处配置的话,如下:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
3.4.4.2 在 plugin.js 中实现宽高默认配置(问题)
  • 在上面代码处可以设置,但是此处取不到 config.js 配置文件的值,需要把默认值写在 plugin.js 里,这样的话,如果想修改默认值还得翻来覆去,挺麻烦的,暂且不用此方式,可能有其他方法,如果各位童鞋有,可以交流!

4. 更多配置

  • 参考官网:
    https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html.

这篇关于富文本编辑器CKEditor4简单使用-04(跟源码设置image2插件图片的默认宽高等相关配置)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/672949

相关文章

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

C 语言中enum枚举的定义和使用小结

《C语言中enum枚举的定义和使用小结》在C语言里,enum(枚举)是一种用户自定义的数据类型,它能够让你创建一组具名的整数常量,下面我会从定义、使用、特性等方面详细介绍enum,感兴趣的朋友一起看... 目录1、引言2、基本定义3、定义枚举变量4、自定义枚举常量的值5、枚举与switch语句结合使用6、枚

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

CentOS7更改默认SSH端口与配置指南

《CentOS7更改默认SSH端口与配置指南》SSH是Linux服务器远程管理的核心工具,其默认监听端口为22,由于端口22众所周知,这也使得服务器容易受到自动化扫描和暴力破解攻击,本文将系统性地介绍... 目录引言为什么要更改 SSH 默认端口?步骤详解:如何更改 Centos 7 的 SSH 默认端口1

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H