在一个宁静的周三晚上，决定为TinyMCE编辑器编写一个插件，以支持自定义HTML元素的插入。TinyMCE是一个非常流行的富文本编辑器，它允许开发者通过插件来扩展其功能。在这个例子中，将添加对var元素的支持。
首先，需要定义一个JavaScript函数，用于检查父元素中是否包含特定的元素。这个函数将遍历父元素数组，并检查每个元素的nodeName是否与想要的元素名称相匹配。如果找到匹配的元素，函数将返回true，否则返回false。
function checkParentsContainingElement(parents, element) {
for (var i in parents) {
if (parents[i].nodeName == element) {
return true;
}
}
return false;
}
接下来，定义一个自执行的匿名函数，用于创建TinyMCE插件。在这个函数中，首先创建一个新的TinyMCE插件对象，并为其指定init方法。init方法将在编辑器初始化时被调用，可以在这里注册自定义的格式、命令和按钮。
(function() {
tinymce.create('tinymce.plugins.additional_formatsPlugin', {
init: function(editor, url) {
editor.on('init', function(args) {
console.log('Editor was clicked', args);
// Register Formats
args.target.formatter.register('var', {
inline: 'var',
toggle: true,
});
// Register Commands
editor.addCommand('mceCodeElement', function() { editor.formatter.toggle('code'); });
editor.addCommand('mceVarElement', function() { editor.formatter.toggle('var'); });
// Register Buttons
editor.addButton('codeElement', {
title: 'Code',
cmd: 'mceCodeElement',
image: url + '/img/codeElement.png',
onPostRender: function() {
var ctrl = this;
editor.on('NodeChange', function(e) {
ctrl.active(checkParentsContainingElement(e.parents, 'CODE'));
});
}
});
editor.addButton('varElement', {
title: 'Var',
cmd: 'mceVarElement',
image: url + '/img/varElement.png',
onPostRender: function() {
var ctrl = this;
editor.on('NodeChange', function(e) {
ctrl.active(checkParentsContainingElement(e.parents, 'VAR'));
});
}
});
},
getInfo: function() {
return {
longname: 'Additional Formats plug-in',
author: 'Thomas Maierhofer',
authorurl: '',
infourl: '',
version: tinymce.majorVersion + "." + tinymce.minorVersion
};
}
}
});
// Register plug-in
tinymce.PluginManager.add('additional_formats', tinymce.plugins.additional_formatsPlugin);
})();
在这段代码中，首先注册了var格式，然后添加了两个命令：mceCodeElement和mceVarElement，分别用于切换code和var格式。接着，添加了两个按钮：codeElement和varElement，分别用于插入code和var元素。当编辑器的节点发生变化时，按钮的激活状态会根据父元素中是否包含相应的元素来更新。
最后，定义了getInfo方法，用于返回插件的元信息，如作者、版本等。