WordPress.org

Ready to get started?Download WordPress

Forums

Can't add custom element in Text mode in TinyMCE editor in WordPress (1 post)

  1. moroshko
    Member
    Posted 1 year ago #

    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.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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags