ckeditor5使用

最新推荐文章于 2024-05-15 12:13:31 发布
最新推荐文章于 2024-05-15 12:13:31 发布
阅读量1.2k 收藏 2
点赞数 1
文章标签： html5 javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39303984/article/details/108727613
版权

ckeditor5使用

下载

ckeditor5

使用

进入build目录,创建demo.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
</head>
<script type="text/javascript" src="ckeditor.js"></script>
<script type="text/javascript" src="translations/zh-cn.js"></script>
<body>
<div id="editor"></div>
</body>
<script>
	    ClassicEditor
        .create(document.querySelector('#editor'), {
            language: {
                ui: 'zh-cn'
            }
        })
        .then(editor => {
            window.editor = editor;
        })
        .catch(error => {
            console.error(error);
        });
</script>
</html>

一个简单的编辑器创建完成.并且可以通过window.editor.getData()获取内容,
window.editor.setData()插入内容

配置图片上传

<script>
	    ClassicEditor
        .create(document.querySelector('#editor'), {
            language: {
                ui: 'zh-cn'
            },
            ckfinder: {
                // Upload the images to the server using the CKFinder QuickUpload command.
                uploadUrl: '上传接口',
                // Define the CKFinder configuration (if necessary).
                options: {
                    resourceType: 'Images'
                }
            }
        })
        .then(editor => {
            window.editor = editor;
        })
        .catch(error => {
            console.error(error);
        });
</script>

需要自己实现一个上传图片的接口,返回如下json格式的信息

{
	uploaded:1
	filename:"xxx.png"
	url:"http://xx"
}

编辑器会使用返回的url作为的src来创建图片

展示编辑器内容

额外创建content-style.css

/*
 * CKEditor 5 (v22.0.0) content styles.
 * Generated on Thu, 27 Aug 2020 12:13:06 GMT.
 * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html
 */

:root {
    --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
    --ck-color-mention-text: hsl(341, 100%, 30%);
    --ck-highlight-marker-blue: hsl(201, 97%, 72%);
    --ck-highlight-marker-green: hsl(120, 93%, 68%);
    --ck-highlight-marker-pink: hsl(345, 96%, 73%);
    --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
    --ck-highlight-pen-green: hsl(112, 100%, 27%);
    --ck-highlight-pen-red: hsl(0, 85%, 49%);
    --ck-image-style-spacing: 1.5em;
    --ck-todo-list-checkmark-size: 16px;
}

/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-yellow {
    background-color: var(--ck-highlight-marker-yellow);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-green {
    background-color: var(--ck-highlight-marker-green);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-pink {
    background-color: var(--ck-highlight-marker-pink);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-blue {
    background-color: var(--ck-highlight-marker-blue);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .pen-red {
    color: var(--ck-highlight-pen-red);
    background-color: transparent;
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .pen-green {
    color: var(--ck-highlight-pen-green);
    background-color: transparent;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-side {
    float: right;
    margin-left: var(--ck-image-style-spacing);
    max-width: 50%;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-left {
    float: left;
    margin-right: var(--ck-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-center {
    margin-left: auto;
    margin-right: auto;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-right {
    float: right;
    margin-left: var(--ck-image-style-spacing);
}
/* ckeditor5-image/theme/image.css */
.ck-content .image {
    display: table;
    clear: both;
    text-align: center;
    margin: 1em auto;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    min-width: 50px;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized {
    max-width: 100%;
    display: block;
    box-sizing: border-box;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized img {
    width: 100%;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized > figcaption {
    display: block;
}
/* ckeditor5-image/theme/imagecaption.css */
.ck-content .image > figcaption {
    display: table-caption;
    caption-side: bottom;
    word-break: break-word;
    color: hsl(0, 0%, 20%);
    background-color: hsl(0, 0%, 97%);
    padding: .6em;
    font-size: .75em;
    outline-offset: -1px;
}
/* ckeditor5-basic-styles/theme/code.css */
.ck-content code {
    background-color: hsla(0, 0%, 78%, 0.3);
    padding: .15em;
    border-radius: 2px;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-tiny {
    font-size: .7em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-small {
    font-size: .85em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-big {
    font-size: 1.4em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-huge {
    font-size: 1.8em;
}
/* ckeditor5-block-quote/theme/blockquote.css */
.ck-content blockquote {
    overflow: hidden;
    padding-right: 1.5em;
    padding-left: 1.5em;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    border-left: solid 5px hsl(0, 0%, 80%);
}
/* ckeditor5-block-quote/theme/blockquote.css */
.ck-content[dir="rtl"] blockquote {
    border-left: 0;
    border-right: solid 5px hsl(0, 0%, 80%);
}
/* ckeditor5-table/theme/table.css */
.ck-content .table {
    margin: 1em auto;
    display: table;
}
/* ckeditor5-table/theme/table.css */
.ck-content .table table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    height: 100%;
    border: 1px double hsl(0, 0%, 70%);
}
/* ckeditor5-table/theme/table.css */
.ck-content .table table td,
.ck-content .table table th {
    min-width: 2em;
    padding: .4em;
    border: 1px solid hsl(0, 0%, 75%);
}
/* ckeditor5-table/theme/table.css */
.ck-content .table table th {
    font-weight: bold;
    background: hsla(0, 0%, 0%, 5%);
}
/* ckeditor5-table/theme/table.css */
.ck-content[dir="rtl"] .table th {
    text-align: right;
}
/* ckeditor5-table/theme/table.css */
.ck-content[dir="ltr"] .table th {
    text-align: left;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break {
    position: relative;
    clear: both;
    padding: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break::after {
    content: '';
    position: absolute;
    border-bottom: 2px dashed hsl(0, 0%, 77%);
    width: 100%;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break__label {
    position: relative;
    z-index: 1;
    padding: .3em .6em;
    display: block;
    text-transform: uppercase;
    border: 1px solid hsl(0, 0%, 77%);
    border-radius: 2px;
    font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
    font-size: 0.75em;
    font-weight: bold;
    color: hsl(0, 0%, 20%);
    background: hsl(0, 0%, 100%);
    box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* ckeditor5-media-embed/theme/mediaembed.css */
.ck-content .media {
    clear: both;
    margin: 1em 0;
    display: block;
    min-width: 15em;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list {
    list-style: none;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list li {
    margin-bottom: 5px;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list li .todo-list {
    margin-top: 5px;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input {
    -webkit-appearance: none;
    display: inline-block;
    position: relative;
    width: var(--ck-todo-list-checkmark-size);
    height: var(--ck-todo-list-checkmark-size);
    vertical-align: middle;
    border: 0;
    left: -25px;
    margin-right: -15px;
    right: 0;
    margin-left: 0;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input::before {
    display: block;
    position: absolute;
    box-sizing: border-box;
    content: '';
    width: 100%;
    height: 100%;
    border: 1px solid hsl(0, 0%, 20%);
    border-radius: 2px;
    transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input::after {
    display: block;
    position: absolute;
    box-sizing: content-box;
    pointer-events: none;
    content: '';
    left: calc( var(--ck-todo-list-checkmark-size) / 3 );
    top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
    width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
    height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
    border-style: solid;
    border-color: transparent;
    border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
    transform: rotate(45deg);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input[checked]::before {
    background: hsl(126, 64%, 41%);
    border-color: hsl(126, 64%, 41%);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input[checked]::after {
    border-color: hsl(0, 0%, 100%);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label .todo-list__label__description {
    vertical-align: middle;
}
/* ckeditor5-horizontal-line/theme/horizontalline.css */
.ck-content hr {
    margin: 15px 0;
    height: 4px;
    background: hsl(0, 0%, 87%);
    border: 0;
}
/* ckeditor5-code-block/theme/codeblock.css */
.ck-content pre {
    padding: 1em;
    color: hsl(0, 0%, 20.8%);
    background: hsla(0, 0%, 78%, 0.3);
    border: 1px solid hsl(0, 0%, 77%);
    border-radius: 2px;
    text-align: left;
    direction: ltr;
    tab-size: 4;
    white-space: pre-wrap;
    font-style: normal;
    min-width: 200px;
}
/* ckeditor5-code-block/theme/codeblock.css */
.ck-content pre code {
    background: unset;
    padding: 0;
    border-radius: 0;
}
/* ckeditor5-mention/theme/mention.css */
.ck-content .mention {
    background: var(--ck-color-mention-background);
    color: var(--ck-color-mention-text);
}
@media print {
    /* ckeditor5-page-break/theme/pagebreak.css */
    .ck-content .page-break {
        padding: 0;
    }
    /* ckeditor5-page-break/theme/pagebreak.css */
    .ck-content .page-break::after {
        display: none;
    }
}

引入css
类似如下方式展现

<div class="ck-content"> 内容</div>

安装其它插件

进入ckeditor5-build-classic-master目录
打开命令行(git bash here)运行npm install
以base64图片插件为例

npm install --save @ckeditor/ckeditor5-upload

编辑src下的ckeditor.js

// 导入模块
import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';
// 添加插件
ClassicEditor.builtinPlugins = [
	其它插件,
	Base64UploadAdapter
];
// 默认配置(不用改)可以把语言直接改为中文
ClassicEditor.defaultConfig = {
	toolbar: {
		items: [
			'heading',
			'|',
			'bold',
			'italic',
			'link',
			'bulletedList',
			'numberedList',
			'|',
			'indent',
			'outdent',
			'|',
			'imageUpload',
			'blockQuote',
			'insertTable',
			'mediaEmbed',
			'undo',
			'redo'
		]
	},
	image: {
		toolbar: [
			'imageStyle:full',
			'imageStyle:side',
			'|',
			'imageTextAlternative'
		]
	},
	table: {
		contentToolbar: [
			'tableColumn',
			'tableRow',
			'mergeTableCells'
		]
	},
	// This value must be kept in sync with the language defined in webpack.config.js.
	language: 'en'
};

构建ckeditor

yarn run build

最后build目录下会生成新的ckeditor.js

牛哥哥大
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ckeditor5 html 插件,ckeditor5的使用及添加插件
weixin_35668158的博客
06-30 2175
找到ckeditor5官网下载对应版本的ckeditor5找到对应的版本去下载这里我们选择CKEditor 5 Classic关于各版本的差异可以在以下链接中查看https://ckeditor.com/ckeditor-5/demo/PS: 如果用npm下载需要node.js环境可参考: node的初步安装使用用npm下载CKEditor 5 Classic桌面按住shift + 右键打开Pow...
ckeditor5支持html,CKEditor 5富文本编辑器使用教程（一）
weixin_39755952的博客
06-24 2016
如果你正在开发博客网站，正愁于用什么插件来做文章编辑，那么可以考虑使用CKEditor。一般设计文章编辑都希望用的富文本编辑器有以下功能样式丰富，便于设置文本样式扩展方便，可以对富文本进行功能扩展，实现需要的功能可定制化，富文本的样式可以定制以适应于各个场景我的网站https://SamYoc(https://www.samyoc.com)富文本编辑器使用的正是CKEditor，不过用的是CKEd...
ckeditor的详细配置[转]
孩子,你还得练，还得练! 记录生活点点滴滴 让程序更精彩
03-21 648
ckeditor的详细配置 一、使用方法： 1、在页面中引入ckeditor核心文件ckeditor.js [code="java"][/code] 2、在使用编辑器的地方插入HTML控件 [code="java"][/code] 如果是ASP.NET环境，也可用服务器端控件 [code="java"][/code]注意在控件中加上 class="cked...
ckeditor富文本编辑器需要引入的js文件
03-05
ckeditor富文本编辑器需要引入的js，包括两个js：ckeditor.js，config.js
CKEditor5 代码块美化、代码高亮
最新发布
一个小白
05-15 158
CKEditor5 代码块美化、代码高亮
CKEditor5 富文本编辑器安装以及使用
码路
04-27 7579
CKEditor 5是一个超现代的JavaScript富文本编辑器，具有MVC架构、自定义数据模型和虚拟DOM。它是在ES6中从头编写的，并且有出色的webpack支持。包含经典编辑器、内联编辑器、气球块编辑器、气球编辑器、文档编辑器。
CKEditor5 经验总结 (SpringBoot项目)
BinziD的博客
07-21 3089
SpringBoot CKEditor5
Laravel5.6框架使用CKEditor5相关配置详解
10-16
请根据实际使用的CKEditor5包进行安装，因为这里提到的是Laravel5.6，所以可能需要找到适用于该版本的CKEditor5包。 接着，配置CKEditor5的上传功能。Laravel提供了方便的文件系统接口，可以用来处理文件上传。在`...
ckeditor5:CKEditor 5自定义构建
03-25
CKEditor 5源代码存储在`ckeditor5`仓库中，而`ckeditor5-master.zip`压缩包即包含了这个仓库的主分支代码。要开始自定义构建，首先需要解压该文件，然后通过`npm`安装依赖： ```bash cd ckeditor5-master npm ...
ckeditor5编辑器
11-17
**ckeditor5编辑器详解** `ckeditor5` 是一个先进的富文本编辑器框架，它由CKEditor团队开发，致力于提供高效、可定制且功能丰富的文本编辑体验。本编辑器以其现代化的架构、强大的API和模块化设计著称，适用于网页...
ckeditor5_v19完整版
05-15
`README.md` 文件是项目的说明文档，通常会提供快速入门指南、安装步骤、常见问题等信息，对于初次使用CKEditor5的用户来说，这是一个重要的参考资料。 `sample` 目录可能包含了示例代码或演示页面，让用户能够直观...
ckeditor5-classic-image-resize:CKEditor5经典图像调整大小插件
05-01
ckeditor5-经典图像调整大小 CKEditor5经典图像调整大小插件 该插件使您可以使用宽度和高度输入来编辑图像的大小，并提供宽高比锁定工具，使缩放变得容易而又不会扭曲图像。 安装 npm i @emagtechlabs/ckeditor5-classic-image-resize 或者 yarn add @emagtechlabs/ckeditor5-classic-image-resize 用法 使用以下命令更新src / ckeditor.js： import ClassicImageResize from '@emagtechlabs/ckeditor5-classic-image-resize' ; Editor . builtinPlugins = [ // ... ClassicImageResize , // ... ] ; Editor . defa
ckeditor-5 支持H5 player
06-07
在`ckeditor5-38.0.1-pl13tb9rekks`这个版本中，可能包含了CKEditor 5的源码和示例。通过分析源码，可以了解其内部工作原理，以及如何实现视频上传和H5播放器的集成。同时，示例代码可以帮助快速理解和应用这些概念...
JQuery获取或设置ckeditor的数据
qq_15754531的博客
06-20 323
JQuery获取或设置ckeditor的数据(示例代码)。 从CKEditor取数据时， var data_tc = CKEDITOR.instances['txt_editor_tc'].getData(); 向CKEditor设置数据时， CKEDITOR.instances['txt_editor_sc'].setData('test'); 这两句代码是在JQu
关于ckeditor5设置高度
weixin_30488313的博客
09-21 2251
　　在管理端模板AdminBSBMaterialDesign-master里发现一个比百度编辑器看起来更高大上的编辑器：ckeditor。模板中使用的是版本4，自己在官网上下载了最新版本。在之前的版本，使用设置高度非常容易 CKEDITOR.replace('ckeditor',{ filebrowserImageUploadUrl : '/uploadImg...
ckeditor java 上传_javaWeb 集成ckeditor5实现上传图片
weixin_29099729的博客
02-21 214
一开始用官方的上传图片的代码ClassicEditor.create(document.querySelector('#editor'), {ckfinder: {uploadUrl:"" + rootPath + "/qiNiu/uploadFile.json" //图片上传url}}).then(editor => {} ).catch(error => {console.log(...
CKEditor 5 图片上传配置和图片上传返回参介绍
小强Lee的博客
01-14 3567
之前一直使用的是ckeditor4版本编辑器，最近发现ckeditor5版本编辑器也挺不错，准备试试。结果在上传图片这方面发现与之前ckeditor4版本上传配置不一样了。下面是ckeditor5的相关配置和介绍
CKEditor5 最小高度设置
weixin_42957379的博客
06-18 3104
.ck-content { min-height: 200px; }
富文本编辑器 CKEditor5-React 的经典模式配置（包括图片上传与展示）
daoerZ的博客
02-02 3776
了解 CKEditor5-Reacthttps://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html 业务场景：图文混排，图片支持截图粘贴和上传 CKEditor5-React 经典模式ckeditor5-build-classic 可以实现这些基本需求。该模式组件仅支持标题、段落、加粗、倾斜、撤销、重做、块引用、超链接、表格、项目编号/符号列表、图片，视频等，而且图片仅支持占用整栏...
ckeditor5 net 使用
05-12
ckeditor5是一个功能强大的富文本编辑器，可用于创建各种文档和网站内容。它具有许多有用的功能，如拖放，图像和文件上传，以及内置的链接和媒体库。此外，CKEditor5通过基于块和内联元素的模块化系统（称为CKEditor...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值