Jérémy Munsch
a27f0bf4d8
- Added CKEditor 5 integration with custom plugins for enhanced functionality. - Implemented a unique ID generator for component instances. - Created a dedicated SCSS file for CKEditor styles to ensure proper styling. - Updated the CkEditorComponent to utilize the new setup and improve data handling.
169 lines
3.7 KiB
TypeScript
169 lines
3.7 KiB
TypeScript
/**
|
|
* @license Copyright (c) 2014-2021, CKSource - Frederico Knabben. All rights reserved.
|
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
*/
|
|
import type { Editor, PluginConstructor } from "ckeditor5";
|
|
import {
|
|
Alignment,
|
|
Autoformat,
|
|
AutoLink,
|
|
BlockQuote,
|
|
Bold,
|
|
Code,
|
|
CodeBlock,
|
|
Essentials,
|
|
FindAndReplace,
|
|
FontBackgroundColor,
|
|
FontColor,
|
|
FontFamily,
|
|
FontSize,
|
|
GeneralHtmlSupport,
|
|
Heading,
|
|
Highlight,
|
|
HorizontalLine,
|
|
Image,
|
|
ImageCaption,
|
|
ImageInsert,
|
|
ImageResize,
|
|
ImageStyle,
|
|
ImageToolbar,
|
|
ImageUpload,
|
|
Indent,
|
|
IndentBlock,
|
|
Italic,
|
|
Link,
|
|
LinkImage,
|
|
List,
|
|
ListProperties,
|
|
MediaEmbed,
|
|
MediaEmbedEditing,
|
|
MediaEmbedUI,
|
|
Paragraph,
|
|
PasteFromOffice,
|
|
RemoveFormat,
|
|
SimpleUploadAdapter,
|
|
SourceEditing,
|
|
SpecialCharacters,
|
|
SpecialCharactersEssentials,
|
|
Strikethrough,
|
|
Style,
|
|
Table,
|
|
TableCaption,
|
|
TableCellProperties,
|
|
TableColumnResize,
|
|
TableProperties,
|
|
TableToolbar,
|
|
TextTransformation,
|
|
Underline,
|
|
WordCount,
|
|
} from "ckeditor5";
|
|
import frTranslations from "ckeditor5/translations/fr.js";
|
|
|
|
/**
|
|
* Legacy emojies
|
|
*
|
|
* :-) 😊
|
|
* :-P 😛
|
|
* 8-) 😎
|
|
* ;-) 😉
|
|
* :-D 😄
|
|
* :twisted: 😈
|
|
* :mrgreen: 😁
|
|
* :lol: 😆
|
|
* :roll: 🙄
|
|
* :-? 😕
|
|
* :cry: 😢
|
|
* :-o 😮
|
|
* :evil: 😡
|
|
* :-| 😐
|
|
* :oops: 😳
|
|
* :-x 😠
|
|
* 8-O 😲
|
|
* :-( 😧
|
|
* :arrow: ➡️
|
|
* :idea: 💡
|
|
*/
|
|
const SpecialCharactersEmoji = function (editor: Editor): void {
|
|
editor.plugins.get("SpecialCharacters").addItems("Emoji", [
|
|
{ title: ":-)", character: "😊" },
|
|
{ title: ":-P", character: "😛" },
|
|
{ title: "8-)", character: "😎" },
|
|
{ title: ";-)", character: "😉" },
|
|
{ title: ":-D", character: "😄" },
|
|
{ title: ":twisted:", character: "😈" },
|
|
{ title: ":mrgreen:", character: "😁" },
|
|
{ title: ":lol:", character: "😆" },
|
|
{ title: ":roll:", character: "🙄" },
|
|
{ title: ":-?", character: "😕" },
|
|
{ title: ":cry:", character: "😢" },
|
|
{ title: ":-o", character: "😮" },
|
|
{ title: ":evil:", character: "😡" },
|
|
{ title: ":-|", character: "😐" },
|
|
{ title: ":oops:", character: "😳" },
|
|
{ title: ":-x", character: "😠" },
|
|
{ title: "8-O", character: "😲" },
|
|
{ title: ":-(", character: "😧" },
|
|
{ title: ":arrow:", character: "➡" },
|
|
{ title: ":idea:", character: "💡" },
|
|
]);
|
|
};
|
|
|
|
const builtinPlugins: Array<PluginConstructor | typeof SpecialCharactersEmoji> = [
|
|
Alignment,
|
|
Autoformat,
|
|
AutoLink,
|
|
BlockQuote,
|
|
Bold,
|
|
Code,
|
|
CodeBlock,
|
|
Essentials,
|
|
FindAndReplace,
|
|
FontBackgroundColor,
|
|
FontColor,
|
|
FontFamily,
|
|
FontSize,
|
|
GeneralHtmlSupport,
|
|
Heading,
|
|
Highlight,
|
|
HorizontalLine,
|
|
Image,
|
|
ImageCaption,
|
|
ImageInsert,
|
|
ImageResize,
|
|
ImageStyle,
|
|
ImageToolbar,
|
|
ImageUpload,
|
|
Indent,
|
|
IndentBlock,
|
|
Italic,
|
|
Link,
|
|
LinkImage,
|
|
List,
|
|
ListProperties,
|
|
MediaEmbed,
|
|
MediaEmbedEditing,
|
|
MediaEmbedUI,
|
|
Paragraph,
|
|
PasteFromOffice,
|
|
RemoveFormat,
|
|
SimpleUploadAdapter,
|
|
SourceEditing,
|
|
SpecialCharacters,
|
|
SpecialCharactersEssentials,
|
|
SpecialCharactersEmoji,
|
|
Strikethrough,
|
|
Style,
|
|
Table,
|
|
TableCaption,
|
|
TableCellProperties,
|
|
TableColumnResize,
|
|
TableProperties,
|
|
TableToolbar,
|
|
TextTransformation,
|
|
Underline,
|
|
WordCount,
|
|
];
|
|
|
|
export { ClassicEditor } from "ckeditor5";
|
|
export { builtinPlugins, frTranslations };
|
|
|