TinyMCE4，锚元素在所见即所得模式下不可见

如何解决TinyMCE4，锚元素在所见即所得模式下不可见

我使用 TinyMCE4 并尝试创建“自定义锚点按钮”，我的代码如下：

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

当用户使用按钮时，在源代码中创建此 html：

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

效果很好。当用户使用此按钮时，会创建锚元素，并且在 WYSIWYG 模式下是该元素的默认锚图标。所以，用户可以将锚点拖到另一个地方，删除它，或者其他...

但是有一个问题。当用户切换到编辑源代码并返回时，该锚点图标被破坏，在所见即所得中不再可见（但锚点仍在代码中）。

同样的问题是，当我从数据库加载存储的 html 时，在 WYSIWYG 模式下，锚点被忽略。或者同样的，当我在“源代码模式”下手动编写代码时。

怎么了？谁能帮我？谢谢。