i am using ckeditor, how can i mention a product and insert HTML information related to that product (including photo and name) instead of just @productname, i mean insert a snippet of html code that i can customize, or any editor which can perform the same operation
<code>function MentionCustomization(editor) {
editor.conversion.for("upcast").elementToAttribute({
view: {
name: "a",
key: "data-mention",
classes: "mention",
attributes: {
href: true,
"data-user-id": true,
},
},
model: {
key: "mention",
value: (viewItem) => {
const mentionAttribute = editor.plugins
.get("Mention")
.toMentionAttribute(viewItem, {
link: viewItem.getAttribute("href"),
userId: viewItem.getAttribute("data-user-id"),
});
return mentionAttribute;
},
},
converterPriority: "high",
});
editor.conversion.for("downcast").attributeToElement({
model: "mention",
view: (modelAttributeValue, { writer }) => {
if (!modelAttributeValue) {
return;
}
return writer.createAttributeElement(
"a",
{
class: "mention",
"data-mention": modelAttributeValue.id,
"data-user-id": modelAttributeValue.userId,
href: modelAttributeValue.link,
target: "_blank",
},
{
priority: 20,
id: modelAttributeValue.uid,
}
);
},
converterPriority: "high",
});
}
</code>
<code>function MentionCustomization(editor) {
editor.conversion.for("upcast").elementToAttribute({
view: {
name: "a",
key: "data-mention",
classes: "mention",
attributes: {
href: true,
"data-user-id": true,
},
},
model: {
key: "mention",
value: (viewItem) => {
const mentionAttribute = editor.plugins
.get("Mention")
.toMentionAttribute(viewItem, {
link: viewItem.getAttribute("href"),
userId: viewItem.getAttribute("data-user-id"),
});
return mentionAttribute;
},
},
converterPriority: "high",
});
editor.conversion.for("downcast").attributeToElement({
model: "mention",
view: (modelAttributeValue, { writer }) => {
if (!modelAttributeValue) {
return;
}
return writer.createAttributeElement(
"a",
{
class: "mention",
"data-mention": modelAttributeValue.id,
"data-user-id": modelAttributeValue.userId,
href: modelAttributeValue.link,
target: "_blank",
},
{
priority: 20,
id: modelAttributeValue.uid,
}
);
},
converterPriority: "high",
});
}
</code>
function MentionCustomization(editor) {
editor.conversion.for("upcast").elementToAttribute({
view: {
name: "a",
key: "data-mention",
classes: "mention",
attributes: {
href: true,
"data-user-id": true,
},
},
model: {
key: "mention",
value: (viewItem) => {
const mentionAttribute = editor.plugins
.get("Mention")
.toMentionAttribute(viewItem, {
link: viewItem.getAttribute("href"),
userId: viewItem.getAttribute("data-user-id"),
});
return mentionAttribute;
},
},
converterPriority: "high",
});
editor.conversion.for("downcast").attributeToElement({
model: "mention",
view: (modelAttributeValue, { writer }) => {
if (!modelAttributeValue) {
return;
}
return writer.createAttributeElement(
"a",
{
class: "mention",
"data-mention": modelAttributeValue.id,
"data-user-id": modelAttributeValue.userId,
href: modelAttributeValue.link,
target: "_blank",
},
{
priority: 20,
id: modelAttributeValue.uid,
}
);
},
converterPriority: "high",
});
}
i am adding this MentionCustomization to config plugins, in downcast i can only convert to “a” tag, every attempt when I create a container as a div tag to wrap the img and span doesn’t work.
Thanks for help !!
1
CKEditor’s Mention feature is primarily designed to insert inline content (e.g., hyperlinks or text spans) rather than complex HTML structures like div tags with nested elements.
<code>function MentionCustomization(editor) {
editor.conversion.for("upcast").elementToElement({
view: {
name: "div",
classes: "product-mention",
},
model: (viewElement, { writer }) => {
const productName = viewElement.getChild(1).data;
const productId = viewElement.getAttribute("data-product-id");
const productImage = viewElement.getAttribute("data-product-image");
return writer.createElement("productMention", {
name: productName,
id: productId,
image: productImage,
});
},
converterPriority: "high",
});
editor.conversion.for("downcast").elementToElement({
model: "productMention",
view: (modelItem, { writer }) => {
const productName = modelItem.getAttribute("name");
const productId = modelItem.getAttribute("id");
const productImage = modelItem.getAttribute("image");
// Create the wrapper div
const container = writer.createContainerElement("div", {
class: "product-mention",
"data-product-id": productId,
"data-product-image": productImage,
});
// Add the image element
const imageElement = writer.createEmptyElement("img", {
src: productImage,
alt: productName,
class: "product-image",
});
writer.insert(writer.createPositionAt(container, 0), imageElement);
// Add the span element for the name
const nameElement = writer.createText(productName);
writer.insert(writer.createPositionAt(container, "end"), nameElement);
return container;
},
converterPriority: "high",
});
// Add the schema for the custom mention type
editor.model.schema.register("productMention", {
allowWhere: "$block",
allowAttributes: ["name", "id", "image"],
isObject: true,
});
</code>
<code>function MentionCustomization(editor) {
editor.conversion.for("upcast").elementToElement({
view: {
name: "div",
classes: "product-mention",
},
model: (viewElement, { writer }) => {
const productName = viewElement.getChild(1).data;
const productId = viewElement.getAttribute("data-product-id");
const productImage = viewElement.getAttribute("data-product-image");
return writer.createElement("productMention", {
name: productName,
id: productId,
image: productImage,
});
},
converterPriority: "high",
});
editor.conversion.for("downcast").elementToElement({
model: "productMention",
view: (modelItem, { writer }) => {
const productName = modelItem.getAttribute("name");
const productId = modelItem.getAttribute("id");
const productImage = modelItem.getAttribute("image");
// Create the wrapper div
const container = writer.createContainerElement("div", {
class: "product-mention",
"data-product-id": productId,
"data-product-image": productImage,
});
// Add the image element
const imageElement = writer.createEmptyElement("img", {
src: productImage,
alt: productName,
class: "product-image",
});
writer.insert(writer.createPositionAt(container, 0), imageElement);
// Add the span element for the name
const nameElement = writer.createText(productName);
writer.insert(writer.createPositionAt(container, "end"), nameElement);
return container;
},
converterPriority: "high",
});
// Add the schema for the custom mention type
editor.model.schema.register("productMention", {
allowWhere: "$block",
allowAttributes: ["name", "id", "image"],
isObject: true,
});
</code>
function MentionCustomization(editor) {
editor.conversion.for("upcast").elementToElement({
view: {
name: "div",
classes: "product-mention",
},
model: (viewElement, { writer }) => {
const productName = viewElement.getChild(1).data;
const productId = viewElement.getAttribute("data-product-id");
const productImage = viewElement.getAttribute("data-product-image");
return writer.createElement("productMention", {
name: productName,
id: productId,
image: productImage,
});
},
converterPriority: "high",
});
editor.conversion.for("downcast").elementToElement({
model: "productMention",
view: (modelItem, { writer }) => {
const productName = modelItem.getAttribute("name");
const productId = modelItem.getAttribute("id");
const productImage = modelItem.getAttribute("image");
// Create the wrapper div
const container = writer.createContainerElement("div", {
class: "product-mention",
"data-product-id": productId,
"data-product-image": productImage,
});
// Add the image element
const imageElement = writer.createEmptyElement("img", {
src: productImage,
alt: productName,
class: "product-image",
});
writer.insert(writer.createPositionAt(container, 0), imageElement);
// Add the span element for the name
const nameElement = writer.createText(productName);
writer.insert(writer.createPositionAt(container, "end"), nameElement);
return container;
},
converterPriority: "high",
});
// Add the schema for the custom mention type
editor.model.schema.register("productMention", {
allowWhere: "$block",
allowAttributes: ["name", "id", "image"],
isObject: true,
});
}