CKEditor5记

最新推荐文章于 2024-07-31 15:32:16 发布

山歌寥哉

最新推荐文章于 2024-07-31 15:32:16 发布

阅读量1.3k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_14853875/article/details/86524993

版权

本文介绍了在寻找稳定编辑器过程中，作者选择了CKEditor5，并指出其主要问题是中文文档较少。文章记录了两个关键问题：1) 编辑器内上传图片的配置，提供C# MVC框架的示例代码；2) 保存HTML后如何正确展示内容，需在外层DOM标签添加样式以保持正确显示。

摘要由CSDN通过智能技术生成

找了众多编辑器，有的样式漂亮但是功能不稳定bug多，说白了就是不成熟；强迫症患者不能放弃治疗，最后找到了CKEditor，唯一缺点就是中文资料比较少，但是多看看英文文档，准确的是多看看demo代码，就没啥问题；
下面有两个问题做个笔记，其他官网查资料，比较简单。
1.编辑器内上传图片
配置：

 ClassicEditor
            .create(document.querySelector('#editor'), {
   
                language: 'zh-cn',//要用中文提示，需要引用zh-cn.js

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

山歌寥哉

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue集成CKEditor5源代码

lymmurrain的博客

01-16

919

概述对于简单的富文本编辑器，使用ckeditor的即用型编辑器构建(名字中带有build的，如ckeditor5-build-classic)是个很好的选择，简单易用。但只能包含一些基础的功能。很多实用的功能如自动保存，自定义图片上传是无法使用的。使用源代码集成CKEditor使您可以使用CKEditor全部功能。本文使用Vue CLI 4.0 从源使用CKEditor 安装必要的依赖项及配置vue.config.js 要使用您的应用程序构建CKEditor，必须对默认项目配置进行某些更改。首先，安

ckeditor 在C#中使用

weixin_30471065的博客

04-19

149

1.将ckeditor和ckfinder文件夹拷入项目文件夹中，刷新项目。 2.在添加编辑控件的页面（aspx）的head中加入　 <script src="ckeditor/ckeditor.js" type="text/javascript"></script> <script type="text/javascript" src="...

参与评论您还未登录，请先登录后发表或查看评论

CKEDITOR可以如何直接复制WORD的图文内容到编辑器中?

最新发布

alisky119的博客

07-31

904

控件通过这个接口将图片上传到服务器中，服务器将图片保存在指定的位置，可以是磁盘，或者NAS，或者是云对象存储，比如阿里云(OSS)，华为云（OBS），百度云（BOS），腾讯云，亚马逊云（AWS），MinIO，FastDFS等。完全开源产品源代码，包括产品核心源代码。对于我们公司来讲也有个使用上的痛点，我们的客户数量是比较多少，总共大概有一千多个吧，各个行业的用户都有，所以领导这边是希望能够找到一个比较好的方案，然后全面替换，将我们自己产品进行升级，然后集成，这样的话，我们就能够为所有的用户提供这个功能。

ckeditor 使用说明，手把手，详细步骤： ckeditor-5 online-builder，持续更新中~~

_1531613221

05-06

2549

ckeditor 使用说明，手把手，详细步骤： ckeditor-5 online-builder，持续更新中~~

CKEdit 保存

℡メ㏑╭ァ小凯

09-04

447

主要功能： 1，新增保存按钮 2，默认全屏效果图前台代码  <script src="~/Content/Scripts/ckeditor/ckeditor.js"></script>  <script type="text/...

ckeditor5快速入门

Snowprincev的博客

11-06

3950

ckeditor5-build-classic使用

ckeditor5快速使用

xiao1215fei的专栏

04-01

1843

ckeditor官网提供了可以个人定制的方式，然后将地址好的包下载到本地，即可立即使用，定制方式如下：打开官网定制页面：https://ckeditor.com/ckeditor-5/online-builder/ 第一步：选择一个编辑器的类型，本人选择的是文件类型的编辑器：Decoupled document；第二步：选择编辑器中需要用到的工具及插件；第三步：选择工具栏中要显示的工具；第四步：选择默认的语言；第五步：开始build；第六步：下载build后的包

ckeditor5全屏按钮

01-12

CKEditor 5是一款先进的富文本编辑器，专为现代Web应用程序设计。它的全屏按钮功能是编辑器的一个重要特性，允许用户将编辑区域扩展到浏览器的整个窗口，从而提供无干扰的写作体验。这个功能在编写长篇文章、报告...

ckeditor5-math：CKEditor 5的数学功能

02-03

import Mathematics from 'ckeditor5-math/src/math' ; 将其添加到内置插件 InlineEditor . builtinPlugins = [ // ... Mathematics ] ; 将数学按钮添加到工具栏 InlineEditor . defaultConfig = { toolbar : {...

ckeditor5 全功能版（纯手工编译）

12-10

**ckeditor5 全功能版（纯手工编译）** CKEditor 5 是一款现代、开源且功能强大的富文本编辑器，被广泛应用于网站、应用程序和其他需要高质量文本输入的场景。这款编辑器以其易于使用、高度可定制和丰富的功能集而...

CKEditor使用教程

09-02

FCKEditor简单教程，适合新手入门.

ckeditor5-vue:官方CKEditor 5 Vue.js组件

05-02

适用于Vue.js的CKEditor 5 RTF编辑器组件3+ :warning: 该存储库包含Vue.js 3+的CKEditor 5组件。较低Vue.js版本的组件位于另一个存储库- 。 Vue.js的官方 RTF编辑器组件。 :open_book: 请参阅中的指南以了解更多信息：组件指令组件事件贡献克隆此存储库后，安装必要的依赖项： npm install 执行测试 npm run test -- [additional options] # or npm t -- [additional options] 该命令接受以下选项： --coverage （ -c ）–是否生成代码覆盖率。 --source-map （ -s ）–是否附加源地图。 --watch （ -w ）–是否监视测试文件。 --reporter （ -r ）– Karma的报告器（默认值： mocha ，可以

ckeditor5

02-11

使用在线生成器生成的CKEditor 5编辑器该存储库显示了由生成的CKEditor 5编辑器版本快速开始在浏览器中打开sample/index.html页面。如果您选择了实时协作插件：使用正确的令牌，websocket和上载URL端点填充对话框。如果您还没有这些或不知道它们的含义，请。复制并共享URL或粘贴到另一个选项卡中，以享受实时协作编辑功能。如果您选择了非实时协作插件：在许可证提示中填写许可证密钥。如果您还没有许可证密钥，请。配置构建诸如更改工具栏项目，更改图标顺序或自定义插件配置之类的更改应该相对容易地进行。打开sample/index.html文件并编辑用于初始化CKEditor 5的脚本。保存文件并刷新浏览器。就这样。注意：如果您对浏览器缓存有任何问题，请根据系统使用Ctrl + R或Cmd + R快捷方式。但是，如果要删除插件或

CKEditor5开发环境-javascript

06-21

CKEditor5开发环境; 基于最好的浏览器富文本编辑器 CKEditor 5 一套使用强大框架创建的即用型富文本编辑器。考虑到实时协作编辑。目录快速入门 CKEditor 5 构建 CKEditor 5 框架文档和常见问题贡献和项目组织想法和讨论开发报告问题和功能请求发布包核心库构建功能编辑器主题许可证快速入门 CKEditor 5 构建 CKEditor 5 构建是一组现成的 -使用富文本编辑器。每个“构建”都提供一种具有一组功能和默认配置的编辑器类型。以下 CKEditor 5 版本目前可用：经典编辑器内联编辑器气球编辑器气球块编辑器文档编辑器示例使用 CKEditor 5 版本创建编辑器非常简单，可以通过两个步骤进行描述：通过foo 加载所需的编辑器）。 @ckeditor/ckeditor5-autosave 自动保存功能。使自动将数据保存到后端变得容易。 @ckeditor/ckeditor5-basic-styles 粗体、斜体、下划线和代码功能。 @ckeditor/ckeditor5-block-quo

ckEditor在jsp中的使用

04-21

ckEditor在jsp中的使用zckEditor在jsp中的使用

ckeditor5-classic-image-resize:CKEditor5经典图像调整大小插件

05-01

ckeditor5-经典图像调整大小 CKEditor5经典图像调整大小插件该插件使您可以使用宽度和高度输入来编辑图像的大小，并提供宽高比锁定工具，使缩放变得容易而又不会扭曲图像。安装 npm i @emagtechlabs/ckeditor5-...

富文本CKEditor5简易入门，包括自定义上传图片（html版+vue.js）

小小酥的博客

07-24

2775

CKeditor简易入门

富文本编辑器的使用1——CKEditor5编辑器

weixin_43259189的博客

11-24

683

在项目中遇到要类似编辑Word表格内容样式的需求，运用了CKEditor5编辑器，可对编辑器里面内容进行编辑

ckeditor5 iframe

06-21

1. 在配置编辑器时，你可以选择`CKEditor5BasicEditor`或自定义配置，并添加`src`属性来指定iframe的源URL。 ```javascript ClassicEditor.create(editableElement, { toolbar: 'myCustomToolbar', // 使用iframe...