程序员经验分享-hwhale

【CKEditor5】CKEditor5相关问题

2023-10-31

问题解决

  • 如图，这个样式没效果。
    • 解决方法：因为没有导入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 一次修改

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

CKEditor5

css

CSS3

html

【CKEditor5】CKEditor5相关问题 的相关文章

  • 强制输入数字小数位

    我想强制

  • 从输入类型编号获取无效值

    我正在使用输入类型数字 当它无效时 我如何从中获取值 例如 使用类型编号并仅打印 e 这本身是无效的 我正在使用 React 但我认为这个问题非常普遍 onChange event console log event target valu

  • CSS: *html #id_name

    我有这个代码 html alertBox height 100px modalContainer gt alertBox position fixed 这是由CSS支持的吗 我在其他网站上找到了这段代码 我忘记了链接 html alertB

  • 将html表格保存到excel中[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我必须编写一个程序 定期读取网页并将

  • 更改

    标签中一个单词的颜色

    我正在处理一份 html 文档 并且只想在我的文档中创建一个单词 p 标记不同的颜色 如果不做完全不同的事情 这可能吗 p p tag p p I want to make only THIS word blue p p style dis

  • 我可以从命令行打印 html 文件（带有图像、css）吗？

    我想从脚本中打印带有图像的样式化 html 页面 谁能建议一个开源解决方案 我使用的是 Linux Ubuntu 8 04 但也对其他操作系统的解决方案感兴趣 你可以给html2ps http user it uu se jan html2

  • 如何使用文件输入在PDFJS中打开本地PDF？

    我想知道是否有办法使用选择pdf文件input type file 并使用打开它PDFJS https github com mozilla pdf js 您应该能够使用 FileReader 来获取文件对象的内容作为类型化数组 pdfjs

  • 通过 jQuery 选择动态 HTML 元素

    我正在构建一个 ASP NET MVC 应用程序 并且正在使用jQuery Blueimp https github com blueimp jQuery File Upload动态添加到页面的 PartialView 上的插件 根据插件的

  • 在iOS上，“添加到主页”缓存保存在哪里，如何清除它？

    我正在 iPad iOS v7 上制作一个 html5 游戏 当我将其添加到主页时 它非常顽固地释放缓存 如果我在 Safari 中查看它 这会按照您所期望的方式工作 如果我刷新一次或两次 页面就会以最新状态缓存 但在主页上却是另一回事 它

  • 如何让Gmail像加载进度条一样

    我想在页面的中心和顶部创建一个像 Gmail 一样的加载进度条 并适用于所有浏览器 这是基本代码

  • 在随机位置启动 HTML5

    我有一个大约 2 小时长的音轨 我想在我的网站上使用它 我希望它在页面加载时在随机位置开始播放曲目 使用 HTML5 可以吗 我知道您可以使用 element currentTime 函数来获取当前位置 但是如何在完全下载之前获取曲目的总时

  • 我怎样才能让这个脚本在 WordPress 上运行？

    我有这个脚本 document ready function text1 click function this hide 代码html div class div1 p class text1 text to appear when th

  • 为什么此 TTF 字体在我的浏览器中无法使用？

    我下载了一种名为 Clunk 的 TTF 字体 并尝试将其应用于某些文本 这是我正在使用的代码 h1 Test h1 这似乎不起作用 Chrome 给了我两个错误 Failed to decode downloaded font path

  • JSP/Servlet HTTP 404 错误处理

    我想在我的网络应用程序中处理 HTML 404 错误 我可以这样写

  • 嵌套计算操作

    希望这很简单 我想使用CSS calc操作来执行两个计算 我想将宽度设置为等于 100 7 2 但是 如果我尝试在 CSS 计算操作中执行多个操作 则会失败 width calc 100 7 2 如何在一个 CSS 语句中执行多个计算操作

  • 电话输入自动填充会删除国际前缀

    我有一个类型为 tel 的输入字段 并启用了自动完成功能

  • 如何将 Vue.js 作用域样式应用于通过视图路由器加载的组件？

    如何将 Vue js 作用域样式应用于通过以下方式加载的组件

  • 适用于移动设备的响应式订单确认电子邮件？

    我从未见过令人惊叹的订单确认 发票电子邮件 即使是最好的 html5 网站也会发送糟糕的订单确认电子邮件 有时是纯文本 我相信这是因为发票通常需要使用表格来显示购买的物品 这在移动设备上实现起来非常困难 我发现了一些让手机上的表格更易于管理

  • 如何删除标题中的粗体？

    我有一个标题 h1 THIS IS A HEADLINE h1 如何使短语 THIS IS 不加粗 其余部分不做任何更改 我在文本装饰中找不到任何相关标签 标题看起来很粗体 因为它大尺寸 如果您已应用粗体或想要更改行为 您可以执行以下操作

  • PDF 在 Safari 中隐藏 Jquery Modal

    这是与我有关的事情this https stackoverflow com questions 24052681 pdf hide jquery modal in ie问题 在 IE 中 我在对话框中使用 iframe 解决了问题 所以它工

随机推荐

  • SpringBoot+ftp 实现文件的上传、下载与删除

    SpringBoot ftp 实现文件的上传 下载与删除 一 引包 二 配置 三 代码 3 1配置类 3 2 接口服务 3 3controller层示例 不做过多解释 可移植 比较简单方便 一 引包 3 8 0是目前最新的 除非重大更新 基

  • Python基础——常见数据类型总结

    在Python中常见的数据类型有以下8个类型 分别是 int 整数类型 整形 float 浮点类型 浮点型 bool 布尔类型 str 字符串类型 list 列表类型 tuple 元组类型 dict 字典类型 set 集合类型 接下来一一展

  • hdd和虚拟服务器区别,Docker容器与虚拟机的区别

    我曾经将Docker容器视为轻量级 精简的虚拟机 进行这种比较是有道理的 因为至少在Docker的最初市场中 总是将其与虚拟机进行比较 例如 Docker花费的启动时间少于VM 等等 但是docker容器不是虚拟机 让我们对Docker容器

  • java redis cluster_Redis的cluster模式

    Redis集群是Redis提供的分布式数据库方案 集群通过分片 Sharding 来进行数据共享 并提供复制和故障转移功能 节点 一个节点就是一个运行在集群模式下的Redis服务器 Redis服务器在启动的时候会根据cluster enab

  • ERROR: Could not build wheels for pycocotools, lap, which is required to install pyproject.toml-base

    python 在windows系统上安装pycocotools lap是出现无法安装的情况 报错如下 原因是缺少C 的编译工具 并且pycocotools需要安装windows版本 解决步骤 1 下载BuildTools 下载地址 Buil

  • Spark学习之机器学习包ML

    Spark的ML软件包 其操作是基于DataFrame的 ML包括转换器 Transformer 评估器 Estimator 管道 Pipeline 1 转换器 Transformer 通常是将一个新列附加到DataFrame来转换数据 从

  • React入门

    目录 React简介 官网 介绍描述 React的特点 React高效的原因 React的基本使用 效果 相关js库 创建虚拟DOM的两种方式 虚拟DOM与真实DOM React JSX XML JSON JSX 渲染虚拟DOM 元素 JS

  • 二进制部署Kubernetes

    操作系统 centos7 5 x86 docker 19ce 软件 Kubernetes 1 18 角色 k8s master1 192 168 31 71 组件 kube apiserver kube controller manager

  • C语言atoi函数将字符串类型转换为整型

    atoi 是C标准库中的一个函数 用于将字符串转换为整数 函数原型如下 int atoi const char str 参数 str 是一个指向要转换的字符串的指针 atoi 函数会尝试将字符串中的数字部分转换为整数 并返回转换后的整数值

  • 基于深度学习的验证码自动识别（caffe）

    最近在学习使用caffe 然后就想试着玩玩验证码识别 结果非常非常棒 深度学习确实是非常强大的 废话少说 跟我走进验证码自动识别 caffe安装 此处省略一万字 网上教程千千万 你一定可以找到 接着往下看 剧情描述 之前对京东的某些数据进行

  • 《剑指offer》---22.数值的整数次方

    题目描述 给定一个double类型的浮点数base和int类型的整数exponent 求base的exponent次方 保证base和exponent不同时为0 解题分析 使用快速幂解决 代码 class Solution public d

  • Spring Boot + Vue3前后端分离实战wiki知识库系统＜十一＞--文档管理功能开发三

    文档内容的显示 在上一次Spring Boot Vue3前后端分离实战wiki知识库系统 十 文档管理功能开发二文档管理模块还差文档的显示木有完成 所以接下来先将这块模块给收尾了 增加单独获取内容的接口 概述 在前端页面文档查询时 只查询了

  • javaMail 使用SMTP邮箱服务器发送邮件

    POP3 SMTP协议 smtp默认端口是 25 接收邮件服务器 pop exmail qq com 使用SSL 端口号995 发送邮件服务器 smtp exmail qq com 使用SSL 端口号465 海外用户可使用以下服务器 接收邮

  • java 用redis如何处理电商平台，秒杀、抢购超卖

    原地址 http blog csdn net u012116196 article details 51782934 一 刚来公司时间不长 看到公司原来的同事写了这样一段代码 下面贴出来 1 这是在一个方法调用下面代码的部分 java vi

  • AutoCAD二次开发_从入门到放弃

    在建筑与设计行业中 CAD有着非常广泛的应用 而其中的很多基本操作无法满足实际需求 容易产生大量的重复性的操作 这种重复性的操作违背了程序设计的思维 因此诞生了入门CAD二次开发的想法 跟大多数程序设计语言一样 在了解CAD二次开发所应用的

  • Kruskal算法&Prim算法的区别

    贪心算法 Kruskal Prim算法的区别 贪心算法是一种对某些求最优解问题的更简单 更迅速的设计技术 贪心算法的特点是一步一步地进行 常以当前情况为基础根据某个优化测度作最优选择 而不考虑各种可能的整体情况 省去了为找最优解要穷尽所有可

  • Linux下搭建Webdav(apache)

    环境 RHEL 5 4 x86 64 创建webdav 1 安装apache yum install httpd y 2 配置webdav vim etc httpd conf httpd conf

  • Ubuntu下用Lean源码编译openwrt及一行命令u盘启动openwrt安装x86硬盘上

    Ubuntu下用Lean源码编译openwrt 源码地址 https github com coolsnowwolf lede 1 首先微软云服务器装好 Ubuntu 64bit 推荐 Ubuntu 20 04 LTS x64 免费一年 i

  • ftell函数的用法（用于获取指针位置）

    ftell函数用于得到文件位置指针当前位置相对于文件首的偏移字节数 下面给出一个简单的例子 cpp view plain copy include

  • 【CKEditor5】CKEditor5相关问题

    问题解决 如图 这个样式没效果 解决方法 因为没有导入css 导入css后 配置style插件就生效了 问 你的css哪来的 答 所有的样式与插件CXEditor5官网都可以找到 配置的css ck ck content font fami

热门标签