javascript - TinyMCE 如何在不被包围的情况下插入 html 元素标签

Question

我正在 TinyMCE 上制作一个自定义按钮。

我希望能够插入一个输入标签，然后获取用于处理的innerHTML ：

 tinymce.activeEditor.selection.getNode()

按照文档，我也尝试过getStart（），getEnd()但我得到的只是 P 标签，我想要输入标签。

html:

<textarea id="custom-toolbar-button">
 </textarea> 

js：

function create_input(type, _class,){
  return '<input type="' + type + '" class="' + _class +  '" id="' + String(Math.random()) +'" >';
}

tinymce.init({
  selector: 'textarea#custom-toolbar-button',
  height: 500,
  toolbar: false,
  menubar: ' example ',
  menu: {
    example : { title: 'example ', items: ' mtf-campo ' }
  },
  setup: function (editor) {
    var toggleState = false;
 
    
    editor.ui.registry.addMenuItem('mtf-campo', {
      text: 'insert',
      onAction: function () {
        editor.insertContent(create_input('text', 'mtf-input'));
      }
    }); 
     
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});

结果代码总是<p> <input> </p>

这是片段：https ://codepen.io/ggaston095uy/pen/KKNbYGq

标签： javascriptjquerytinymce