✨ feat(assets/MainframeEmailEditor.js): Ajoute et configure des plugins CKEditor pour l'éditeur de courriel.
This commit is contained in:
Serreau Jovann
@@ -305,3 +305,8 @@ input {
|
||||
}
|
||||
}
|
||||
}
|
||||
.editor-container{
|
||||
border: 1px solid #cdcdcd !important;
|
||||
margin: 0.25rem;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
@@ -65,7 +65,8 @@ export class MainframeEmailEditor extends HTMLElement {
|
||||
<div class="email-builder-toolbar">
|
||||
<h2>EsyMail - Editor</h2>
|
||||
<div class="email-builder-actions">
|
||||
<a class="save px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white transition font-semibold">
|
||||
|
||||
<a class="save px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white transition font-semibold">
|
||||
Sauvegarder
|
||||
</a>
|
||||
<a class="closed px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white transition font-semibold">
|
||||
@@ -104,7 +105,6 @@ export class MainframeEmailEditor extends HTMLElement {
|
||||
`;
|
||||
|
||||
let content = modal.querySelector('.content');
|
||||
|
||||
let save = modal.querySelector('.save');
|
||||
save.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
@@ -112,10 +112,18 @@ export class MainframeEmailEditor extends HTMLElement {
|
||||
|
||||
let configs = {};
|
||||
content.querySelectorAll('.area-block').forEach((block,posBlock) => {
|
||||
let modules ={};
|
||||
block.querySelectorAll('.md-ctrl').forEach((blockM,posModule)=>{
|
||||
console.log(blockM);
|
||||
modules[posModule] = {
|
||||
type: blockM.getAttribute('type'),
|
||||
config: blockM.getAttribute('configs'),
|
||||
}
|
||||
})
|
||||
configs[posBlock] = {
|
||||
type: block.getAttribute('type'),
|
||||
config: JSON.parse(block.getAttribute('config')),
|
||||
modules: {}
|
||||
modules: modules
|
||||
}
|
||||
})
|
||||
console.log(configs);
|
||||
@@ -799,8 +807,13 @@ export class MainframeEmailEditor extends HTMLElement {
|
||||
let moduleItem = document.createElement('div');
|
||||
moduleItem.classList = 'md-ctrl '+mType;
|
||||
let name = "";
|
||||
if(mType == "text")
|
||||
let configM = {}
|
||||
if(mType == "text") {
|
||||
name = "Texte"
|
||||
configM = {
|
||||
txt: ''
|
||||
}
|
||||
}
|
||||
if(mType == "image")
|
||||
name = "Image"
|
||||
if(mType == "lien")
|
||||
@@ -811,17 +824,13 @@ export class MainframeEmailEditor extends HTMLElement {
|
||||
<button class="edit-module">Modifier</button>
|
||||
<button class="remove-module">X</button>
|
||||
</div>`;
|
||||
moduleItem.setAttribute('configs',JSON.stringify(configM));
|
||||
moduleItem.querySelector('.edit-module').addEventListener('click', (e)=>{
|
||||
e.preventDefault();
|
||||
let sideEditor = document.createElement('div');
|
||||
sideEditor.classList = "side-editor";
|
||||
sideEditor.innerHTML = `
|
||||
<div class="closed-btn-m">Fermer</div>
|
||||
text -> editor
|
||||
image -> upload
|
||||
link -> input + opt button
|
||||
social -> fb / insta / linkedin / tiktok
|
||||
`;
|
||||
<div class="closed-btn-m">Fermer</div>`;
|
||||
if(mType == "text") {
|
||||
let textarea = document.createElement('div');
|
||||
textarea.classList = "editor-container editor-container_inline-editor";
|
||||
@@ -949,14 +958,18 @@ export class MainframeEmailEditor extends HTMLElement {
|
||||
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",
|
||||
initialData:config.txt,
|
||||
language: 'fr',
|
||||
licenseKey: LICENSE_KEY,
|
||||
placeholder: 'Type or paste your content here!',
|
||||
placeholder: '',
|
||||
translations: [translations]
|
||||
};
|
||||
InlineEditor.create(textarea, editorConfig);
|
||||
InlineEditor.create(textarea, editorConfig).then((editor)=>{
|
||||
editor.model.document.on( 'change:data', () => {
|
||||
configM.txt = editor.getData();
|
||||
moduleItem.setAttribute('configs',JSON.stringify(configM));
|
||||
} );
|
||||
});
|
||||
|
||||
}
|
||||
sideEditor.querySelector('.closed-btn-m').addEventListener('click', (e)=>{
|
||||
|
||||
@@ -4,24 +4,30 @@
|
||||
<mj-section background-color="{{item.config.backgroundColor}}">
|
||||
{% if item.type == "1col" %}
|
||||
<mj-column>
|
||||
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
|
||||
|
||||
{% for module in item.modules %}
|
||||
{% if module.type == "txt" %}
|
||||
<mj-text>{{ module.configs.txt|raw }}</mj-text>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</mj-column>
|
||||
{% endif%}
|
||||
{% if item.type == "5050col" or item.type == "505050col" %}
|
||||
<mj-column background-color="{{item.config.backgroundColor_1}}">
|
||||
{% for module in item.modules %}
|
||||
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
|
||||
|
||||
{% endfor %}
|
||||
</mj-column>
|
||||
<mj-column background-color="{{item.config.backgroundColor_2}}">
|
||||
{% for module in item.modules %}
|
||||
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
|
||||
|
||||
{% endfor %}
|
||||
</mj-column>
|
||||
{% endif%}
|
||||
{% if item.type == "505050col" %}
|
||||
<mj-column background-color="{{item.config.backgroundColor_3}}">
|
||||
{% for module in item.modules %}
|
||||
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
|
||||
|
||||
{% endfor %}
|
||||
</mj-column>
|
||||
{% endif%}
|
||||
</mj-section>
|
||||
|
||||
Reference in New Issue
Block a user