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

2024-02-03 04:12
文章标签 简单 配置 源码 设置 使用 图片 相关 默认 04 插件 文本编辑 image2 高等 ckeditor4

本文主要是介绍富文本编辑器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。

相关文章

使用Python实现可恢复式多线程下载器

使用Python实现可恢复式多线程下载器

《使用Python实现可恢复式多线程下载器》在数字时代,大文件下载已成为日常操作,本文将手把手教你用Python打造专业级下载器,实现断点续传,多线程加速,速度限制等功能,感兴趣的小伙伴可以了解下... 目录一、智能续传：从崩溃边缘抢救进度二、多线程加速：榨干网络带宽三、速度控制：做网络的好邻居四、终端交互
阅读更多...
Python中注释使用方法举例详解

Python中注释使用方法举例详解

《Python中注释使用方法举例详解》在Python编程语言中注释是必不可少的一部分,它有助于提高代码的可读性和维护性,：本文主要介绍Python中注释使用方法的相关资料,需要的朋友可以参考下... 目录一、前言二、什么是注释？示例：三、单行注释语法：以 China编程# 开头，后面的内容为注释内容示例：示例：四
阅读更多...
Linux中SSH服务配置的全面指南

Linux中SSH服务配置的全面指南

《Linux中SSH服务配置的全面指南》作为网络安全工程师,SSH（SecureShell）服务的安全配置是我们日常工作中不可忽视的重要环节,本文将从基础配置到高级安全加固,全面解析SSH服务的各项参... 目录概述基础配置详解端口与监听设置主机密钥配置认证机制强化禁用密码认证禁止root直接登录实现双因素
阅读更多...
Go语言数据库编程GORM 的基本使用详解

Go语言数据库编程GORM 的基本使用详解

《Go语言数据库编程GORM的基本使用详解》GORM是Go语言流行的ORM框架,封装database/sql,支持自动迁移、关联、事务等,提供CRUD、条件查询、钩子函数、日志等功能,简化数据库操作... 目录一、安装与初始化1. 安装 GORM 及数据库驱动2. 建立数据库连接二、定义模型结构体三、自动迁
阅读更多...
ModelMapper基本使用和常见场景示例详解

ModelMapper基本使用和常见场景示例详解

《ModelMapper基本使用和常见场景示例详解》ModelMapper是Java对象映射库,支持自动映射、自定义规则、集合转换及高级配置（如匹配策略、转换器）,可集成SpringBoot,减少样板... 目录1. 添加依赖2. 基本用法示例：简单对象映射3. 自定义映射规则4. 集合映射5. 高级配置匹
阅读更多...
Spring 框架之Springfox使用详解

Spring 框架之Springfox使用详解

《Spring框架之Springfox使用详解》Springfox是Spring框架的API文档工具,集成Swagger规范,自动生成文档并支持多语言/版本,模块化设计便于扩展,但存在版本兼容性、性... 目录核心功能工作原理模块化设计使用示例注意事项优缺点优点缺点总结适用场景建议总结Springfox 是
阅读更多...
浏览器插件cursor实现自动注册、续杯的详细过程

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机
阅读更多...
嵌入式数据库SQLite 3配置使用讲解

嵌入式数据库SQLite 3配置使用讲解

《嵌入式数据库SQLite3配置使用讲解》本文强调嵌入式项目中SQLite3数据库的重要性,因其零配置、轻量级、跨平台及事务处理特性,可保障数据溯源与责任明确,详细讲解安装配置、基础语法及SQLit... 目录0、惨痛教训1、SQLite3环境配置（1）、下载安装SQLite库（2）、解压下载的文件（3）、
阅读更多...
使用Python绘制3D堆叠条形图全解析

使用Python绘制3D堆叠条形图全解析

《使用Python绘制3D堆叠条形图全解析》在数据可视化的工具箱里,3D图表总能带来眼前一亮的效果,本文就来和大家聊聊如何使用Python实现绘制3D堆叠条形图,感兴趣的小伙伴可以了解下... 目录为什么选择 3D 堆叠条形图代码实现：从数据到 3D 世界的搭建核心代码逐行解析细节优化应用场景：3D 堆叠图
阅读更多...
Springboot如何正确使用AOP问题

Springboot如何正确使用AOP问题

《Springboot如何正确使用AOP问题》：本文主要介绍Springboot如何正确使用AOP问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录​一、AOP概念二、切点表达式​execution表达式案例三、AOP通知四、springboot中使用AOP导出
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2