How to have a link plugin with extra link id attribute in TinyMce
Introduce
Optimizely CMS Editing is using TinyMce for editing rich-text content. We need to use this control a lot in CMS site for kind of WYSWYG content.
I feel quite happy to use it and one of reason that I like to use tinymce is easy to customization. We can add available plug-ins that we want into toolbar only via configuration in server code. We also can build new plug-ins via javascript and register them in server code to use.
Today, I want to share the way to add a new plug-in as same epi link plug-in with adding more extra id attribute.
Step 1: Create new Link Model in server code with Link Id attribute. Currenty, Link Editor control is using kind of this model type to render to corresponding user interface.
using EPiServer.Cms.Shell.UI.ObjectEditing.InternalMetadata;
using System.ComponentModel;
namespace Sample_Sites.Models
{
public class CustomLinkModel : LinkModel
{
[DisplayName("Link Id")]
public string LinkId { get; set; }
}
}Step 2: Create TinyMce plug-in via javascript named customLink.js under folder "wwwroot/ClientResources/Scripts/tinymce-plugins". In this example, I use Dojo module to do it because I want to re-use code of epi link plug-in. But you can completely use vanilla javascript to create plug-in only with using tinymce.PluginManager.add to add new button in TinyMce toolbar
Here is the place that I change to indicate using our custom link model for Link Editor instead of default one
var linkEditor = new LinkEditor({
baseClass: "epi-link-item",
modelType: "Sample_Sites.Models.CustomLinkModel",
hiddenFields: ["text"] // hide text field from UI
});Here is the place that I change to read Id value from a element
if (href.length) {
linkObject.href = href;
linkObject.targetName = dom.getAttrib(selectedLink, "target");
linkObject.title = dom.getAttrib(selectedLink, "title");
linkObject.linkId = dom.getAttrib(selectedLink, "id");
}Here is the place that I change to set Id attribute for a element
var callbackMethod = function (value) {
if (value && value.href) {
var linkAttributes = {
href: value.href,
title: value.title,
target: value.target ? value.target : null,
id: value.linkId ? value.linkId : null
};Here is full javascript file for custom link plug-in:
define("alloy/tinymce-plugins/customLink", [
"dojo/_base/lang",
"dojo/on",
"epi/shell/widget/dialog/Dialog",
"epi-cms/ApplicationSettings",
"epi-cms/widget/LinkEditor",
"epi-addon-tinymce/tinymce-loader",
"epi-addon-tinymce/plugins/epi-link/linkViewModel",
"epi/i18n!epi/cms/nls/episerver.cms.widget.editlink",
"epi/i18n!epi/cms/nls/episerver.cms.tinymce.plugins.epilink"
], function (lang, on, Dialog, ApplicationSettings, LinkEditor, tinymce, linkViewModel, resource, pluginResource) {
tinymce.PluginManager.add("custom-link", function (editor) {
function mceEPiLink() {
var href = "",
s = editor.selection,
dom = editor.dom,
linkObject = {};
// CMS-20837: when users use the search function of Chrome (ctrl+f), the highlighted text will be un-highlighted
// clone the selection here so it will not be affected by Chrome.
var originalSelection = editor.selection.getRng().cloneRange();
// When link is at the beginning of a paragraph, then IE (and FF?) returns the paragraph from getNode,
// the getStart() and getEnd() however returns the anchor.
var node = s.getStart() === s.getEnd() ? s.getStart() : s.getNode(),
selectedLink = linkViewModel.getAnchorElement(editor, node);
// No selection and not in link
if (s.isCollapsed() && !selectedLink) {
return;
}
if (selectedLink) {
href = dom.getAttrib(selectedLink, "href");
}
if (href.length) {
linkObject.href = href;
linkObject.targetName = dom.getAttrib(selectedLink, "target");
linkObject.title = dom.getAttrib(selectedLink, "title");
linkObject.linkId = dom.getAttrib(selectedLink, "id");
}
var callbackMethod = function (value) {
if (value && value.href) {
var linkAttributes = {
href: value.href,
title: value.title,
target: value.target ? value.target : null,
id: value.linkId ? value.linkId : null
};
// CMS-20837: and set the selection again if selection lost its value.
if (!editor.selection.getContent({ format: "html" })) {
editor.selection.setRng(originalSelection);
}
if (selectedLink) {
dom.setAttribs(selectedLink, linkAttributes);
} else {
if (linkViewModel._isImageFigure(node)) {
linkViewModel.linkImageFigure(editor, node, linkAttributes);
} else {
// When opening the link properties dialog in OPE mode an inline iframe is used rather than a popup window.
// When using IE clicking in this iframe causes the selection to collapse in the TinyMCE iframe which
// breaks the link creation immediately below. The workaround is to store the selection range before
// opening, and restoring it before creating the link.
s.setRng(s.getRng());
// To make sure we dont get nested links and have the same behavior as the default tiny
// link dialog we unlink any links in the selection before we create the new link.
editor.getDoc().execCommand("unlink", false, null);
editor.execCommand("mceInsertLink", false, "#mce_temp_url#", { skip_undo: 1 });
var elementArray = tinymce.grep(dom.select("a"), function (n) {
return dom.getAttrib(n, "href") === "#mce_temp_url#";
});
for (var i = 0; i < elementArray.length; i++) {
dom.setAttribs(elementArray[i], linkAttributes);
}
//move selection into the link content to be able to recognize it when looking at selection
if (elementArray.length > 0) {
var range = editor.dom.createRng();
range.selectNodeContents(elementArray[0]);
editor.selection.setRng(range);
}
}
}
} else if (selectedLink) {
// pressed delete?
dom.setOuterHTML(selectedLink, selectedLink.innerHTML);
editor.undoManager.add();
}
};
linkObject.target = linkViewModel.findFrameId(ApplicationSettings.frames, linkObject.targetName);
var linkEditor = new LinkEditor({
baseClass: "epi-link-item",
//TODO: hardcoded for now
modelType: "Sample_Sites.Models.CustomLinkModel",
hiddenFields: ["text"] // hide text field from UI
});
//Find all Anchors in the document and add them to the Anchor list
var allLinks = editor.getDoc().querySelectorAll("a[id],a[name]");
// If the user is using IE 11 or lower we need to convert the
// nodeList to a regular array
// HACK: IE11
if (tinymce.Env.ie && tinymce.Env.ie < 12) {
allLinks = Array.prototype.slice.call(allLinks);
}
var anchors = linkViewModel.findNamedAnchors(allLinks);
linkEditor.on("fieldCreated", function (fieldname, widget) {
if (fieldname === "href") {
// in this case, widget is HyperLinkSelector
var hyperLinkSelector = widget;
var anchor = linkViewModel.getFirstAnchorWidget(hyperLinkSelector.get("wrappers"));
if (anchor && anchor.inputWidget) {
anchor.inputWidget.set("selections", anchors);
} else {
widget.on("selectorsCreated", function (hyperLinkSelector) { // when all selector have been created
var anchorWidget = linkViewModel.getFirstAnchorWidget(hyperLinkSelector.get("wrappers"));
if (anchorWidget && anchorWidget.inputWidget) {
anchorWidget.inputWidget.set("selections", anchors);
anchorWidget.domNode.style.display = "block";
}
});
}
if (anchor) {
anchor.domNode.style.display = "block";
}
}
});
var dialogTitle = lang.replace(selectedLink ? resource.title.template.edit : resource.title.template.create, resource.title.action);
var dialog = new Dialog({
title: dialogTitle,
dialogClass: "epi-dialog-portrait",
content: linkEditor,
defaultActionsVisible: false
});
dialog.startup();
//Set the value when the provider/consumer has been initialized
linkEditor.set("value", linkObject);
dialog.show();
editor.fire("OpenWindow", {
win: null
});
dialog.on("execute", function () {
var value = linkEditor.get("value");
var linkObject = lang.clone(value);
if (linkObject && linkObject.target) {
// get target frame name, instead of integer value
linkObject.target = linkViewModel.findFrameName(ApplicationSettings.frames, linkObject.target);
}
//Destroy the editor when the dialog closes
linkEditor.destroy();
linkEditor = null;
callbackMethod(linkObject);
});
dialog.on("hide", function () {
editor.fire("CloseWindow", {
win: null
});
});
}
// Register buttons
editor.ui.registry.addToggleButton("custom-link", {
tooltip: pluginResource.title,
onAction: mceEPiLink,
icon: "link",
onSetup: function (buttonApi) {
function selectionChange(e) {
var anchorElement = linkViewModel.getAnchorElement(editor, e.element);
var invalidSelection = !linkViewModel.hasValidSelection(editor, e.element);
buttonApi.setEnabled(!(invalidSelection && !anchorElement));
buttonApi.setActive(!editor.readonly && !!anchorElement);
}
editor.on("SelectionChange", selectionChange);
return function () {
editor.off("SelectionChange", selectionChange);
};
}
});
editor.shortcuts.add("ctrl+k", pluginResource.title, mceEPiLink);
return {
getMetadata: function () {
return {
name: "Link (epi)",
url: "https://www.optimizely.com"
};
}
};
});
});
dojo.require("alloy/tinymce-plugins/customLink");Last step: Add TinyMce configuration with adding your custom plug-in in the toolbar
services.Configure<TinyMceConfiguration>(config =>
{
config.InheritSettingsFromAncestor = true;
config.Default()
.AddExternalPlugin("custom-link", "/ClientResources/Scripts/tinymce-plugins/customLink.js")
.Toolbar("styles | bold italic underline | custom-link anchor | image epi-image-editor epi-personalized-content | bullist numlist outdent indent | epi-dnd-processor | removeformat | fullscreen code")
.AddPlugin("code");
});Finally, check if the plugin is displayed in the TinyMCE editor in Edit Mode. Thankfully, it works! :)
You can see this link https://tedgustaf.com/blog/2022/adding-custom-tinymce-plugin-to-the-html-editor-in-optimizely-cms/ to know how to add a new TinyMce plug-in in general
Jul 13, 2024
Comments