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-mand="bold">Bold</button>' +
'<button class="btn-mce-italic" data-mce-mand="italic">Italic</button>' +
'<button class="btn-mce-underline" data-mce-mand="underline">Underline</button>' +
'<button class="btn-mce-strikethrough" data-mce-mand="strikethrough">Strike Through</button>' +
'<button class="btn-mce-justifyleft" data-mce-mand="justifyleft">Justify Left</button>' +
'<button class="btn-mce-justifycenter" data-mce-mand="justifycenter">Justify Center</button>' +
'<button class="btn-mce-justifyright" data-mce-mand="justifyright">Justify Right</button>' +
'<button class="btn-mce-justifyfull" data-mce-mand="justifyfull">Justify Full</button>' +
'<button class="btn-mce-bullist" data-mce-mand="bullist">Bullet List</button>' +
'<button class="btn-mce-numlist" data-mce-mand="numlist">Number List</button>' +
'<button class="btn-mce-undo" data-mce-mand="undo">Undo</button>' +
'<button class="btn-mce-redo" data-mce-mand="redo">Redo</button>' +
'<button class="btn-mce-link" data-mce-mand="link">Link</button>' +
'<button class="btn-mce-unlink" data-mce-mand="unlink">Unlink</button>' +
'<button class="btn-mce-code" data-mce-mand="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-mand'),
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-mand'), 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()
};
}
});
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-mand="bold">Bold</button>' +
'<button class="btn-mce-italic" data-mce-mand="italic">Italic</button>' +
'<button class="btn-mce-underline" data-mce-mand="underline">Underline</button>' +
'<button class="btn-mce-strikethrough" data-mce-mand="strikethrough">Strike Through</button>' +
'<button class="btn-mce-justifyleft" data-mce-mand="justifyleft">Justify Left</button>' +
'<button class="btn-mce-justifycenter" data-mce-mand="justifycenter">Justify Center</button>' +
'<button class="btn-mce-justifyright" data-mce-mand="justifyright">Justify Right</button>' +
'<button class="btn-mce-justifyfull" data-mce-mand="justifyfull">Justify Full</button>' +
'<button class="btn-mce-bullist" data-mce-mand="bullist">Bullet List</button>' +
'<button class="btn-mce-numlist" data-mce-mand="numlist">Number List</button>' +
'<button class="btn-mce-undo" data-mce-mand="undo">Undo</button>' +
'<button class="btn-mce-redo" data-mce-mand="redo">Redo</button>' +
'<button class="btn-mce-link" data-mce-mand="link">Link</button>' +
'<button class="btn-mce-unlink" data-mce-mand="unlink">Unlink</button>' +
'<button class="btn-mce-code" data-mce-mand="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-mand'),
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-mand'), 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()
};
}
});
- can you create a jsfiddle ? – coding_idiot Commented Nov 5, 2013 at 6:31
- 2 I haven't found anything newer …: jennyfong.co.uk/2010/07/07/… link, unlink etc are not in the list. Use ckeditor instead - from personal experience. – user56725 Commented Nov 27, 2013 at 17:56
- Which version of tinymce are you using? 3.x or 4.x? – Don Rhummy Commented Jan 22, 2014 at 19:44
2 Answers
Reset to default 2Try adding these plugins:
plugins: [
"link lists",
],
After looking into the TinyMCE code, I've identified a possible solution. For the lists instead of using data-mce-mand="bullist" and data-mce-mand="numlist", we can use
data-mce-mand="InsertUnorderedList" and data-mce-mand="InsertOrderedList".
For the links, I used data-mce-mand="mceInsertLink" and we need a way to provide the URL/HREF to the execCommand. So as a proof of concept, I modified the bit of code that assigns all the events
$('button', editorContainer).click(function(event) {
event.preventDefault();
var value=$(this).attr('data-mce-value')
if($(this).attr('data-mce-mand')=="mceInsertLink"){
value=prompt("href") //really hacky way of getting data from user
//maybe do a modal popup with the callback that calls the execCommand below
}
editor.execCommand(
$(this).attr('data-mce-mand'),
false,
value
);
});
This will work if there is text that's already selected. I haven't tested this but perhaps, there could be a check if there is anything selected and ask for both the URL and the link text, and do a .execCommand("mceInsertRawHTML")
Example Fiddle