Quill HTML Редактор ⇐ Html

[Anonymous]

Я пытаюсь добавить возможность вставить HTML в редактор Quill, чтобы пользователи могли вставлять HTML -теги в редактор. Однако, следуя инструкциям, заставляет редактор разбиться. Я не уверен, как правильно добавить блок HTML в редактор Quill. После добавления моего кода, Quill работает правильно, но фактический элемент HTML не добавляется в редактор.((exports) => {
// Define HTMLElement Blot
const Inline = Quill.import('blots/inline');

class HTMLElement extends Inline {
static create(value) {
const node = super.create();
const { tag, ...attributes } = value;
node.tagName = tag.toUpperCase();

Object.keys(attributes).forEach(attr => {
node.setAttribute(attr, attributes[attr]);
});

return node;
}

static formats(node) {
const attributes = {};
if (node.hasAttributes()) {
const attrs = node.attributes;
for (let i = 0; i < attrs.length; i++) {
attributes[attrs.name] = attrs.value;
}
}
return {
tag: node.tagName.toLowerCase(),
...attributes
};
}
}

// Register HTMLElement format
Quill.register('formats/html-element', HTMLElement);

const quillFormats = [
"bold",
"italic",
"link",
"underline",
"header",
"list",
"video",
"image",
"alt",
"break",
"html-element" // Added HTML element format
];

const createQuillEditor = (container) => {
const toolbar = $(container).data("toolbar");
const disabled = $(container).data("disabled");

const styles = {
"Wyróżniony śródtytuł": "area-color-headline",
"Podstawa prawna": "legal-basis",
};

let quillToolbar = [
["bold", "italic", "underline", "linebreak"],
["undo", "redo"],
[{ list: "ordered" }, { list: "bullet" }],
["link", "button", "video", "clean", "html"] // Added HTML button
];

if (toolbar === "full") {
quillToolbar = [
[{ header: [2, 3, 4, 5, 6, false] }],
["bold", "italic", "underline", "strike"],
["undo", "redo"],
["style"],
[{ align: [] }],
[{ list: "ordered" }, { list: "bullet" }],
[{ script: "sub" }, { script: "super" }],
[{ indent: "-1" }, { indent: "+1" }],
[{ direction: "rtl" }],
["blockquote"],
["link", "button", "image", "repository-image", "video", "html"], // Added HTML button
["clean"],
["divider"],
];
} else if (toolbar === "basic") {
quillToolbar = [...quillToolbar, ["video"]];
}

var icons = Quill.import("ui/icons");

icons["undo"] = `


`;

icons["redo"] = `


`;

icons["divider"] = `

`;

icons["button"] = `

`;

icons["html"] = `
<>
`;

registerQuillStyleToolbarTool();

Quill.register({
"formats/extended-image": ExtendedImage,
"formats/extended-video": ExtendedVideo,
"formats/divider": Divider,
"formats/link": Link,
"formats/button": Button,
});

const $input = $(container).siblings('input[type="hidden"]');
container.innerHTML = $input.val() || "";

const quill = new Quill(container, {
modules: {
history: {
userOnly: true,
},
toolbar: {
container: quillToolbar,
handlers: {
image: createImageToolbarToolHandler({
uploadEndpointUrl: "//" + location.host + "/admin/files",
}),

"repository-image": createRepositoryImageToolbarToolHandler({
iframeSourceUrl: "/admin/files/editor_images",
}),

divider: function() {
var range = quill.getSelection();
if (range) {
quill.insertEmbed(range.index, "divider", "null");
}
},

html: function() {
const range = this.quill.getSelection();
if (range) {
const tag = prompt('Enter HTML tag (e.g., span, div):', 'span');
const className = prompt('Enter class name (optional):', '');

if (tag) {
const value = {
tag: tag,
...(className && { class: className })
};

this.quill.format('html-element', value);
}
}
}
},
},
},
formats: quillFormats,
theme: "snow",
});

initializeQuillStyleToolbarTool(quill, styles);

$(".ql-undo").on("click", function(e) {
quill.history.undo();
});

$(".ql-redo").on("click", function(e) {
quill.history.redo();
});

if (disabled) {
quill.disable();
}

quill.on("text-change", () => {
const text = quill.getText();

let event = new CustomEvent("quill-position", {
detail: quill.getSelection(),
});
container.dispatchEvent(event);

$input.val(quill.root.innerHTML.replace(/(
)+$/, ""));
});

const length = quill.getLength();
const text = quill.getText(length - 1, 1);

if (text === "\n\n") {
quill.deleteText(quill.getLength() - 1, 1);
}

return quill;
};

const quillEditor = () => {
$(".editor-container").each((_idx, container) => {
createQuillEditor(container);
});
};

exports.Decidim = exports.Decidim || {};
exports.Decidim.quillEditor = quillEditor;
exports.Decidim.createQuillEditor = createQuillEditor;
})(window);

Код редактора ниже
shrong> editor.js.es6
((exports) => {
const quillFormats = [
"bold",
"italic",
"link",
"underline",
"header",
"list",
"video",
"image",
"alt",
"break",
];

const createQuillEditor = (container) => {
const toolbar = $(container).data("toolbar");
const disabled = $(container).data("disabled");

const styles = {
// Custom Classes
// Label => Custom Class without prefix
"Wyróżniony śródtytuł": "area-color-headline",
"Podstawa prawna": "legal-basis",
};

let quillToolbar = [
["bold", "italic", "underline", "linebreak"],
["undo", "redo"],
[{ list: "ordered" }, { list: "bullet" }],
["link", "button", "video", "clean"],
];

if (toolbar === "full") {
quillToolbar = [
[{ header: [2, 3, 4, 5, 6, false] }],
["bold", "italic", "underline", "strike"],
["undo", "redo"],
["style"],
[{ align: [] }],
[{ list: "ordered" }, { list: "bullet" }],
[{ script: "sub" }, { script: "super" }],
[{ indent: "-1" }, { indent: "+1" }],
[{ direction: "rtl" }],
["blockquote"],
["link", "button", "image", "repository-image", "video"],
["clean"],
["divider"],
];
} else if (toolbar === "basic") {
quillToolbar = [...quillToolbar, ["video"]];
}

var icons = Quill.import("ui/icons");

icons["undo"] = `


`;

icons["redo"] = `


`;

icons["divider"] = `

`;

icons[
"button"
] = ``;

registerQuillStyleToolbarTool();

Quill.register({
"formats/extended-image": ExtendedImage,
"formats/extended-video": ExtendedVideo,
"formats/divider": Divider,
"formats/link": Link,
"formats/button": Button,
});

const $input = $(container).siblings('input[type="hidden"]');
container.innerHTML = $input.val() || "";

const quill = new Quill(container, {
modules: {
history: {
userOnly: true,
},
// linebreak: {},
toolbar: {
container: quillToolbar,
handlers: {
// "linebreak": exports.Decidim.Editor.lineBreakButtonHandler

image: createImageToolbarToolHandler({
uploadEndpointUrl:
//"https://ks.beta-um.warszawa.pl/admin/files",
"//" + location.host + "/admin/files",
}),

"repository-image": createRepositoryImageToolbarToolHandler({
iframeSourceUrl: "/admin/files/editor_images",
}),

divider: function () {
var range = quill.getSelection();
if (range) {
quill.insertEmbed(range.index, "divider", "null");
}
},
},
},
},
// formats: quillFormats,
theme: "snow",
});

initializeQuillStyleToolbarTool(quill, styles);

$(".ql-undo").on("click", function (e) {
quill.history.undo();
});

$(".ql-redo").on("click", function (e) {
quill.history.redo();
});

if (disabled) {
quill.disable();
}

quill.on("text-change", () => {
const text = quill.getText();

// Triggers CustomEvent with the cursor position
// It is required in input_mentions.js
let event = new CustomEvent("quill-position", {
detail: quill.getSelection(),
});
container.dispatchEvent(event);

$input.val(quill.root.innerHTML.replace(/(
)+$/, ""));
});

const length = quill.getLength();
const text = quill.getText(length - 1, 1);

// Remove extraneous new lines
if (text === "\n\n") {
quill.deleteText(quill.getLength() - 1, 1);
}

return quill;
};

const quillEditor = () => {
$(".editor-container").each((_idx, container) => {
createQuillEditor(container);
});
};

exports.Decidim = exports.Decidim || {};
exports.Decidim.quillEditor = quillEditor;
exports.Decidim.createQuillEditor = createQuillEditor;
})(window);


Подробнее здесь: https://stackoverflow.com/questions/794 ... tml-editor