我有一个带有几个按钮的 TinyMCE 自定义主题(粗体、斜体、删除线、左对齐、居中和右对齐、bullist、numlist、链接和取消链接)。
问题在于 numlist、bullist、link 和 unlink 按钮。这些不起作用,其他的表现正常。
我的 tinyMCE.init 看起来像这样:
tinyMCE.init({
mode: "textareas",
editor_selector: "tinymce",
language: false, // Prevents language packs from loading
theme: function(editor, target) {
var dom = tinymce.DOM, editorContainer;
// Generate UI
editorContainer = dom.insertAfter(dom.create('div', {style: 'border: 1px solid gray'},
'<div>' +
'<button class="tinybutton tinybold" data-mce-command="bold"></button>' +
'<button class="tinybutton tinyitalic" data-mce-command="italic"></button>' +
'<button class="tinybutton tinystrike" data-mce-command="strikethrough"></button>' +
'<button class="tinybutton tinybullist" data-mce-command="bullist"></button>' +
'<button class="tinybutton tinynumlist" data-mce-command="numlist"></button>' +
'<button class="tinybutton tinyleft" data-mce-command="justifyleft"></button>' +
'<button class="tinybutton tinycenter" data-mce-command="justifycenter"></button>' +
'<button class="tinybutton tinyright" data-mce-command="justifyright"></button>' +
'<button class="tinybutton tinylink" data-mce-command="link"></button>' +
'<button class="tinybutton tinyunlink" data-mce-command="unlink"></button>' +
'</div>'
), target);
// Set editor container size to target element size
dom.setStyle(editorContainer, 'width', target.offsetWidth);
// Bind events for each button
tinymce.each(dom.select('button', editorContainer), function(button) {
dom.bind(button, 'click', function(e) {
e.preventDefault();
// Execute editor command based on data parameters
editor.execCommand(
dom.getAttrib(e.target, 'data-mce-command'),
false,
dom.getAttrib(e.target, 'data-mce-value')
);
});
});
// Register state change listeners
editor.onInit.add(function() {
tinymce.each(dom.select('button', editorContainer), function(button) {
editor.formatter.formatChanged(dom.getAttrib(button, 'data-mce-command'), function(state) {
button.style.color = state ? "red" : "";
});
});
});
// Return editor and iframe containers
return {
editorContainer: editorContainer,
iframeContainer: editorContainer.lastChild,
// Calculate iframe height: target height - toolbar height
iframeHeight: target.offsetHeight - editorContainer.firstChild.offsetHeight
};
},
encoding: "xml",
setup: function (ed) {
ed.onContextMenu.add(function (ed, e) {
tinymce.activeEditor.save();
});
ed.onKeyUp.add(function (ed) {
tinymce.activeEditor.save();
});
ed.onClick.add(function (ed) {
tinymce.activeEditor.save();
});
ed.onGetContent.add(function (ed, o) {
o.content = o.content.replace(/'/g, "'");
});
//ed.onInit.add(function (ed, evt) {
// tinymce.dom.Event.add(ed.getDoc(), 'blur', function (e) {
// // Do something when the editor window is blured.
// tinymce.activeEditor.save();
// });
//});
},
width: "100%"
});
我不确定这是我应该如何处理所有按钮,或者我必须处理那些不能以其他方式工作的按钮。这是使用标准按钮的正确方法吗?
editor.execCommand(
dom.getAttrib(e.target, 'data-mce-command'),
false,
dom.getAttrib(e.target, 'data-mce-value')
);