tinymce - TinyMCE4, anchor element is not visible in WYSIWYG mode

Question

i use TinyMCE4 and try to create "custom anchor button", my code looks like:

editor.addButton('LinkAnchor', {
                text: 'Anchor',
                icon: 'anchor',
                onclick: function() {
                    // Open window
                    editor.windowManager.open({
                        title: 'Please input anchor name',
                        body: [
                            {type: 'textbox', name: 'data_anchor', label: 'data-anchor'}
                        ],
                        onsubmit: function(e) {
                            editor.insertContent('<a name="' + e.data.data_anchor + '" data-anchor="' + e.data.data_anchor + '"  class="mce-item-anchor" href="#"></a>');
                        }
                    });
                }
            });

When user use the button, in source code is created this html:

<a href="#" name="inserted_text" data-anchor="inserted_text"></a>

It's works good. When user use this button, anchor element is created and in WYSIWYG mode is default anchor icon for this element. So, user can drag anchor to another place, delete it, or something...

But there is one problem. When user switch to edit source code and back, this anchor icon is destroyed, its no more visible in WYSIWYG (but anchor is still in code).

Same problem is, when i load stored html from database, in WYSIWYG mode anchors are ignored. Or same, when i write code manualy in "source code mode".

What is wrong? Can anyone help me? Thanks.

question from:https://stackoverflow.com/questions/66048901/tinymce4-anchor-element-is-not-visible-in-wysiwyg-mode

Answer 1

Waitting for answers