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

最新推荐文章于 2025-03-26 11:36:52 发布
最新推荐文章于 2025-03-26 11:36:52 发布
阅读量4.1k 收藏 30
点赞数 24
分类专栏： CKEditor等富文本编辑器插件 文章标签： ckeditor4 富文本编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suixinfeixiangfei/article/details/135895716
版权

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

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 官网下载

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 下载新皮肤

3.3 设置新皮肤

  • 下载之后，解压、放入skins目录下即可，如下：
    在这里插入图片描述
  • 配置新皮肤：
    config.skin = 'office2013';
  • 看效果：
    在这里插入图片描述
CKEditor4配置与开发详细中文说明文档
12-12
一、CKEditor4安装 安装CKEditor 是很容易的。选择合适的过程（新安装或升级），按下面描述的步骤安装。 1、新安装 第一次安装CKEditor，按如下方式进行： 1) 从CKEditor 网站：http://ckeditor.com/download下载最新版本的CKEditor 。  2) 将下载的文档解压到你的website根目录下的ckeditor 目录中。你可以将文档放在你的website的任意路径中。ckeditor 目录是缺省目录。 2、升级 要升级现有的CKEditor 安装，按如下方式进行： 1) 将你的旧编辑文件夹更名为备份文件夹，如ckeditor_o
ckeditor4完整配置说明
05-06
CKeditor的完整toolbar配置说明，很多人不知道，其他它就在sample下面。我单摘出来，方便大家查看
CKEditor编辑器图文混排技巧：从Word到网页的转换
最新发布
weixin_52050572的博客
03-26 750
要求：开源，免费，技术支持编辑器：ckeditor前端：vue2,vue3.vue-cli后端：asp,java,jsp,springboot,php,asp.net,.net core功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,Ubuntu,CentOS,中标麒麟,银河麒麟,统信UOS,信创国产化操作系统。
CKEDITOR改造WORD文档快速发帖，一键转存
alisky119的博客
11-15 1038
编辑器：ckeditor前端：vue2,vue3.vue-cli后端：asp,jsp,php,asp.net,.net core功能：复制粘贴word内容图片该说不说最近这个需求挻火的，今天早上又有网友加我QQ，实际上之前QQ号码就已经在网上公开了，但是还是有很多网友找不到，这个说实话就真没办法了，除了公布QQ号码以外我还公开了微信号码，应该是随便一搜就能够搜到的。有一说一，网友的动手能力还是要稍微加强一下。
富文本编辑器：ckeditor（使用ckeditor4-vue）
gao_grace的博客
02-07 7767
最近，vue项目中使用了富文本编辑器，经过反复研究，选择了ckeditor，ckeditor分为4和5，我们选的4，网上中文的相关资料比较少，总结一下使用的经验。 官方网站：https://ckeditor.com/ckeditor-4/，里面有下载，文档等，Add-ons里面还有额外的plugin。 构建vue项目 首先使用vue create ckeditor_example_1创建vue项目，因为我们的控件使用了element-ui，因此进入项目先下载一下控件npm install --save el
富文本编辑器CKEditor4简单使用-02（常用插件安装及使用）
@素素~的博客
01-29 1791
富文本编辑器CKEditor4简单使用-02（常用插件安装及使用）
CKEditor 4 标准版编辑器
09-20
具备了“Easy Image”的功能，工具栏进行下修改，下载后直接在sample中找到index.html运行页面即可。满足一般的博客、后台文章、文档编辑。如果需要高级版本，可到官网下载学习，都是E文。
CKEditor的使用
weixin_33688840的博客
04-16 190
简介CKEditor是一个富文本编辑器。是一种内嵌于网站中，呈现一种所见即所得的页面效果。常见于博客类型网站、或者电商网站管理系统中对商品文案的编辑功能。基本使用1、首先，下载地址：https://ckeditor.com/ckeditor-4/download/ 下载之后将下载包中的js和css导入项目中。2、然后，写一个简单的带一个textarea的页面。<html><hea...
ckeditor4 使用总结
猎人在吃肉
09-21 7654
ckeditor4 定制工具栏 增加字体 配置主题皮肤 配置 默认字体大小和样式 ckeditor4 中，config.js 配置文件不生效的解决方法 ckeditor4 窗口根据内容高度，动态变化 ckeditor4 内容没有同步到 textarea 中 ckeditor4 图片上传相关的配置 删除 图片上传时的高级配置 tab 项 指定图片上传地址 、清除预览区的文字 springboot2.x 实现后台保存图片 图片上传成功和失败时的返回格式 ckeditor4 只显示内容，工具栏不显示，隐藏
Ckeditor富文本编辑器
无
09-27 7417
开发工具与关键技术： MVC 撰写时间：2021/9/28 下面我们讲Ckeditor富文本编辑器的使用； 要使用Ckeditor富文本编辑器，需要在Ckeditor官网中下载js插件，下载后会得到一个ckeditor文件： 其中包含以下文件，我们主要使用的是ckeditor.js文件： 在页面中使用ckeditor.js： （1） 在页面中script标签引用ckeditor.js （2） textarea标签是富文本编辑器的操作对象，在需要使用富文本编辑器的页面代码位置插入textarea
富文本编辑器CKEditor4简单使用-06（开发自定义插件——中级篇Part1）
@素素~的博客
02-04 1860
富文本编辑器CKEditor4简单使用-06（开发自定义插件——中级篇Part1）
一款比较简单的富文本编辑器
07-27
NULL 博文链接：https://eric-gao.iteye.com/blog/753481
富文本编辑器ckeditor
06-08
1.内容包括ckeditor文件夹,只需引用对应的js文件即可;一份doxc应用说明,页面如何应用,在JavaScript中如何取值赋值 2.文本编辑器样式是带标签的是形式保存到数据库表字段中 3.从数据库获取到字段时,页面会自动解析标签,无需手动解析 4.编辑器的工具栏可根据需要自定义显示 5.普遍浏览器都支持
html 清爽简易的富文本编辑器
12-26
效果查看地址：https://blog.csdn.net/qq_25623257/article/details/103714875
CKEditor4富文本编辑器
03-16
FCKEditor4（ckeditor）富文本编辑器 .
CKEditor 富文本编辑器 ckeditor-java-core
07-26
CKEditor 是一款非常知名的开源富文本编辑器，广泛应用于网页开发中，为用户提供了一种方便的方式来创建和编辑具有格式化的文本内容。它支持多种语言，包括中文，且提供了丰富的插件和自定义选项，可以满足各种复杂...
Flask项目-集成富文本编辑器CKeditor，实现了图片上传、文件上传、Flash上传等功能
06-23
Flask项目——集成富文本编辑器CKeditor，实现了图片上传、文件上传、Flash上传等功能。方便进行项目集成及应用。代码无需任何修改，可完美执行！！！ Flask项目——集成富文本编辑器CKeditor，实现了图片上传、...
django轻松使用富文本编辑器CKEditor的方法
09-21
本文将详细介绍如何在Django框架中集成并使用流行的富文本编辑器CKEditor。 首先，Django是一个功能强大的Python Web框架，它为开发者提供了构建高效且易于维护的Web应用的能力。然而，Django本身并不内置富文本...
文本编辑器CKeditor
09-08
CKEditor是一个富文本编辑器，用于在网页上创建和编辑内容。 为了在项目中使用CKEditor，首先需要将CKEditor的js文件引入到页面中。可以通过在页面中添加以下代码来引入CKEditor的js文件： <script src="ckeditor/ckeditor.js"></script> 或者，如果需要将CKEditor的js文件复制到项目中并引入，可以使用以下代码： <script src="${pageContext.request.contextPath}/Static/js/lib/ckEditor/ckeditor.js"></script> 下载CKEditor的最新版本，并解压缩文件。然后根据需求进行配置和使用。可以根据官方文档中提供的指南进行配置和定制化。 CKEditor提供了丰富的功能和插件，可以帮助用户在网页上创建和编辑各种内容，包括文字、图像、表格等。它还支持自定义样式和布局，以满足不同项目的需求。 总而言之，通过引入CKEditor的js文件并进行配置，您可以在项目中使用该富文本编辑器来创建和编辑内容。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@素素~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值