ckeditor5 安装高亮,颜色插件
ckeditor5 安装高亮插件
1、准备
git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git
cd ckeditor5-build-classic
npm install
2、安装
npm install --save @ckeditor/ckeditor5-highlight
3、配置
/**
* @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md.
*/
// The editor creator to use.
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; // <--- ADDED
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight'; // <--- ADDED
export default class ClassicEditor extends ClassicEditorBase {}
// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
Essentials,
UploadAdapter,
Autoformat,
Bold,
Italic,
BlockQuote,
CKFinder,
EasyImage,
Heading,
Image,
ImageCaption,
ImageStyle,
ImageToolbar,
ImageUpload,
Link,
List,
MediaEmbed,
Paragraph,
PasteFromOffice,
Table,
TableToolbar,
Alignment, // <--- ADDED
Highlight, // <--- ADDED
];
// Editor configuration.
ClassicEditor.defaultConfig = {
toolbar: {
items: [
'heading',
'|',
'alignment', // <--- ADDED
'highlight', // <--- ADDED
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'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: 'zh-cn'
};
4、安装
yarn run build
参考文档
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html
https://ckeditor.com/docs/ckeditor5/latest/features/highlight.html
ckeditor5 安装高亮,颜色插件的更多相关文章
- IntelliJ_2017_安装Grep Console插件(console输出内容加颜色)
官网下载:https://plugins.jetbrains.com/plugin/7125-grep-console 一.安装Grep Console插件 二.设置不同日志类型的不同 ...
- vscode中vue代码颜色插件
vue提示插件[Vscode] 编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整 ...
- [个人配置] VSCode Better Comments 扩展配置、高亮注释插件
在VSCode IDE中,我的代码注释一般都有高亮颜色,那要怎么安装这个插件呢?
- vs 2012 设置选中的引用高亮 颜色
一个简单的小技巧,不用插件也可以做到,vs 2012 设置选中的引用高亮 颜色 .vs 默认的单击引用的变量时,显示的颜色是灰色,基本看不出来,所有特意抽空捣鼓了下 还真让我给找出来 工具==> ...
- sublime中如何安装vue.js插件,并使代码高亮显示
前提概要: sublime的下载地址:http://www.sublimetext.com/ notepad++下载地址:https://notepad-plus-plus.org/ .vue的文件在 ...
- VScode安装后的插件安装
杭州SEO:Chinese(Simplified) Language Pack for Visual Stidio Code 中文汉化包 对于一些英文不太好的小伙伴,上来第一件事肯定是要切换成中文语言 ...
- 代码高亮美化插件-----SyntaxHighlighter
IT类文章博客,代码高亮美化插件-----SyntaxHighlighter 最近在做一个类似个人博客的网站,因为文章中会用到各种代码,主要是Javascript,CSS,PHP,XML等.这些代码如 ...
- eclipse怎样在线安装hibernate tools插件并使用
不知不觉,小Alan已经将近3个月没有上班了,最近在复习一些知识,随时准备回到代码世界的战场,今天复习到了Hibernate,记录一下一点点小知识,那就是eclipse下hibernate Tools ...
- 在IntelliJ IDEA14中安装go语言插件
go语言的集成开发环境仍不成熟,试用了liteide,感觉很不适应,弹出菜单对程序员的干扰太大.所以就试大牌的IntelliJ IDEA,这工具本来是JAVA开发阵营的,不过它已经变为一个非常强大的支 ...
随机推荐
- gitlab提交代码
cd existing_foldergit initgit remote add origin http://10.26.1.9/root/yunlian.gitgit add .git commit ...
- HTML、CSS知识点,面试开发都会需要--No.2 CSS
No.2 CSS 1.选择器类型 选择器类型包括:type.class.id. 2.引用外部css文件 使用link元素,添加rel和href属性:<link rel="styles ...
- cmd运行java程序---路径容易出错的问题
初学者在首次使用cmd运行java程序时面临着很多的问题,重要的基本为“设置环境变量过程”与运行过程中的“路径出错问题”.由于环境变量设置的网络分享更多,且为大众情况,因此比较容易解决! 由于本人 ...
- 微信小程序点击图片全屏
作为一个只懂简单HTML,jQuery,JS的web后台开发者,最近在学习小程序开发,现在将小程序的点击全屏功能的相关内容记录下来.如果有不对的地方或者有更简单的方法,请留言指教 0_0~ .js 文 ...
- 安装Linux操作系统,学习Liunx基础
安装Linux操作系统 遇到的问题以及解决方法 问题1:安装虚拟机时出现以下界面 解决方法 我的电脑--右击--管理--服务和应用服务--服务--在服务里启动:Device Install Servi ...
- AppUtil
import java.io.File;import java.util.ArrayList;import java.util.LinkedHashMap;import java.util.List; ...
- 41A
#include <stdio.h> #include <string.h> #define MAXSIZE 105 int main() { char Berlandish[ ...
- git----------git:如何让git识别我修改了文件夹名字和文件名字的大小写问题。
修改每个项目里面的隐藏的.git文件里面的config文件.将箭头指的原本是true改成false.
- JAVA的值传递问题
为什么 Java 中只有值传递? 首先回顾一下在程序设计语言中有关将参数传递给方法(或函数)的一些专业术语.按值调用(call by value)表示方法接收的是调用者提供的值,而按引用调用(call ...
- 【winform】listbox 列表
一.Item 一个ListBox是由一个个的Item项组成的 1.向下添加Item lstResult.Items.Add("***" + PostWebRequest(cbxUr ...