Ask your WordPress questions! Pay money and get answers fast! (more info)

Tinymce conflict in functions.php WordPress

  • SOLVED

This block of code adds buttons to mce row 3:


/* 3rd row of Buttons in Visual Editor begins ...
* see also: jQuery File in Pfad (blog name)/wordpress/wp-content/themes/twentyeleven/js/my.js
*/

class ILC_Syntax_Buttons {

function ILC_Syntax_Buttons(){
add_filter("mce_external_plugins", array(&$this, "mce_external_plugins"));
add_filter('mce_buttons_3', array(&$this, 'mce_buttons'));
}
function mce_buttons($buttons) {
array_push($buttons, "dropCap", "lineBreak", "lineSpace" );
return $buttons;
}
function mce_external_plugins($plugin_array) {
$plugin_array['ilcsyntax'] = get_bloginfo( 'template_url' ) . '/js/my.js';
return $plugin_array;
}
function tiny_mce_version($version) {
return ++$version;
}
}
add_action('init', 'ILC_Syntax_Buttons');
function ILC_Syntax_Buttons(){
global $ILC_Syntax_Buttons;
$ILC_Syntax_Buttons = new ILC_Syntax_Buttons();
}
/* 3rd row of buttons in visual editor ends */


This block of code defines how tiny mce is set up:


/* tinymce initialisation */
add_filter('tiny_mce_before_init', 'adaptive_formatTinyMCE' );

function adaptive_formatTinyMCE($in)
{
$in['remove_linebreaks']=false;
$in['gecko_spellcheck']=false;
$in['keep_styles']=true;
$in['accessibility_focus']=true;
$in['tabfocus_elements']='major-publishing-actions';
$in['media_strict']=false;
$in['paste_remove_styles']=false;
$in['paste_remove_spans']=false;
$in['paste_strip_class_attributes']='none';
$in['paste_text_use_dialog']=true;
$in['wpeditimage_disable_captions']=false;
$in['plugins']='inlinepopups,tabfocus,paste,media,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,wpfullscreen';
$in['content_css']=get_template_directory_uri() . "/editor-style.css";
$in['wpautop']=false;
$in['apply_source_formatting']=true;

return $in;
}
/* tinymce initialisation ends */


The first block works fine on its own;
when I add the second block of code, the new buttons in row 3 disappear ...

How do I get both to work at the same time?

Answers (2)

2013-04-05

Christianto answers:

Hello,

Is there any reason to remove certain mce plugin?
$in['plugins']='inlinepopups,tabfocus,paste,media,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,wpfullscreen';

the default value should be:
$in['plugins']='inlinepopups,spellchecker,tabfocus,paste,media,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,-printthis,-ilcsyntax,wpfullscreen';

I'm unable to replicate your problem, but when I try it on my wp installation with twentyeleven theme, I got undefined property/function because certain tinymce plugin above not loaded..


andrewsan comments:

Um, no - no reason for removing specific plugins ...

what I am trying hard to achieve is stability of the text entered into either of the editors (visual or html) ...

I know that swicthing betwene the two is the kiss of death for formatting,
but even when I simply save/update text, the linebreaks change/disappear and so on.

I like html: I'm comfortable typing in a <br />
and I want it to stay the way I entered it ...
:-)


Christianto comments:

You can try to delete this line of code so all default plugin will be loaded
$in['plugins']='inlinepopups,tabfocus,paste,media,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,wpfullscreen';

And you can check error on your browser console for any js error from wp-tinymce..


andrewsan comments:

I just re-loaded the first block of code (tinymce init), replacing my plugins line with your default line ...

the buttons have re-appeared :-) so many thanks for fixing that.

and the text in the html editor seems more stable, too ... even if a bit inconsistent:
for example
I start with a long text wrapped in p tags;
I insert an html break to show where I want the new line to start on the web page;
I save/update in the editor ...
the html break is still there, but the texts now wraps within the html editor ... (? huh ?)
... and there's *no* break on the web page.

... and then again, sometimes it works.
It's inconsistent. very frustrating.

Do you you know of any combinations of 'switch this off' / 'switch that on' (e.g I have wp-autop off) that will
stabilise the display of text in the editor and on the web page?



Christianto comments:

Do you mean typing <br /> tag on visual editor directly without using your linebreak/linespace tinymce function?
If we do that the tag will be encode and treated as text instead of html tag, so there is no break when viewing the page.

If only related to <br /> tag, instead of removing wpautop,
I usually create shortcode [br] so at least I know where I put the line break both visual and html view :)

for example with your code, I add this
function myline_break($atts, $content=""){
extract(shortcode_atts(array(
's' => 0,
), $atts));
if($s)
$br = '<br/><br/>';
else
$br = '<br/>';
return $br;
}
add_shortcode('br' ,'myline_break');



and change your tinymce function (my.js) slightly, so we insert shortcode instead of html break tag.
[br] means line break, while [br s=1] is line space.

(function(){

tinymce.PluginManager.requireLangPack('ilcsyntax');
tinymce.create('tinymce.plugins.ilcSyntax', {

init : function(ed, url){

// START BUTTON //
ed.addCommand('dropCap', function(){
ilc_sel_content = tinyMCE.activeEditor.selection.getContent();

/*console.log(ilc_sel_content);
var classStartTmp = ilc_sel_content.indexOf('class="');
console.log(classStartTmp);
var classEnd = ilc_sel_content.indexOf('"',classStartTmp);
console.log(classEnd);
var classStart = classStartTmp + 3;
console.log(classStart);
var classes = ilc_sel_content.substring(classStart, classEnd);
console.log(classes);*/
tinyMCE.activeEditor.selection.setContent('<span class="dropcapoutside"><span class="dropcapinside">' + ilc_sel_content + '</span></span>');

});

ed.addButton('dropCap', {
title: 'Make a Drop Capital',
image: url + '/dropcap20.png',
cmd: 'dropCap'
});
// END BUTTON //

// START BUTTON //
ed.addCommand('lineBreak', function(){
ilc_sel_content = tinyMCE.activeEditor.selection.getContent();
tinyMCE.activeEditor.selection.setContent('[br]' + ilc_sel_content + '');
});

ed.addButton('lineBreak', {
title: 'Add a Line Break',
image: url + '/linebreak20.png',
cmd: 'lineBreak'
});
// END BUTTON //

// START BUTTON //
ed.addCommand('lineSpace', function(){
ilc_sel_content = tinyMCE.activeEditor.selection.getContent();
tinyMCE.activeEditor.selection.setContent('[br s=1]' + ilc_sel_content + '');
});

ed.addButton('lineSpace', {
title: 'Add a Line Space',
image: url + '/linespace20.png',
cmd: 'lineSpace'
});
// END BUTTON //
},

createControl : function(n, cm){
return null;
},

getInfo : function(){
return {
longname: 'Shortcode Buttons',
author: '@imc',
version: "1.0"
};
}
});

tinymce.PluginManager.add('ilcsyntax', tinymce.plugins.ilcSyntax);

})();

2013-04-05

S├ębastien | French WordpressDesigner answers:

could you paste the js file please ?


andrewsan comments:

Hallo S├ębastien - and thank you for replying.

here's the js:


(function(){

tinymce.PluginManager.requireLangPack('ilcsyntax');

tinymce.create('tinymce.plugins.ilcSyntax', {

init : function(ed, url){
// START BUTTON //
ed.addCommand('dropCap', function(){
ilc_sel_content = tinyMCE.activeEditor.selection.getContent();
/*console.log(ilc_sel_content);
var classStartTmp = ilc_sel_content.indexOf('class="');
console.log(classStartTmp);
var classEnd = ilc_sel_content.indexOf('"',classStartTmp);
console.log(classEnd);
var classStart = classStartTmp + 3;
console.log(classStart);
var classes = ilc_sel_content.substring(classStart, classEnd);
console.log(classes);*/
tinyMCE.activeEditor.selection.setContent('<span class="dropcapoutside"><span class="dropcapinside">' + ilc_sel_content + '</span></span>');
});
ed.addButton('dropCap', {
title: 'Make a Drop Capital',
image: url + '/dropcap20.png',
cmd: 'dropCap'
});
// END BUTTON //

// START BUTTON //
ed.addCommand('lineBreak', function(){
ilc_sel_content = tinyMCE.activeEditor.selection.getContent();
tinyMCE.activeEditor.selection.setContent('<br />' + ilc_sel_content + '');
});
ed.addButton('lineBreak', {
title: 'Add a Line Break',
image: url + '/linebreak20.png',
cmd: 'lineBreak'
});
// END BUTTON //

// START BUTTON //
ed.addCommand('lineSpace', function(){
ilc_sel_content = tinyMCE.activeEditor.selection.getContent();
tinyMCE.activeEditor.selection.setContent('<br /><br />' + ilc_sel_content + '');
});
ed.addButton('lineSpace', {
title: 'Add a Line Space',
image: url + '/linespace20.png',
cmd: 'lineSpace'
});
// END BUTTON //

},
createControl : function(n, cm){
return null;
},
getInfo : function(){
return {
longname: 'Shortcode Buttons',
author: '@imc',
version: "1.0"
};
}
});
tinymce.PluginManager.add('ilcsyntax', tinymce.plugins.ilcSyntax);
})();