TinyMce で追加のリンク ID 属性を持つリンク プラグインを作成する方法

導入

Optimizely CMS 編集では、リッチ テキスト コンテンツの編集に TinyMce を使用しています。WYSWYG コンテンツのような CMS サイトでは、このコントロールを頻繁に使用する必要があります。

私はこれを使うのにとても満足しています。tinymce を好んで使う理由の 1 つは、カスタマイズが簡単なことです。サーバー コードの設定を介してのみ、必要な利用可能なプラグインをツールバーに追加できます。また、JavaScript を介して新しいプラグインを作成し、サーバー コードに登録して使用することもできます。

今日は、同じ epi link プラグインにさらに id 属性を追加して、新しいプラグインを追加する方法を紹介したいと思います。

ステップ1： リンク ID 属性を使用して、サーバー コードに新しいリンク モデルを作成します。現在、リンク エディター コントロールは、このモデル タイプを使用して、対応するユーザー インターフェイスにレンダリングしています。

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; }
    }
}

ステップ2： 「wwwroot/ClientResources/Scripts/tinymce-plugins」フォルダの customLink.js という JavaScript を使って TinyMce プラグインを作成します。この例では、epi link プラグインのコードを再利用したいので、Dojo モジュールを使ってこれを行います。ただし、tinymce.PluginManager.add を使用して TinyMce ツールバーに新しいボタンを追加するだけで、バニラ JavaScript を使ってプラグインを作成することもできます。

ここでは、リンクエディターのデフォルトのリンクモデルではなく、カスタムリンクモデルを使用するように変更します。

 var linkEditor = new LinkEditor({
     baseClass: "epi-link-item",
     modelType: "Sample_Sites.Models.CustomLinkModel",
     hiddenFields: ["text"] // hide text field from UI
});

ここで要素からID値を読み取るために変更する箇所です

if (href.length) {
    linkObject.href = href;
    linkObject.targetName = dom.getAttrib(selectedLink, "target");
    linkObject.title = dom.getAttrib(selectedLink, "title");
    linkObject.linkId = dom.getAttrib(selectedLink, "id");
}

ここで要素の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
          };

以下はカスタム リンク プラグインの完全な JavaScript ファイルです。

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  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 

最後のステップ： ツールバーにカスタムプラグインを追加してTinyMce設定を追加します

services.Configure(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");
});

最後に、編集モードの TinyMCE エディターにプラグインが表示されるかどうかを確認します。ありがたいことに、動作します! 🙂

このリンクからご覧いただけます https://tedgustaf.com/blog/2022/adding-custom-tinymce-plugin-to-the-html-editor-in-optimizely-cms/ 一般的に新しいTinyMceプラグインを追加する方法を知る

2024年7月13日