✨ feat(assets/MainframeEmailEditor.js): Ajoute et configure des plugins CKEditor pour l'éditeur de courriel.
This commit is contained in:
Serreau Jovann
@@ -3,18 +3,29 @@ import sortable from "sortablejs/src/Sortable.js";
|
||||
|
||||
import {
|
||||
InlineEditor,
|
||||
Alignment,
|
||||
AutoLink,
|
||||
Autosave,
|
||||
BlockQuote,
|
||||
Bold,
|
||||
Bookmark,
|
||||
Code,
|
||||
CodeBlock,
|
||||
Essentials,
|
||||
FontBackgroundColor,
|
||||
FontColor,
|
||||
FontFamily,
|
||||
FontSize,
|
||||
GeneralHtmlSupport,
|
||||
Heading,
|
||||
Highlight,
|
||||
HorizontalLine,
|
||||
ImageEditing,
|
||||
ImageUtils,
|
||||
Indent,
|
||||
IndentBlock,
|
||||
Italic,
|
||||
Link,
|
||||
Paragraph,
|
||||
RemoveFormat,
|
||||
Strikethrough,
|
||||
@@ -825,6 +836,8 @@ export class MainframeEmailEditor extends HTMLElement {
|
||||
'undo',
|
||||
'redo',
|
||||
'|',
|
||||
'heading',
|
||||
'|',
|
||||
'fontSize',
|
||||
'fontFamily',
|
||||
'fontColor',
|
||||
@@ -839,23 +852,44 @@ export class MainframeEmailEditor extends HTMLElement {
|
||||
'code',
|
||||
'removeFormat',
|
||||
'|',
|
||||
'highlight'
|
||||
'horizontalLine',
|
||||
'link',
|
||||
'bookmark',
|
||||
'highlight',
|
||||
'blockQuote',
|
||||
'codeBlock',
|
||||
'|',
|
||||
'alignment',
|
||||
'|',
|
||||
'outdent',
|
||||
'indent'
|
||||
],
|
||||
shouldNotGroupWhenFull: false
|
||||
},
|
||||
plugins: [
|
||||
Alignment,
|
||||
AutoLink,
|
||||
Autosave,
|
||||
BlockQuote,
|
||||
Bold,
|
||||
Bookmark,
|
||||
Code,
|
||||
CodeBlock,
|
||||
Essentials,
|
||||
FontBackgroundColor,
|
||||
FontColor,
|
||||
FontFamily,
|
||||
FontSize,
|
||||
GeneralHtmlSupport,
|
||||
Heading,
|
||||
Highlight,
|
||||
HorizontalLine,
|
||||
ImageEditing,
|
||||
ImageUtils,
|
||||
Indent,
|
||||
IndentBlock,
|
||||
Italic,
|
||||
Link,
|
||||
Paragraph,
|
||||
RemoveFormat,
|
||||
Strikethrough,
|
||||
@@ -863,13 +897,58 @@ export class MainframeEmailEditor extends HTMLElement {
|
||||
Superscript,
|
||||
Underline
|
||||
],
|
||||
fontFamily: {
|
||||
supportAllValues: true
|
||||
},
|
||||
fontSize: {
|
||||
options: [10, 12, 14, 'default', 18, 20, 22],
|
||||
supportAllValues: true
|
||||
},
|
||||
heading: {
|
||||
options: [
|
||||
{
|
||||
model: 'paragraph',
|
||||
title: 'Paragraph',
|
||||
class: 'ck-heading_paragraph'
|
||||
},
|
||||
{
|
||||
model: 'heading1',
|
||||
view: 'h1',
|
||||
title: 'Heading 1',
|
||||
class: 'ck-heading_heading1'
|
||||
},
|
||||
{
|
||||
model: 'heading2',
|
||||
view: 'h2',
|
||||
title: 'Heading 2',
|
||||
class: 'ck-heading_heading2'
|
||||
},
|
||||
{
|
||||
model: 'heading3',
|
||||
view: 'h3',
|
||||
title: 'Heading 3',
|
||||
class: 'ck-heading_heading3'
|
||||
},
|
||||
{
|
||||
model: 'heading4',
|
||||
view: 'h4',
|
||||
title: 'Heading 4',
|
||||
class: 'ck-heading_heading4'
|
||||
},
|
||||
{
|
||||
model: 'heading5',
|
||||
view: 'h5',
|
||||
title: 'Heading 5',
|
||||
class: 'ck-heading_heading5'
|
||||
},
|
||||
{
|
||||
model: 'heading6',
|
||||
view: 'h6',
|
||||
title: 'Heading 6',
|
||||
class: 'ck-heading_heading6'
|
||||
}
|
||||
]
|
||||
},
|
||||
fontFamily: {
|
||||
supportAllValues: true
|
||||
},
|
||||
initialData:
|
||||
"<h2>Congratulations on setting up CKEditor 5! 🎉</h2>\n<p>\n\tYou've successfully created a CKEditor 5 project. This powerful text editor\n\twill enhance your application, enabling rich text editing capabilities that\n\tare customizable and easy to use.\n</p>\n<h3>What's next?</h3>\n<ol>\n\t<li>\n\t\t<strong>Integrate into your app</strong>: time to bring the editing into\n\t\tyour application. Take the code you created and add to your application.\n\t</li>\n\t<li>\n\t\t<strong>Explore features:</strong> Experiment with different plugins and\n\t\ttoolbar options to discover what works best for your needs.\n\t</li>\n\t<li>\n\t\t<strong>Customize your editor:</strong> Tailor the editor's\n\t\tconfiguration to match your application's style and requirements. Or\n\t\teven write your plugin!\n\t</li>\n</ol>\n<p>\n\tKeep experimenting, and don't hesitate to push the boundaries of what you\n\tcan achieve with CKEditor 5. Your feedback is invaluable to us as we strive\n\tto improve and evolve. Happy editing!\n</p>\n<h3>Helpful resources</h3>\n<p>\n\t<i>An editor without the </i><code>Link</code>\n\t<i>plugin? That's brave! We hope the links below will be useful anyway </i>😉\n</p>\n<ul>\n\t<li>📝 Trial sign up: https://portal.ckeditor.com/checkout?plan=free,</li>\n\t<li>📕 Documentation: https://ckeditor.com/docs/ckeditor5/latest/installation/index.html,</li>\n\t<li>⭐️ GitHub (star us if you can!): https://github.com/ckeditor/ckeditor5,</li>\n\t<li>🏠 CKEditor Homepage: https://ckeditor.com,</li>\n\t<li>🧑💻 CKEditor 5 Demos: https://ckeditor.com/ckeditor-5/demo/</li>\n</ul>\n<h3>Need help?</h3>\n<p>\n\tSee this text, but the editor is not starting up? Check the browser's\n\tconsole for clues and guidance. It may be related to an incorrect license\n\tkey if you use premium features or another feature-related requirement. If\n\tyou cannot make it work, file a GitHub issue, and we will help as soon as\n\tpossible!\n</p>\n",
|
||||
language: 'fr',
|
||||
|
||||
Reference in New Issue
Block a user