【CKEditor5】CKEditor5相关问题

已于 2023-03-04 11:26:22 修改
阅读量1.4k 收藏 6
点赞数 2
分类专栏： CKEditor5 文章标签： css css3 html
于 2022-12-13 22:31:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43614372/article/details/128308677
版权

问题解决

  • 如图，这个样式没效果。
    • 解决方法：因为没有导入css，导入css后,配置style插件就生效了。
    • 问：你的css哪来的？
    • 答：所有的样式与插件CXEditor5官网都可以找到。
      在这里插入图片描述

配置的css

.ck.ck-content {
  font-family: 'PT Serif', serif;
  font-size: 16px;
  line-height: 1.6;
  padding: 2em;
}

.ck-content .ck-horizontal-line {
  margin-bottom: 1em;
}

.ck.ck-content hr {
  width: 100px;
  border-top: 1px solid #aaa;
  height: 1px;
  margin: 1em auto;
}

.ck.ck-content h3.category {
  font-family: 'Bebas Neue';
  font-size: 20px;
  font-weight: bold;
  color: #d1d1d1;
  letter-spacing: 10px;
  margin: 0;
  padding: 0;
}

.ck.ck-content h2.document-title {
  font-family: 'Bebas Neue';
  font-size: 50px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  border: 0;
}

.ck.ck-content h3.document-subtitle {
  font-size: 20px;
  color: #e91e63;
  margin: 0 0 1em;
  font-weight: normal;
  padding: 0;
}

.ck.ck-content p.info-box {
  --background-size: 30px;
  --background-color: #e91e63;
  padding: 1.2em 2em;
  border: 1px solid var(--background-color);
  background: linear-gradient(135deg, var(--background-color) 0%, var(--background-color) var(--background-size), transparent var(--background-size)), linear-gradient(135deg, transparent calc(100% - var(--background-size)), var(--background-color) calc(100% - var(--background-size)), var(--background-color));
  border-radius: 10px;
  margin: 1.5em 2em;
  box-shadow: 5px 5px 0 #ffe6ef;
}

.ck.ck-content blockquote.side-quote {
  font-family: 'Bebas Neue';
  font-style: normal;
  float: right;
  width: 35%;
  position: relative;
  border: 0;
  overflow: visible;
  z-index: 1;
  margin-left: 1em;
}

.ck.ck-content blockquote.side-quote::before {
  content: "“";
  position: absolute;
  top: -37px;
  left: -10px;
  display: block;
  font-size: 200px;
  color: #e7e7e7;
  z-index: -1;
  line-height: 1;
}

.ck.ck-content blockquote.side-quote p {
  font-size: 2em;
  line-height: 1;
}

.ck.ck-content blockquote.side-quote p:last-child:not(:first-child) {
  font-size: 1.3em;
  text-align: right;
  color: #555;
}

.ck.ck-content span.marker {
  background: yellow;
}

.ck.ck-content span.spoiler {
  background: #000;
  color: #000;
}

.ck.ck-content span.spoiler:hover {
  background: #000;
  color: #fff;
}

.ck.ck-content pre.fancy-code {
  border: 0;
  margin-left: 2em;
  margin-right: 2em;
  border-radius: 10px;
}

.ck.ck-content pre.fancy-code::before {
  content: "";
  display: block;
  height: 13px;
  background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==);
  margin-bottom: 8px;
  background-repeat: no-repeat;
}

.ck.ck-content pre.fancy-code-dark {
  background: #272822;
  color: #fff;
  box-shadow: 5px 5px 0 #0000001f;
}

.ck.ck-content pre.fancy-code-bright {
  background: #dddfe0;
  color: #000;
  box-shadow: 5px 5px 0 #b3b3b3;
}
  • 效果图↓
    ↓
    ↓
    ↓

注意：这里又有问题了，这仅仅是在编辑时的视图，当我们预览效果时：↓
可以看到预览没有红色框效果。
在这里插入图片描述
解决方法： 点我查看解决方式

常用例子与API

更新/保存
选择全部内容

CKEditor5常见问题

调整编辑器高度
.ck.ck-content:not(.ck-comment__input *) {
    height: 300px;
    overflow-y: auto;
}

预览与编辑时的样式不一样解决方式

问题所在: ↓

  • 我们编辑时,样式非常好看,非常nice ↓
    在这里插入图片描述

在这里插入图片描述

  • 渲染页面后 ↓
    • 这和我们编辑时的样式不一样.

在这里插入图片描述

解决↓

  1. CKEditor 5有很多插件,几乎每个插件都有自己的css样式,展示前先把所有css样式加载进来.
    • 问:官方那么多插件,一个一个复制插件样式,得搞到啥时候?
    • 答:通过webpack打包所有插件css样式,然后导入渲染 / 编辑页面.

打包方式如下 ↓
↓
↓

用webpack打包CKEditor5所有css样式
  1. 安装依赖 ，安装的依赖在上章节克隆的Ckeditor5项目中安装，上章节传送门 → 我是传送门
npm install --save mini-css-extract-plugin css-loader@5
  1. 配置webpack，这个webpack也是克隆的Ckeditor5项目中。
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );

module.exports = {
    // ...

    plugins: [
        // ...

        new MiniCssExtractPlugin( {
            filename: 'styles.css'
        } )
    ],

    module: {
        rules: [
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    }
};
  • 我的webpack完整配置参考如下下↓
    ↓
    ↓
/**
 * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

'use strict';

/* eslint-env node */

const path = require('path');
const webpack = require('webpack');
const { bundler, styles } = require('@ckeditor/ckeditor5-dev-utils');
const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
	devtool: 'source-map',
	performance: { hints: false },

	entry: path.resolve(__dirname, 'src', 'ckeditor.js'),

	output: {
		// The name under which the editor will be exported.
		library: 'ClassicEditor',

		path: path.resolve(__dirname, 'build'),
		filename: 'ckeditor.js',
		libraryTarget: 'umd',
		libraryExport: 'default'
	},

	optimization: {
		minimizer: [
			new TerserPlugin({
				sourceMap: true,
				terserOptions: {
					output: {
						// Preserve CKEditor 5 license comments.
						comments: /^!/
					}
				},
				extractComments: false
			})
		]
	},

	plugins: [
		new CKEditorWebpackPlugin({
			// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
			// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
			language: 'zh-cn',
			additionalLanguages: 'all'
		}),
		new webpack.BannerPlugin({
			banner: bundler.getLicenseBanner(),
			raw: true
		}),
		//css样式插件
		new MiniCssExtractPlugin({
			filename: 'styles.css'
		})
	],

	module: {
		rules: [
			{
				test: /\.svg$/,
				use: ['raw-loader']
			},
			{
				test: /\.css$/,
				use: [
					{
						loader: 'style-loader',
						options: {
							injectType: 'singletonStyleTag',
							attributes: {
								'data-cke': true
							}
						}
					},
					'css-loader',
					{
						loader: 'postcss-loader',
						options: {
							postcssOptions: styles.getPostCssConfig({
								themeImporter: {
									themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
								},
								minify: true
							})
						}
					}
				]
			},
			{
				test: /\.ts$/,
				use: ['ts-loader']
			}
		],

		//框架css
		rules: [
			{
				test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
				use: ['raw-loader']
			},
			{
				test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
				use: [
					MiniCssExtractPlugin.loader,
					'css-loader',
					{
						loader: 'postcss-loader',
						options: {
							postcssOptions: styles.getPostCssConfig({
								themeImporter: {
									themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
								},
								minify: true
							})
						}
					}
				]
			}
		]
	},

	resolve: {
		extensions: ['.ts', '.js', '.json']
	}
};

↓

  1. 配置好webpack后，执行nmp run build ,会多出一个css样式↓
    ↓

在这里插入图片描述

  1. 将样式复制到要渲染 / 编辑器的html页面,并把打包的css加载进来
    在这里插入图片描述
  1. 重点来了,把getData()获取到的数据添加到class为ck-content的div里↓
  • 一定要在外面套个class为ck-content的div,不然就算引进打包的css,样式一样不生效.
    在这里插入图片描述

↓
↓
↓

  • 例:
    在这里插入图片描述

↓

  1. 查看展示的页面↓
    ↓
  • 展示的页面与我们编辑时的一模一样.

在这里插入图片描述

官方的参考例子 option-extracting-css

CKEDitor5 唯一单独的css ↓

如下所示↓
↓
↓

CKEditor5 的导航样式 | 编辑时与预览时样式不一致（经过处理的css）
  • 问题： 编辑与预览的样式不一致，导入以下经过处理的css即可。
    在这里插入图片描述
.ck.ck-content,
.ck-content {
  font-family: 'PT Serif', serif;
  font-size: 16px;
  line-height: 1.6;
  padding: 2em;
}

.ck-content .ck-horizontal-line {
  margin-bottom: 1em;
}

.ck.ck-content hr,
.ck-content hr {
  width: 100px;
  border-top: 1px solid #aaa;
  height: 1px;
  margin: 1em auto;
}

.ck.ck-content h3.category,
.ck-content h3.category {
  font-family: 'Bebas Neue';
  font-size: 20px;
  font-weight: bold;
  color: #d1d1d1;
  letter-spacing: 10px;
  margin: 0;
  padding: 0;
}

.ck.ck-content h2.document-title,
.ck-content h2.document-title {
  font-family: 'Bebas Neue';
  font-size: 50px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  border: 0;
}

.ck.ck-content h3.document-subtitle,
.ck-content h3.document-subtitle {
  font-size: 20px;
  color: #e91e63;
  margin: 0 0 1em;
  font-weight: normal;
  padding: 0;
}

.ck.ck-content p.info-box,
.ck-content p.info-box {
  --background-size: 30px;
  --background-color: #e91e63;
  padding: 1.2em 2em;
  border: 1px solid var(--background-color);
  background: linear-gradient(135deg, var(--background-color) 0%, var(--background-color) var(--background-size), transparent var(--background-size)), linear-gradient(135deg, transparent calc(100% - var(--background-size)), var(--background-color) calc(100% - var(--background-size)), var(--background-color));
  border-radius: 10px;
  margin: 1.5em 2em;
  box-shadow: 5px 5px 0 #ffe6ef;
}

.ck.ck-content blockquote.side-quote,
.ck-content blockquote.side-quote {
  font-family: 'Bebas Neue';
  font-style: normal;
  float: right;
  width: 35%;
  position: relative;
  border: 0;
  overflow: visible;
  z-index: 1;
  margin-left: 1em;
}

.ck.ck-content blockquote.side-quote::before,
.ck-content blockquote.side-quote::before {
  content: "“";
  position: absolute;
  top: -37px;
  left: -10px;
  display: block;
  font-size: 200px;
  color: #e7e7e7;
  z-index: -1;
  line-height: 1;
}

.ck.ck-content blockquote.side-quote p,
.ck-content blockquote.side-quote p {
  font-size: 2em;
  line-height: 1;
}

.ck.ck-content blockquote.side-quote p:last-child:not(:first-child),
.ck-content blockquote.side-quote p:last-child:not(:first-child) {
  font-size: 1.3em;
  text-align: right;
  color: #555;
}

.ck.ck-content span.marker,
.ck-content span.marker {
  background: yellow;
}

.ck.ck-content span.spoiler,
.ck-content span.spoiler {
  background: #000;
  color: #000;
}

.ck.ck-content span.spoiler:hover,
.ck-content span.spoiler:hover {
  background: #000;
  color: #fff;
}

.ck.ck-content pre.fancy-code,
.ck-content pre.fancy-code {
  border: 0;
  margin-left: 2em;
  margin-right: 2em;
  border-radius: 10px;
}

.ck.ck-content pre.fancy-code::before,
.ck-content pre.fancy-code::before {
  content: "";
  display: block;
  height: 13px;
  background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==);
  margin-bottom: 8px;
  background-repeat: no-repeat;
}

.ck.ck-content pre.fancy-code-dark,
.ck-content pre.fancy-code-dark {
  background: #272822;
  color: #fff;
  box-shadow: 5px 5px 0 #0000001f;
}

.ck.ck-content pre.fancy-code-bright,
.ck-content pre.fancy-code-bright {
  background: #dddfe0;
  color: #000;
  box-shadow: 5px 5px 0 #b3b3b3;
}
:last-child:not(:first-child) {
  font-size: 1.3em;
  text-align: right;
  color: #555;
}

.ck.ck-content span.marker,
.ck-content span.marker {
  background: yellow;
}

.ck.ck-content span.spoiler,
.ck-content span.spoiler {
  background: #000;
  color: #000;
}

.ck.ck-content span.spoiler:hover,
.ck-content span.spoiler:hover {
  background: #000;
  color: #fff;
}

.ck.ck-content pre.fancy-code,
.ck-content pre.fancy-code {
  border: 0;
  margin-left: 2em;
  margin-right: 2em;
  border-radius: 10px;
}

.ck.ck-content pre.fancy-code::before,
.ck-content pre.fancy-code::before {
  content: "";
  display: block;
  height: 13px;
  background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==);
  margin-bottom: 8px;
  background-repeat: no-repeat;
}

.ck.ck-content pre.fancy-code-dark,
.ck-content pre.fancy-code-dark {
  background: #272822;
  color: #fff;
  box-shadow: 5px 5px 0 #0000001f;
}

.ck.ck-content pre.fancy-code-bright,
.ck-content pre.fancy-code-bright {
  background: #dddfe0;
  color: #000;
  box-shadow: 5px 5px 0 #b3b3b3;
}
  • 效果图，成功渲染样式
    在这里插入图片描述
getData()与setData() 获取编辑的文本与设置文本
  • editor.getData() 获取编辑框内的数据
    • 应用场景:当我们编辑完内容,要发布时,可以使用该方法获取编辑的内容.
  • editor.setData(data) 将数据设置到编辑框内
    • data 设置的数据
    • 应用场景:当我们要更改某个页面的内容时,可用该方法将数据设置到编辑框
vue3获取编辑的文本

在vue3中，获取编辑的数据是editoring,直接this.editoring就可以获取编辑的数据
在这里插入图片描述

CKeditor5相关推荐

ckeditor5安装与使用

End

2022/12/14 14:55 一次修改

视觉CG
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ckeditor5 全功能版（纯手工编译）
12-10
如题ckeditor5 是当前比较流行的文章编辑器，精选常用插件，几乎涵盖了99%的常用功能，纯手工编译，已在项目中应用。如果想自己定义，也可以看我的博客中有相关教程
ckeditor5:CKEditor 5自定义构建
03-25
CKEditor 5是一款高度可定制的富文本编辑器，它为网页内容的创建提供了强大的工具。自定义构建是CKEditor 5的一个重要特性，允许开发者根据项目需求选择所需的特性和功能，从而减小最终产品的体积，提高加载速度。在...
CKEditor5导入并解析word功能的集成，实现word转html
zhang_hai_cheng的博客
09-19 2812
这是一个高级功能，虽然不是很常用，但是有一些特殊的场景或者需求，我们可能希望从编辑好的word中，通过导入的方式来让用户在网页中继续编辑它，并尽可能的保留内容和格式。用CKEditor5的导入word功能，把这个word导入到编辑器中，解析完成之后就看到了效果，它的还原度很高了，里边包含了段落、列表、图片、表格等等多个技术点
强烈推荐: CKEditor 5 经典编辑器 —— 极致编辑体验的革新者
gitblog_00027的博客
06-16 333
???? 强烈推荐: CKEditor 5 经典编辑器 —— 极致编辑体验的革新者 项目地址:https://gitcode.com/ckeditor/ckeditor5-build-classic 在当今数字化时代，一款优秀的文本编辑器不仅可以提高工作效率，还能为用户提供更佳的创作环境。在此背景下，我们向大家隆重推荐 CKEditor 5 的经典编辑器构建（以下简称“CKEditor 5”），这是一款...
CKEditor5 富文本编辑器安装以及使用
码路
04-27 7587
CKEditor 5是一个超现代的JavaScript富文本编辑器，具有MVC架构、自定义数据模型和虚拟DOM。它是在ES6中从头编写的，并且有出色的webpack支持。包含经典编辑器、内联编辑器、气球块编辑器、气球编辑器、文档编辑器。
CKEditor5定制及文件上传
wudengyu的博客
09-01 960
另外，CKEditor5有的功能，并不包含在预构建版本中，只能自己编译，比如说Simple upload adapter，这个组件没有，就没办法上传图片，只能用在一些简单的场合了。另一个，Simple upload adapter组件需要服务器支持，也就是需要写一个controller来接收上传的文件，这也没什么好说的，只是multipart请求的RequestParam是"upload"，而不是"file"，文档里面也没说，是查看了请求包的内容才知道的。这样就可以像预编译的一样，在HTML中进行配置。
ckeditor5 多种类型的切换使用
weixin_42574738的博客
12-20 346
ckeditor5 富文本多功能配置
wangEditor 生成的表格在页面不显示边框
小码蚁
03-12 3814
如图编辑器里面表格 实际显示： 解决方法：找到wangEditor.min.js 搜索border="0" 并修改为border="1" 清空一下缓存重新输入就会正常显示边框了。
ckeditor5-v30 全工具版.rar
01-07
ckeditor5-v30 全工具版 ，基本将免费的工具备齐了，源文件，可自行修改重新打包，node_modules 文件夹为包文件，该文件夹容量较大，在实际应用时可以删除，必须在网站模式使用，如：...该版本表格插件与微软的edge...
ckeditor-5 支持H5 player
06-07
**ckeditor-5 支持H5 player** 在现代网页开发中，富文本编辑器（如CKEditor）扮演着至关重要的角色，它允许用户在网页上创建、编辑和格式化文本内容。CKEditor 5 是一个高级的开源富文本编辑器，提供了一流的用户...
Laravel5.6框架使用CKEditor5相关配置详解
10-16
以下是对配置CKEditor5在Laravel5.6中的详细步骤和相关知识点的解析： 首先，确保已经安装了CKEditor5的Laravel包。可以通过Composer来安装，如`composer require froala/ckeditor`。请根据实际使用的CKEditor5包...
CKEditor 5 图片上传配置和图片上传返回参介绍
小强Lee的博客
01-14 3584
之前一直使用的是ckeditor4版本编辑器，最近发现ckeditor5版本编辑器也挺不错，准备试试。结果在上传图片这方面发现与之前ckeditor4版本上传配置不一样了。下面是ckeditor5的相关配置和介绍
react使用CKEditor5，两种使用方式（在线构建器和从源代码构建）。附富文本国际化
weixin_47592804的博客
04-24 1530
react CKEditor5使用配置 两种使用方式（在线构建器和从源代码构建） 附国际化
CKEditor5+vue3使用以及如何添加新工具栏，自定义设置字体fontFamily，自定义上传图片
weixin_43485503的博客
01-05 7081
CKEditor5+vue3使用以及如何添加新工具栏，自定义设置字体fontFamily
CKEditor5基本使用
xiao_xiao_b的博客
07-27 3509
https://www.jianshu.com/p/47e25447b771
ckeditor5在bootstrap的modal上显示的兼容问题
u012084904的博客
02-28 718
使用Link功能时，插入链接的小弹窗居然无法浮在上面。 https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/css.html :root { --ck-z-default: 100; --ck-z-modal: calc( var(--ck-z-default) + 9...
React使用自定义CKEditor5，并完善图片上传功能
qq_36383583的博客
07-31 1183
自定义CKEditor5，并完善上传图片功能
ckeditor 配置不生效问题
wsslsn的博客
08-31 1461
场景： 控制按钮显示，去掉不需要的按钮等， 配置如下 CKEDITOR.editorConfig = function( config ) { config.toolbar = 'Full'; config.toolbar = [ ['Font','FontSize'], ['TextColor','BGColor'] ]; }; 问题： 结果不生效， ckeditor配置默认加载config.js， 需要修改这个配置， 不然会一直加载默认的配置，导致自定义的配置不生效； 解决： 修改默认配
使用bootstrap框架的模态框与ckeditor产生冲突，ckeditor的弹出窗不可用时的解决方法...
weixin_30396699的博客
04-28 317
这样可以解决冲突 $.fn.modal.Constructor.prototype.enforceFocus = function () { modal_this = this $(document).on('focusin.modal', function (e) { if (modal_this.$element[0] !== e.targ...
ckeditor5 iframe
最新发布
06-21
CKEditor 5是一个现代的富文本编辑器，它提供了高级的文本处理功能和用户体验，特别是对于Web开发人员。其中，iframe功能允许在CKEditor 5中嵌入外部HTML内容，比如网页、博客文章或者其他自定义的交互式元素。这样可以在编辑器内部展示完整的内容区块，用户既可以编辑这部分内容，又不会影响到整个页面的结构。 具体来说，使用iframe的步骤如下： 1. 在配置编辑器时，你可以选择`CKEditor5BasicEditor`或自定义配置，并添加`src`属性来指定iframe的源URL。 ```javascript ClassicEditor.create(editableElement, { toolbar: 'myCustomToolbar', // 使用iframe选项 iframe: { src: 'https://example.com/external-content.html' } }).catch((error) => { console.error(error); }); ``` 2. 如果需要，可以通过`allowedContent`选项来控制哪些内容是可编辑的。 相关问题： 1. CKEditor 5的iframe如何设置源内容？ 2. 是否可以调整iframe的大小或样式？ 3. 如何防止恶意代码在嵌入的iframe中运行？

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值