ckeditor5 之 代码块 插件安装

最新推荐文章于 2024-05-14 23:27:17 发布
最新推荐文章于 2024-05-14 23:27:17 发布
阅读量1.9k 收藏 3
点赞数 1
分类专栏： linux html5 javascript 文章标签： javascript 前端 node.js centos linux
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42500714/article/details/104590215
版权
linux 同时被 3 个专栏收录
26 篇文章 0 订阅
订阅专栏
javascript
12 篇文章 0 订阅
订阅专栏
html5
11 篇文章 0 订阅
订阅专栏

本人编译好的js

https://download.csdn.net/download/weixin_42500714/12202742

1. ckeditor5 源码下载

https://github.com/ckeditor/ckeditor5-build-classic.git

2. 切换到软件目录

cd ckeditor5-build-classic/

3. 下载远程的插件包

npm install

4. 安装 代码块 插件

npm install --save @ckeditor/ckeditor5-code-block

5. 编辑编译前的配置文件 (src/ckeditor.js) 新增如下内容 

下图是我的软件目录 仅供参考

import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';

CodeBlock

'codeblock',

6. 编译

npm run build

7. 将编译好的js文件拷贝到项目中使用即可 ( build/ckeditor.js )

最终效果

fanfan_y
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
ckeditor5-code-snippet-plugin:此插件可帮助您在富文本格式中创建代码块或代码段
05-16
CKEditor5代码片段插件 此插件可帮助您在富文本格式中创建代码块或代码段。 如何使用 要使用此插件，您将需要使用框架来设置编辑器。 如果您尚未这样做，则下面是指向相应的前端框架特定文档的链接。 我将建议您使用自定义编辑器而不是构建。 如果要使用该版本，则需要按照说明进行操作，以免出现。 ：请注意，您还不能为Angular构建用于源代码的自定义编辑器。 您将需要修改构建，才能将此插件与Angular项目一起使用。 使用npm i ckeditor5-code-snippet-plugin安装此软件包。 该软件包包含有助于创建预格式化文本以及命令和工具栏按钮的插件。 将CodeSnippet插件导入到包含您的编辑器的文件中，如下所示 import CodeSnippet from 'ckeditor5-code-snippet-plugin/dist/codesnippet' ;
为CKEditor开发插入代码的插件
07-27
NULL 博文链接：https://ipc.iteye.com/blog/695393
CKEditor5 创建插件、工具栏添加自定义工具、自定义按钮图标
最新发布
一个小白
05-14 510
CKEditor5 创建插件、工具栏添加自定义工具、自定义按钮图标
CKEditor4的代码编辑插件增强版
lornwolf的博客
11-18 723
CKEditor4是一个优秀的所见即所得的在线富文本编辑控件，历史悠久，插件众多，使用它可以很方便地实现在网页上像Word一样编辑文档。前两年发布了CKEditor5，但并不是CKEditor的升级替代版，而是两个版本并行发展。CKEditor5使用目前最流行的npm + webpack的方式打包代码，似乎是代表了CKEditor的未来，但由于其插件较少，尤其是缺少iframe插件（对我来说很重要...
【CKEditor5】CKEditor5 添加代码高亮 (Prismjs)
此人太懒，没有任何简介
12-14 1006
CKEditor5 添加代码高亮 (Prismjs)
Vue CKEditor5 自定义编辑器详细流程（插件安装使用流程）
卡尔特斯
07-12 5189
Vue CKEditor5 快速了解并使用，以及 官方使用插件案例。 自定义编辑器的流程：下载官方的源码，然后找到符合要求的基础编辑器包，对它进行修改，安装支持插件等，调整完成之后，对这个编辑器包进行重新打包，就得到了自定义编辑器，可以直接丢入项目或者放到 中去使用。下载官方源码，注意：推荐使用 分支。 下载完成后 中就是基础编辑器包，随便选个（例如： ），这个包就是官网 中的经典编辑器 。打开 项目，运行 安装依赖，通过 生成 文件夹， 文件夹中就是打包好的编辑器，通过导入项目使用即可
CKEditor中加入syntaxhighlighter代码高亮插件
10-25
你可以通过修改`SyntaxHighlighter`的CSS文件来调整代码块的样式，如背景色、字体、行号等。此外，`SyntaxHighlighter`支持多种编程语言，可以根据需要添加或删除语言选项。 总结来说，CKEditor是一款强大的富文本...
SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色
10-27
作为程序员在写博客文章的时候，经常要插入些代码片断，很多博客系统都提供代码语法着色高亮显示的功能或插件，让代码显示更直接明了
CKEditor4.3.4增加插入高亮代码插件_整合版
04-02
在CKEditor中集成gcp，用户可以直接在编辑器内插入代码块，并自动应用高亮效果，极大地提升了代码的可读性。 整合这个插件的过程通常包括以下步骤： - 下载CKEditor 4.3.4和Google Code Prettify的库文件。 - 将...
ckeditor5编辑器
11-17
对官方代码进行了再次构建，该包包含字体设置，字体大小，代码块，字体高亮等等
ckeditor 4代码插件
12-05
ckeditor 4 代码插件安装 主页：wudimei.com 安装 把plugins复制到ckeditor目录中，注意是ckeditor4. 修改ckeditor/config.js,加入如下代码： CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: // config.language = 'fr'; // config.uiColor = '#AADC6E'; config.extraPlugins = 'code'; }; 使用代码插件 在ckeditor工具栏中点击"<>"按钮,选择php语言，输入代码，然后点“确定”，插入的代码是这样的： [php]<?php define('SITE_DOC_ROOT', dirname( __FILE__ ) ); set_include_path( "." . PATH_SEPARATOR . SITE_DOC_ROOT. PATH_SEPARATOR. get_include_path() ); require_once 'Rong/Object.php'; require_once 'Rong/View.php'; $wudimei = Rong_View::factory("Wudimei"); $wudimei->setViewsDirectory( SITE_DOC_ROOT . "/templates/default" ); $wudimei->compileDir = SITE_DOC_ROOT ."/data/templates/compiled"; $wudimei->assign("name","杨庆荣"); $wudimei->assign("age",1985); $wudimei->display("index/index.html"); ?>[/php] 后台语法高亮 1.具体做法是用preg_replace_callback,提取出"\[php\](.+)\[\/php\]",然后用highlight函数语法加亮。 2.提取之后，可以用str_replace函数来加亮，例如str_replace("{","{", $code ); str_replace(")","{", $code ); 3.当然，也许你需要把>和<之类的html字符转换成">"或者"<"。 版权所有：深圳市无敌美电子商务商行，您可以在保留无敌美版权信息的情况下免费使用此插件。
CKEditor5 Code blocks 配置额外语言支持
小强Lee的博客
01-20 563
添加自定义的代码语言配置则可以在上方代码支持片段的JSON中配置更多即可，例如添加Ckeditor5 代码片段对JSON的支持。可以通过在线构建的时候选择Code blocks 组件。选择后默认支持一下代码语言，是通过pre标签+code标签实现的。以上代码中，添加了ckeditor 5 对于JSON代码片段的支持。CKeditor5代码片段是官方自己集成的。
富文本编辑器ckeditor的使用
月
04-05 1859
一、 在前台用户使用的界面 要防止跨站脚本（xss）攻击所以使用ckeditor 中的UBB模式（功能比较少）特点：1将用户设置的字体样式信息保存成UBB编码 ，不会引起系统对“<”等字符的检测，最后输出的时候再转回来原有html样式； 2 这种模式不怕XSS攻击 可以关闭安全检测（关闭方法见下文） 因为他虽然有可能会将 $(function () { loa
cdeditor 使用
u014164005的博客
10-16 262
jsp 代码   &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;script type="text/javascript" src="../../js/jquery-1.8.3.min.js"&g
Ckeditor5 自定义安装 防出错实战教程（一）安装篇
码农大兵的博客
10-16 9172
Ckeditor5 自定义安装防出错实战教程（一） 欢迎使用Markdown编辑器 本教程重点介绍自定义安装，官方集成版因为功能太少，所以需求不高的，也可以下载官网的集成版和自定义版。 CKEditor5采用的是npm的方式安装插件，后续升级还是比较方便的。 CKEditor5官方提供了多种获取方式，但是编辑器安装后都是精简之后的版本，只有一些最基本的功能，使用起来还是挺麻烦的，要想更灵活的根据自己的需求添加或删减编辑器的特性，需要对编辑器进行定制，下面介绍CKEditor5两种安装方式，分别为npm安装和
富文本编辑器：ckeditor(使用官网下载包)
gao_grace的博客
03-01 4873
之前，直接使用的ckeditor-vue实现的富文本编辑器，问题主要是使用add-ons里面的plugin比较麻烦，需要自己包装，然后如果想要更改固有的plugin，比如table、tableselection比较麻烦。 于是，为了更方便使用修改plugin，我们采用了第二中方式，从官网下载解压package，直接放到项目里面。 下载 官网地址：https://ckeditor.com/ckeditor-4/download/ 可以根据需要直接选择前三个下载，也可以定制自定义的，如果你想要使用额外的add-
ckeditor详细配置与使用说明
热门推荐
Gavid0124的专栏
08-02 1万+
一、使用方法： 1、在页面中引入ckeditor核心文件ckeditor.js  cript" src="ckeditor/ckeditor.js"> 2、在使用编辑器的地方插入HTML控件 如果是ASP.NET环境，也可用服务器端控件 注意在控件中加上 class="ckeditor" 。 3、将相应的控件替换成编辑器代码  cript"
CKEditor 5 插入html代码（二）
飞天代码的博客
08-15 7462
大部分情况是需要往编辑器中插入相关html内容，特别是DecoupledEditor模式的编辑器。 //获取编辑器对象 var editor=ckeditor5Utils.instances[editorId]; var viewFragment = editor.data.processor.toView( content ); var modelF...
CKEditor5基本使用
oldfee的博客
08-14 9246
https://www.jianshu.com/p/47e25447b771
ckeditor5自定义插件
07-28
CKEditor5的自定义插件可以通过以下步骤来实现： 1. 下载CKEditor5的官方源码，推荐使用稳定分支。可以使用以下命令克隆官方源码库： ``` $ git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git ``` 2. 在下载完成后，进入`packages`文件夹，选择一个基础编辑器包（例如：`ckeditor5-build-classic`），这个包就是官网Demo中的经典编辑器。 3. 进入选定的编辑器包，运行`npm install`命令安装依赖。 4. 运行`npm run build`命令生成`build`文件夹，其中包含了打包好的编辑器。 5. 将打包好的编辑器导入到项目中使用。可以通过访问`index.html`文件来查看效果。 6. 如果需要添加插件，可以使用`npm install --save-dev @ckeditor/ckeditor5-alignment`命令安装插件。然后在项目中直接使用该插件即可。 7. 在自定义插件的开发中，可以使用`CKEditorWebpackPlugin`插件来解析`po`文件。该插件在`webpack.config.js`文件中配置，具体参数可以根据需求进行调整。 8. 在自定义插件的开发中，可以创建一个新的插件类，继承自`Plugin`类，并实现相应的方法。例如，可以创建一个名为`SpecialCharactersEmoji`的插件，其中`pluginName`方法返回插件的名称，`init`方法用于初始化插件。 9. 在`init`方法中，可以通过`editor.plugins.get("SpecialCharacters")`来获取特殊字符插件，并使用`addItems`方法来添加自定义的特殊字符。 以上是关于CKEditor5自定义插件的简要介绍和使用方法。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* [Vue CKEditor5 自定义编辑器详细流程（插件安装使用流程）](https://blog.csdn.net/zz00008888/article/details/125737119)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [ckeditor5编写自定义插件，并做国际化处理](https://blog.csdn.net/cc_want/article/details/119457360)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值