So I have created a custom theme for TinyMCE using the button method on their website. Most of the buttons seem to be working, but the bullist, numlist, link, and unlink buttons do nothing. Even when switching to HTML view, the html is not even added (ie. <ul><li></li></ul>
). I have tried adding plugins for advlist, advlink, etc but no change. Can't seem to find any answers online for this one.
Here is my tinymce code:
$('textarea.htmlify').tinymce({
mode: 'textareas',
script_url : host + '/js/admin/tinymce/tiny_mce.js',
content_css: host + '/css/admin/tiny_mce.css',
language: false,
setup: function(editor) {
$('.showPreview', '#' + editor.id + '_preview').click(function(event) {
event.preventDefault();
tinyMCE.execCommand('mceAddControl', false, editor.id);
$('#'+editor.id + '_preview').css('display', 'none');
});
editor.addCommand('showHTML', function(ui, v){
tinyMCE.execCommand('mceRemoveControl', false, editor.id);
$('#'+editor.id + '_preview').css('display', 'block');
});
},
theme: function(editor, target) {
var editorContainer = $(target).after(
'<div>' +
'<div class="mce-toolbar clearfix">' +
'<button class="btn-mce-bold" data-mce-command="bold">Bold</button>' +
'<button class="btn-mce-italic" data-mce-command="italic">Italic</button>' +
'<button class="btn-mce-underline" data-mce-command="underline">Underline</button>' +
'<button class="btn-mce-strikethrough" data-mce-command="strikethrough">Strike Through</button>' +
'<button class="btn-mce-justifyleft" data-mce-command="justifyleft">Justify Left</button>' +
'<button class="btn-mce-justifycenter" data-mce-command="justifycenter">Justify Center</button>' +
'<button class="btn-mce-justifyright" data-mce-command="justifyright">Justify Right</button>' +
'<button class="btn-mce-justifyfull" data-mce-command="justifyfull">Justify Full</button>' +
'<button class="btn-mce-bullist" data-mce-command="bullist">Bullet List</button>' +
'<button class="btn-mce-numlist" data-mce-command="numlist">Number List</button>' +
'<button class="btn-mce-undo" data-mce-command="undo">Undo</button>' +
'<button class="btn-mce-redo" data-mce-command="redo">Redo</button>' +
'<button class="btn-mce-link" data-mce-command="link">Link</button>' +
'<button class="btn-mce-unlink" data-mce-command="unlink">Unlink</button>' +
'<button class="btn-mce-code" data-mce-command="showHTML">HTML</button>' +
'</div>' +
'<div class="htmlify"></div>' +
'</div>'
).next();
$('.mce-toolbar').css('width', $(target).css('offsetWidth'));
// Bind events for each button
$('button', editorContainer).click(function(event) {
event.preventDefault();
editor.execCommand(
$(this).attr('data-mce-command'),
false,
$(this).attr('data-mce-value')
);
});
// setup tabbing
$tabindex = parseInt($('#' + editor.id).attr('tabindex'));
if ($tabindex > 1) {
$('[tabindex=' + ($tabindex-1) + ']').keydown(function(event) {
var $keyCode = event.keyCode || event.which;
if ($keyCode == 9) {
event.preventDefault();
editor.execCommand('mceFocus', false, editor.id);
}
});
} else {
editor.execCommand('mceFocus', false, editor.id);
}
editor.onKeyDown.add(function(ed, event) {
var $tabindex = parseInt($('#' + ed.id).attr('tabindex'));
var $keyCode = event.keyCode || event.which;
if ($keyCode == 9) {
$tabindex++;
while(($("[tabindex='" + $tabindex + "']").length == 0 || $("[tabindex='" + $tabindex + "']:not([readonly])").length == 0) && $tabindex != 150 ){
$tabindex++;
}
if ($tabindex != 150)
$('[tabindex='+$tabindex+']').focus();
}
});
// Register state change listeners
editor.onInit.add(function(ed, event) {
$('button', editorContainer).each(function(i, button) {
editor.formatter.formatChanged($(button).data('mce-command'), function(state) {
$(button).toggleClass('btn-mce-on', state);
});
});
$('#'+ed.id+'_ifr').css('height', '100%');
});
// Return editor and iframe containers
return {
editorContainer: editorContainer[0],
iframeContainer: editorContainer.children().eq(-1),
// Calculate iframe height: target height - toolbar height
iframeHeight: $(target).height() - editorContainer.first().outerHeight()
};
}
});
Add hyperlinks to content. The toolbar button and menu item called link are included in TinyMCE's default configuration. The link menu item can be found in the Insert menu. The link plugin also includes a context menu and context toolbar.
To disable the toolbar, the toolbar option should be provided a boolean value of false .
MCE stands for Moxiecode Content Editor.
Try adding these plugins:
plugins: [
"link lists",
],
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With