无法在WordPress的TinyMCE编辑器中以文本模式添加自定义元素

Question

我想在WordPress的TinyMCE编辑器中添加一个自定义元素。

在 Visual 模式下，它应如下所示：

在文字模式下，它应为：<!-- example -->

将元素插入页面内容，如下所示：

tinyMCE.execCommand('insertElement', false)   # 'insertElement' is defined below

当此代码在 Visual 模式下运行时，图像会正确插入。

但是，在文字模式下运行此代码不会产生任何结果（<!-- example -->不会显示）。

为什么？

---

以下是TinyMCE代码本身：（CoffeeScript）

(($) ->
  tinymce.PluginManager.requireLangPack('example')

  tinymce.create 'tinymce.plugins.ExamplePlugin',
    init: (ed, url) ->
      elementHTML = '<img class="example" src="http://goo.gl/eejO0" />'

      ed.addCommand 'insertElement', ->
        ed.execCommand('mceInsertContent', false, elementHTML)

      ed.onPostProcess.add (ed, o) ->
        if o.get
          $wrapper = $('<div />').html(o.content)

          $('.example', $wrapper).each ->
            $(this).replaceWith("<!-- example -->")

          o.content = $wrapper.html()

      ed.onBeforeSetContent.add (ed, o) ->
        if o.content
          o.content = o.content.replace(/<!-- example -->/g, elementHTML)
    ,
    getInfo: ->
      longname: 'Example Plugin'
      author: 'Me'
      authorurl: 'http://mysite.com'
      infourl: 'http://mysite.com'
      version: '1.0'

  tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin)
) jQuery

Answer 1

我猜在textmode中没有真正的tinymce编辑器，但只是一个普通的textarea。

Answer 2

我不确定这是不是你要找的，但这是我的解决方案。

<h1><img alt="" src="http://static.tinymce.com/tinymce/js/4.0b2/plugins/emoticons/img/smiley-yell.gif" /></h1>
&nbsp;
<h1><img alt="" src="http://static.tinymce.com/tinymce/js/4.0b2/plugins/emoticons/img/smiley-smile.gif" data-mce-selected="1" /></h1>

希望没关系！