Files
monsiteperso/app/templates/edit-tools/_editor-wysiwyg.html
2026-07-23 04:33:21 +02:00

81 lines
1.8 KiB
HTML

<div id="editor">
{{ bloc.text|safe }}
</div>
<br/>
<textarea style="display :none;" id="text" name="text"> </textarea>
<!-- Initialize Quill editor -->
<script>
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
['link', 'image'],
[{ 'header': 2 }, { 'header': 3 }, { 'header': 4},], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [ 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'] // remove formatting button
];
var quill = new Quill('#editor', {
theme: 'snow',
modules: {
syntax: true, // Include syntax module
toolbar: toolbarOptions, // Include button in toolbar
resize: {
// embed tags to capture resize
embedTags: ["VIDEO", "IFRAME"],
// custom toolbar
tools: [
"left",
"center",
"right",
"full",
"edit",
{
text: "Alt",
attrs: {
title: "Set image alt",
class: "btn-alt",
},
verify(activeEle) {
return activeEle && activeEle.tagName === "IMG";
},
handler(evt, button, activeEle) {
let alt = activeEle.alt || "";
alt = window.prompt("Description de l'image", alt);
if (alt == null) return;
activeEle.setAttribute("alt", alt);
},
},
],
}
},
});
</script>
<style>
.ql-container {
height: fit-content;
}
.ql-editor {
height: fit-content;
}
</style>