富文本编辑器CKEditor4简单使用-01

2024-01-29 00:52
文章标签 简单 使用 01 文本编辑 ckeditor4

本文主要是介绍富文本编辑器CKEditor4简单使用-01，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

富文本编辑器CKEditor4简单使用-01

  • 1. 快速体验入门
    • 1.1 通过从 CDN 加载 CKEditor 来快速体验
    • 1.2 从官方网站下载软件包
      • 1.2.1 官网下载
      • 1.2.2 解压、简单使用（自带index页面示例）
      • 1.2.3 将 CKEditor 4 添加到自己的页面
        • 1.2.3.1 目录结构
        • 1.2.3.2 效果
        • 1.2.3.3 页面例子
      • 1.2.4 关于下载时是否选择Easy Image
        • 1.2.4.1 对比
        • 1.2.4.2 关于Easy Image
  • 2. 工具栏的配置
    • 2.1 打开示例页面
    • 2.2 在自己项目中配置工具栏
      • 2.2.1 默认配置
      • 2.2.2 自定义配置（基本配置）
      • 2.2.3 自定义配置（高级配置）
  • 3. 切换皮肤
    • 3.1 默认皮肤
    • 3.2 下载新皮肤
    • 3.3 设置新皮肤

1. 快速体验入门

1.1 通过从 CDN 加载 CKEditor 来快速体验

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

  • demo代码如下：

    <!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CKEditor</title><!-- <script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script> --><script src="https://cdn.ckeditor.com/4.22.1/full-all/ckeditor.js"></script></head><body><textarea name="editor1"></textarea><script>CKEDITOR.replace( 'editor1' );</script></body></html>

  • 简单说明：

    • 特别版 CKEditor 4 LTS（“长期支持”）以商业条款（“扩展支持模式”）提供，适用于任何希望扩大安全更新和关键错误修复覆盖范围的人。
    • 开源：根据开源许可条款，您可以继续使用 CKEditor 4.22.1 及更低版本。但请注意，开源版本不再附带任何安全更新，因此您的应用程序将面临风险。
    • CKEditor 4 的 URL 结构如下：
      <script src="https://cdn.ckeditor.com/ckeditor5/[version.number]/[distribution]/ckeditor.js"></script>
      • basic - 基本预设
      • standard - 标准预设
      • standard-all - 标准预设以及 CKSource* 创建的所有其他插件
      • full - 完整预设
      • full-all - 完整预设以及 CKSource* 创建的所有其他插件
    • 预设中未包含的插件需要启用 config.extraPlugins 。

  • 参考官网：
    https://cdn.ckeditor.com/.

1.2 从官方网站下载软件包

1.2.1 官网下载

  • 网址如下：
    https://ckeditor.com/ckeditor-4/download/?null-addons=#ckeditor-4.
    在这里插入图片描述
    在这里插入图片描述

1.2.2 解压、简单使用（自带index页面示例）

  • 下载完成之后，解压即可使用：
    在这里插入图片描述
  • 打开samples下的index.html看效果，如下：
    在这里插入图片描述
    在这里插入图片描述

1.2.3 将 CKEditor 4 添加到自己的页面

1.2.3.1 目录结构
  • 如下：
    在这里插入图片描述
1.2.3.2 效果
  • 如下：
    在这里插入图片描述
1.2.3.3 页面例子
  • 如下：
    <!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>A Simple Page with CKEditor 4</title><!-- Make sure the path to CKEditor is correct. --><script src="../ckeditor/ckeditor.js"></script></head><body><form><textarea name="editor1" id="editor1" rows="10" cols="80">This is my textarea to be replaced with CKEditor 4.</textarea><script>// Replace the <textarea id="editor1"> with a CKEditor 4// instance, using default configuration.CKEDITOR.replace( 'editor1' );</script></form></body>
</html>

1.2.4 关于下载时是否选择Easy Image

1.2.4.1 对比
  • 不妨都下载下来对比看一下效果：
    • 下载的zip包含 Easy Image 的，效果如下：
      在这里插入图片描述
      在这里插入图片描述
    • 下载的zip不包含 Easy Image 的，效果如下：
      在这里插入图片描述
  • 总结：
    没有对比就没有伤害，哪个好用看出来了吧，可问题是不是哪个好用就能用的，继续了解一下吧……
1.2.4.2 关于Easy Image
  • 看完下面的再做决定下载时到底勾选Easy Image不？
    在这里插入图片描述
  • 所以接下来我们使用的都是 ckeditor_4.22.1_full.zip（不含Easy Image），关于上传图片的，后续再单独介绍。

2. 工具栏的配置

2.1 打开示例页面

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

2.2 在自己项目中配置工具栏

2.2.1 默认配置

  • 如未做任何配置，默认配置如下（config.js的配置）：
    在这里插入图片描述

2.2.2 自定义配置（基本配置）

  • 只需将上面手动配置工具栏之后生成的配置代码拷贝一下即可，如下：
    /*** @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.* For licensing, see https://ckeditor.com/legal/ckeditor-oss-license*/CKEDITOR.editorConfig = function( config ) {// Define changes to default configuration here. For example:// config.language = 'fr';// config.uiColor = '#AADC6E';// 1. 工具栏配置组config.toolbarGroups = [{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },{ name: 'forms', groups: [ 'forms' ] },'/',{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },{ name: 'links', groups: [ 'links' ] },{ name: 'insert', groups: [ 'insert' ] },'/',{ name: 'styles', groups: [ 'styles' ] },{ name: 'colors', groups: [ 'colors' ] },{ name: 'tools', groups: [ 'tools' ] },{ name: 'others', groups: [ 'others' ] },{ name: 'about', groups: [ 'about' ] }];// 2. 工具栏中移除不需要的按钮工具config.removeButtons = 'Strike,Subscript,Superscript,Outdent';};
  • 看效果：
    在这里插入图片描述

2.2.3 自定义配置（高级配置）

  • 在示例页面点击【高级配置】按钮，查看配置如下：
    在这里插入图片描述
  • 简单看个配置例子，如下：
    在这里插入图片描述
  • 完整高级配置代码如下：
    CKEDITOR.editorConfig = function( config ) {config.toolbar = [{ name: 'document', items: [ 'Source', '-', 'Save', 'NewPage', 'ExportPdf', 'Preview', 'Print', '-', 'Templates' ] },{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },{ name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },'/',{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] },{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },'/',{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },{ name: 'about', items: [ 'About' ] }];
};
  • 更多关于工具栏的配置，请参考下如下地址：
    https://ckeditor.com/docs/ckeditor4/latest/examples/toolbar.html.

3. 切换皮肤

3.1 默认皮肤

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

3.2 下载新皮肤

  • 链接如下：
    https://ckeditor.com/cke4/addons/skins/all?sort_by=field_custom_downloads_value&sort_order=DESC.
  • 比如，下载一个熟悉的皮肤：
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

3.3 设置新皮肤

  • 下载之后，解压、放入skins目录下即可，如下：
    在这里插入图片描述
  • 配置新皮肤：
    config.skin = 'office2013';
  • 看效果：
    在这里插入图片描述

这篇关于富文本编辑器CKEditor4简单使用-01的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/655298。

相关文章

C++使用栈实现括号匹配的代码详解

C++使用栈实现括号匹配的代码详解

《C++使用栈实现括号匹配的代码详解》在编程中,括号匹配是一个常见问题,尤其是在处理数学表达式、编译器解析等任务时,栈是一种非常适合处理此类问题的数据结构,能够精确地管理括号的匹配问题,本文将通过C+... 目录引言问题描述代码讲解代码解析栈的状态表示测试总结引言在编程中，括号匹配是一个常见问题，尤其是在
阅读更多...
Java中String字符串使用避坑指南

Java中String字符串使用避坑指南

《Java中String字符串使用避坑指南》Java中的String字符串是我们日常编程中用得最多的类之一,看似简单的String使用,却隐藏着不少“坑”,如果不注意,可能会导致性能问题、意外的错误容... 目录8个避坑点如下：1. 字符串的不可变性：每次修改都创建新对象2. 使用 == 比较字符串，陷阱满
阅读更多...
Python使用国内镜像加速pip安装的方法讲解

Python使用国内镜像加速pip安装的方法讲解

《Python使用国内镜像加速pip安装的方法讲解》在Python开发中,pip是一个非常重要的工具,用于安装和管理Python的第三方库,然而,在国内使用pip安装依赖时,往往会因为网络问题而导致速... 目录一、pip 工具简介1. 什么是 pip？2. 什么是 -i 参数？二、国内镜像源的选择三、如何
阅读更多...
使用C++实现链表元素的反转

使用C++实现链表元素的反转

《使用C++实现链表元素的反转》反转链表是链表操作中一个经典的问题,也是面试中常见的考题,本文将从思路到实现一步步地讲解如何实现链表的反转,帮助初学者理解这一操作,我们将使用C++代码演示具体实现,同... 目录问题定义思路分析代码实现带头节点的链表代码讲解其他实现方式时间和空间复杂度分析总结问题定义给定
阅读更多...
Linux使用nload监控网络流量的方法

Linux使用nload监控网络流量的方法

《Linux使用nload监控网络流量的方法》Linux中的nload命令是一个用于实时监控网络流量的工具,它提供了传入和传出流量的可视化表示,帮助用户一目了然地了解网络活动,本文给大家介绍了Linu... 目录简介安装示例用法基础用法指定网络接口限制显示特定流量类型指定刷新率设置流量速率的显示单位监控多个
阅读更多...
JavaScript中的reduce方法执行过程、使用场景及进阶用法

JavaScript中的reduce方法执行过程、使用场景及进阶用法

《JavaScript中的reduce方法执行过程、使用场景及进阶用法》：本文主要介绍JavaScript中的reduce方法执行过程、使用场景及进阶用法的相关资料,reduce是JavaScri... 目录1. 什么是reduce2. reduce语法2.1 语法2.2 参数说明3. reduce执行过程
阅读更多...
如何使用Java实现请求deepseek

如何使用Java实现请求deepseek

《如何使用Java实现请求deepseek》这篇文章主要为大家详细介绍了如何使用Java实现请求deepseek功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.deepseek的api创建2.Java实现请求deepseek2.1 pom文件2.2 json转化文件2.2
阅读更多...
python使用fastapi实现多语言国际化的操作指南

python使用fastapi实现多语言国际化的操作指南

《python使用fastapi实现多语言国际化的操作指南》本文介绍了使用Python和FastAPI实现多语言国际化的操作指南,包括多语言架构技术栈、翻译管理、前端本地化、语言切换机制以及常见陷阱和... 目录多语言国际化实现指南项目多语言架构技术栈目录结构翻译工作流1. 翻译数据存储2. 翻译生成脚本
阅读更多...
C++初始化数组的几种常见方法(简单易懂)

C++初始化数组的几种常见方法(简单易懂)

《C++初始化数组的几种常见方法(简单易懂)》本文介绍了C++中数组的初始化方法,包括一维数组和二维数组的初始化,以及用new动态初始化数组,在C++11及以上版本中,还提供了使用std::array... 目录1、初始化一维数组1.1、使用列表初始化（推荐方式）1.2、初始化部分列表1.3、使用std::
阅读更多...
C++ Primer 多维数组的使用

C++ Primer 多维数组的使用

《C++Primer多维数组的使用》本文主要介绍了多维数组在C++语言中的定义、初始化、下标引用以及使用范围for语句处理多维数组的方法,具有一定的参考价值,感兴趣的可以了解一下... 目录多维数组多维数组的初始化多维数组的下标引用使用范围for语句处理多维数组指针和多维数组多维数组严格来说,C++语言没
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2