0

I have been strugling for longtime to add VueJS directive to html via TinyMCE plugin.

We have this EpiServer/Optimizely CMS (ver. 12) website that used some old AngularJS. I am migrating this website to VueJS (ver. 3) and this is the last thing remaining where I have to add VueJS directive via TinyMCE.

I tried to add this via TinyMCECustomizations by using attributes object/dictionary but it didn't worked

public static IServiceCollection AddTinyMceCustomizations(this IServiceCollection services)
        {
            services.Configure<TinyMceConfiguration>(config =>
            {
                // Add the advanced list styles, table, and code plugins
                // and append buttons for inserting and editing tables
                // and showing source code to the toolbar
                config.Default()
                    .AddPlugin("xxx")
                    .Toolbar(
                        "xxxxe")
                    .StyleFormats(
                        new { title = "Accordion heading", block = "h2", attributes = new Dictionary<string,string> { {"v-accordion",""}}, classes = "accordion-header", }
                    )
                ;
            });
            return services;
        }

v-accordion is just a custom VueJS directive. I tried with v-show="false" & v_show="false" but nothing works.

I then tried to create custom plugin for TinyMCE

/**
 * Add plugin for surrounding text with <mark> element to highlight text, for example in blog posts
 */
tinymce.PluginManager.add("markButton", function (editor, url) {
    editor.on('init', function () {
        // Register custom formatter which simply surrounds selected content with a <mark> tag
        editor.formatter.register('mark', {
            inline: 'mark',
            attributes: { v_show:'false' }
        });
    });

    editor.addButton('markButton', {
        icon: 'backcolor',
        tooltip: "Highlight text",
        onclick: function (e) {
            // Add or remove <mark> tag around the selected content
            tinymce.activeEditor.formatter.toggle('mark');
        },
        onPostRender: function () {
            // When active node changes, highlight the toolbar button if on a <mark> element
            editor.on('NodeChange', function (e) {
                this.active(e.element.tagName === "MARK");
            }.bind(this));
        }
    });

    return {
        getMetadata: function () {
            return {
                name: 'Mark button',
                url: 'https://xx.dk'
            };
        }
    }
});

But nothing works.

I just want to create following HTML

<h1 v-accordion>Test<h1/>

h1 is just an example it could also be h2

Right now its rendering as

<h2 class="accordion-header">XXX</h2>
Z.IT
  • 21
  • 4
  • Do you expect it to actually work inside TinyMCE, or do you just want the attribute added? – Ted Nyberg Apr 17 '23 at 06:50
  • You may also need to add the Vue attribute to the list of approved attributes, otherwise TinyMCE will remove it (you can validate this by manually adding the attribute through HTML mode in TinyMCE to see if it sticks after saving the content). – Ted Nyberg Apr 17 '23 at 06:57
  • I just want it to added via TinyMCE and when displaying html on website the attribute should work as anyother vuejs directive added on html tag – Z.IT Apr 18 '23 at 06:49
  • You could probably add your custom attribute(s) to `extended_valid_elements` for applicable element types and then add/remove attributes through your plugin. – Ted Nyberg Apr 18 '23 at 07:09

0 Answers0