Is it possible to integrate Polymer elements/WebComponents into TinyMCE?

Question

Is it possible to integrate Polymer elements/WebComponents into TinyMCE?

I've been working on creating a unique TinyMCE editor for educational content, aiming to wrap specific blocks as interactive 'activities'. Each block of content will contain multiple activities with their own primary keys for identification.

The main obstacle I'm facing is developing a plugin to facilitate this functionality. While shortcodes are an option, they tend to cause errors. I have explored the possibility of using custom HTML tags rendered through Polymer. Can this approach be successfully implemented?

javascript tinymce polymer web-component

Answer 1

Answer №1

For a more up-to-date solution, here is an ES6 module and standard Web component implementation that differs from @liamzebedee's outdated solution.

The main change in this code is the script injection into the TinyMCE <iframe/> to define the Web component. Despite this alteration, the accepted tag remains inert.

Below is the snippet related to initializing TinyMCE:

const name = 'custom-element';
const attribute = 'view-mode';
const insertTag = '<custom-element view-mode="editing"></custom-element>';
const definitionFile = './custom-element.js';

tinymce.PluginManager.add(name, function(editor, url) {
    editor.ui.registry.addButton(name, {
        text: name,
        onAction: () => editor.insertContent(insertTag)
    });
});

tinymce.init({
    // ...

    custom_elements: name,
    extended_valid_elements: `${name}[${attribute}]`,

    init_instance_callback: function(editor) {
        const edDoc = editor.getDoc();
        const scriptTag = edDoc.createElement('script');
        scriptTag.src = definitionFile;
        scriptTag.type = 'module';
        edDoc.querySelector('head').appendChild(scriptTag);
    }
});

Here is the basic implementation of the corresponding Web component:

export class SimpleNumber extends HTMLElement {

    constructor() {
        super();

        this.attachShadow({mode: 'open'}).innerHTML = `
            <style>
                :host { display:inline-block; }
                input { border: 1px solid blue; font-size: 12pt; text-align: right; }
            </style>
            <input type="number" min="0" max="10" value="0" />
        `;

        this.shadowRoot.querySelector('input').addEventListener('change', (event) => {
            const field = event.target;
            field.style.backgroundColor = field.value === '3' ? 'lightgreen' : 'orange';
        });
    }
}

if (window.customElements && !window.customElements.get('simple-number')){
    window.customElements.define('simple-number', SimpleNumber);
}

Please note that I am unable to provide a live demo on platforms like codepen.io due to the requirement for a separate JS file for the custom element definition that needs to be injected into the <iframe/>.

Answer 2

For a more up-to-date solution, here is an ES6 module and standard Web component implementation that differs from @liamzebedee's outdated solution.

The main change in this code is the script injection into the TinyMCE <iframe/> to define the Web component. Despite this alteration, the accepted tag remains inert.

Below is the snippet related to initializing TinyMCE:

const name = 'custom-element';
const attribute = 'view-mode';
const insertTag = '<custom-element view-mode="editing"></custom-element>';
const definitionFile = './custom-element.js';

tinymce.PluginManager.add(name, function(editor, url) {
    editor.ui.registry.addButton(name, {
        text: name,
        onAction: () => editor.insertContent(insertTag)
    });
});

tinymce.init({
    // ...

    custom_elements: name,
    extended_valid_elements: `${name}[${attribute}]`,

    init_instance_callback: function(editor) {
        const edDoc = editor.getDoc();
        const scriptTag = edDoc.createElement('script');
        scriptTag.src = definitionFile;
        scriptTag.type = 'module';
        edDoc.querySelector('head').appendChild(scriptTag);
    }
});

Here is the basic implementation of the corresponding Web component:

export class SimpleNumber extends HTMLElement {

    constructor() {
        super();

        this.attachShadow({mode: 'open'}).innerHTML = `
            <style>
                :host { display:inline-block; }
                input { border: 1px solid blue; font-size: 12pt; text-align: right; }
            </style>
            <input type="number" min="0" max="10" value="0" />
        `;

        this.shadowRoot.querySelector('input').addEventListener('change', (event) => {
            const field = event.target;
            field.style.backgroundColor = field.value === '3' ? 'lightgreen' : 'orange';
        });
    }
}

if (window.customElements && !window.customElements.get('simple-number')){
    window.customElements.define('simple-number', SimpleNumber);
}

Please note that I am unable to provide a live demo on platforms like codepen.io due to the requirement for a separate JS file for the custom element definition that needs to be injected into the <iframe/>.

Answer 3

Answer №2

It took me a good 4 hours to figure it all out.

To properly set up the TinyMCE editor with custom elements, you need to initialize it like this:

{
...
    extended_valid_elements : 'module-activity',
    custom_elements : 'module-activity',
    init_instance_callback: function(editor) {
        registerCustomWebComponents(tinymce.activeEditor.dom.doc);
    },
...
}

The function registerCustomWebComponents should be defined as follows:

function registerCustomWebComponents(doc) {
  doc.registerElement('module-activity', ModuleActivityHTMLElement);  
}

I found it best to define the custom HTML element and React component separately rather than constructing the HTML as a string.

class ModuleActivity extends React.Component {
  constructor(props) {
    super(props);
    this.openActivityEdit = this.openActivityEdit.bind(this);
  }

  openActivityEdit() {

  }

  render() {
    return <div>
      <h3>Module Activity</h3>
      <button onClick={this.openActivityEdit}>Edit</button>
      <div dangerouslySetInnerHTML={{__html: this.props.contentHtml }} />
    </div>;
  }
}


class ModuleActivityHTMLElement extends HTMLElement {
  attachedCallback() {
    let self = this;
    var mountPoint = document.createElement('div');
    this.createShadowRoot().appendChild(mountPoint);
    ReactDOM.render(<ModuleActivity contentHtml={self.innerHTML}/>, mountPoint);
  }
}

Answer 4

It took me a good 4 hours to figure it all out.

To properly set up the TinyMCE editor with custom elements, you need to initialize it like this:

{
...
    extended_valid_elements : 'module-activity',
    custom_elements : 'module-activity',
    init_instance_callback: function(editor) {
        registerCustomWebComponents(tinymce.activeEditor.dom.doc);
    },
...
}

The function registerCustomWebComponents should be defined as follows:

function registerCustomWebComponents(doc) {
  doc.registerElement('module-activity', ModuleActivityHTMLElement);  
}

I found it best to define the custom HTML element and React component separately rather than constructing the HTML as a string.

class ModuleActivity extends React.Component {
  constructor(props) {
    super(props);
    this.openActivityEdit = this.openActivityEdit.bind(this);
  }

  openActivityEdit() {

  }

  render() {
    return <div>
      <h3>Module Activity</h3>
      <button onClick={this.openActivityEdit}>Edit</button>
      <div dangerouslySetInnerHTML={{__html: this.props.contentHtml }} />
    </div>;
  }
}


class ModuleActivityHTMLElement extends HTMLElement {
  attachedCallback() {
    let self = this;
    var mountPoint = document.createElement('div');
    this.createShadowRoot().appendChild(mountPoint);
    ReactDOM.render(<ModuleActivity contentHtml={self.innerHTML}/>, mountPoint);
  }
}

Answer 5

Answer №3

Avoid using tinymce in polymer as it heavily relies on the document root, which can be broken by shadow dom.

However, there is a solution...

Utilize an object in your polymer template to load tinymce and resolve the document root issue. Once loaded, you can access tinymce from the object in the following manner.

Create an HTML file to load tinymce

<!DOCTYPE html>
<html>

<head>
    <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>

    <style>
        html { height: 96%; }
        body { height: 96%; }
    </style>
</head>

<body>
    <textarea>Loading...</textarea>
    <script>
        var ta = document.querySelector('textarea');
        ta.tinymce = tinymce;
        var editorChangeHandler;
        tinymce.init({ selector: 'textarea', height: document.body.scrollHeight - 100, setup: function (editor) {
            editor.on('Paste Change input Undo Redo', function () {
                if (editorChangeHandler) { clearTimeout(editorChangeHandler); }
                editorChangeHandler = setTimeout(function () {
                    ta.dispatchEvent(new CustomEvent('save'));
                }, 2000);
            });
        } });
    </script>
</body>

</html>

Add an object to your component template and use the data attribute of the object to load the HTML content.

Once loaded, access the object, query the DOM, retrieve the textarea, add event listeners for custom save events, pre-set content, adjust height, etc. Be cautious about cross-domain issues, although serving alongside other components should work fine.

Include the object in your component template

<object id="editor" type="text/html" data="/src/lib/tinymce/tinymce.html"></object>

Pre-load, retrieve content, set height, and handle save events

ready() {
    super.ready();

    // wait five seconds before capturing input
    var interval = setInterval(() => {
        if (!this.$.editor.contentDocument.body) return;
        let ta = this.$.editor.contentDocument.body.querySelector('textarea');
        if (!ta || !ta.tinymce || !ta.tinymce.activeEditor) return;

        // clear interval once loaded
        window.clearInterval(interval);

        setTimeout(() => {
            // resize on window change
            window.addEventListener('resize', this._updateEditorSize.bind(this));

            // pre-load content
            ta.tinymce.activeEditor.setContent(this.element.value);

            // listen for save events every few seconds, with a 4-second debounce on save naturally
            ta.addEventListener('save', (ev) => {
                this.set('element.value', ta.tinymce.activeEditor.getContent({ format: 'raw' }));
            });
        }, 250);
    }, 250);
}

This approach works smoothly for polymer 3 and tinymce, providing fast loading, auto-resizing, and efficient handling of save events without altering tinymce's default setup. You can apply a similar method to circumvent shadow dom limitations in other embedded applications.

Answer 6

Avoid using tinymce in polymer as it heavily relies on the document root, which can be broken by shadow dom.

However, there is a solution...

Utilize an object in your polymer template to load tinymce and resolve the document root issue. Once loaded, you can access tinymce from the object in the following manner.

Create an HTML file to load tinymce

<!DOCTYPE html>
<html>

<head>
    <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>

    <style>
        html { height: 96%; }
        body { height: 96%; }
    </style>
</head>

<body>
    <textarea>Loading...</textarea>
    <script>
        var ta = document.querySelector('textarea');
        ta.tinymce = tinymce;
        var editorChangeHandler;
        tinymce.init({ selector: 'textarea', height: document.body.scrollHeight - 100, setup: function (editor) {
            editor.on('Paste Change input Undo Redo', function () {
                if (editorChangeHandler) { clearTimeout(editorChangeHandler); }
                editorChangeHandler = setTimeout(function () {
                    ta.dispatchEvent(new CustomEvent('save'));
                }, 2000);
            });
        } });
    </script>
</body>

</html>

Add an object to your component template and use the data attribute of the object to load the HTML content.

Once loaded, access the object, query the DOM, retrieve the textarea, add event listeners for custom save events, pre-set content, adjust height, etc. Be cautious about cross-domain issues, although serving alongside other components should work fine.

Include the object in your component template

<object id="editor" type="text/html" data="/src/lib/tinymce/tinymce.html"></object>

Pre-load, retrieve content, set height, and handle save events

ready() {
    super.ready();

    // wait five seconds before capturing input
    var interval = setInterval(() => {
        if (!this.$.editor.contentDocument.body) return;
        let ta = this.$.editor.contentDocument.body.querySelector('textarea');
        if (!ta || !ta.tinymce || !ta.tinymce.activeEditor) return;

        // clear interval once loaded
        window.clearInterval(interval);

        setTimeout(() => {
            // resize on window change
            window.addEventListener('resize', this._updateEditorSize.bind(this));

            // pre-load content
            ta.tinymce.activeEditor.setContent(this.element.value);

            // listen for save events every few seconds, with a 4-second debounce on save naturally
            ta.addEventListener('save', (ev) => {
                this.set('element.value', ta.tinymce.activeEditor.getContent({ format: 'raw' }));
            });
        }, 250);
    }, 250);
}

This approach works smoothly for polymer 3 and tinymce, providing fast loading, auto-resizing, and efficient handling of save events without altering tinymce's default setup. You can apply a similar method to circumvent shadow dom limitations in other embedded applications.

Is it possible to integrate Polymer elements/WebComponents into TinyMCE?

Answer №1

Answer №2

Answer №3

Similar questions

Using JavaScript to implement Gzip compression

Utilize AngularJS to inject a service into a module without assigning it to a variable, enabling easier minification

Encountering the error message "Uncaught TypeError: $.ajax is undefined"

How to modify a variable in the Config.json using a Discord.js command

Utilizing ProtractorJS to Extract Numbers from Text within an Element and Dynamically Adding it to an Xpath Expression

Uncovering the Image Orientation in Angular: Is it Possible to Determine the Direction Post-view or Upon Retrieval from Database?

What is the maximum size limit for a MongoDB array when using $addToSet?

A Foolproof Method to Dynamically Toggle HTML Checkbox in ASP.NET Using JavaScript

Alert: Using Angularfire SDK could result in console log issues

Tips for patiently waiting for a series of asynchronous calls to successfully complete

Utilizing JavaScript to adjust the width of an HTML element

Challenge with URL paths in ReactJS

The renderToString function in Material UI's sx property doesn't seem to have

I am looking to implement a post request feature in JavaScript and HTML that is similar to the functionality in my Python code

How can I set a background image to automatically adjust to the width of the window, be full height, allow for vertical scrolling, and

Display a modal popup form in ReactJS when a particular key is pressed

Injecting data into a Q promise

Is it possible to determine which child element is currently in view within a scrollable parent div?

Explanation of Default Export in TypeScript

Deliver a universal Angular application using NodeJS and ExpressJS for the server-side functionality