Support » Plugins » Can't add custom element in Text mode in TinyMCE editor in WordPress

  • I would like to add a custom element in the TinyMCE editor in WordPress.

    In the Visual mode it should look like this.

    In the Text mode it should be: <!-- example -->

    The element is inserted to the page content like this:

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

    When this code is run in the Visual mode, the image is inserted properly.

    However, running this code in the Text mode results in nothing (<!-- example --> doesn’t appear).

    Why is that?

    Here is the TinyMCE code itself: (CoffeeScript)

    (($) ->
          tinymce.create 'tinymce.plugins.ExamplePlugin',
            init: (ed, url) ->
              elementHTML = '<img class="example" src="" />'
              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: ''
              infourl: ''
              version: '1.0'
          tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin)
        ) jQuery
  • The topic ‘Can't add custom element in Text mode in TinyMCE editor in WordPress’ is closed to new replies.