我想在 WordPress 的 TinyMCE 编辑器中添加一个自定义元素。
在可视模式下,它应该如下所示:
在文本模式下,它应该是:<!-- example -->
该元素被插入到页面内容中,如下所示:
tinyMCE.execCommand('insertElement', false) # 'insertElement' is defined below
当此代码在可视模式下运行时,图像被正确插入。
但是,在文本模式下运行此代码不会产生任何结果(<!-- 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