<span> classes not working inside a <p> - span not added

Permalink
Hi guys,

I have a custom tinymce setup in my window and im trying to define style on a word in a paragraph. The usual behaviour is for tinymce to add a <span> tag around the word, however at present it seems to be adding the class directly into the <p> tag meaning it's changing the whole paragraph.

Does anyone know a fix.. also while i'm asking, is there a way i can stop tinymce from adding <p> tags around images when they are added via tinymce.

Thanks!

View Replies: View Best Answer
pixel8 replied on at Permalink Reply
pixel8
if anyone should have a change of helping you, we need to see your code?
Mnkras replied on at Permalink Reply
Mnkras
he means chance ;) what version of concrete5 are you using also
richardacherki replied on at Permalink Reply
Hi guys,

Apologies for the slow response, i've been away. I'm using the most current version of concrete 5.4.1 available, i currently have the following pasted in my custom scheme for the tinymce editor

theme : "concrete", 
fix_table_elements : true, //Moves tables out of other block elements, like paragraphs. Splits containing element into two block elements.
extended_valid_elements : "div[class|id],table[class|id|summary],tr[class|id|valign],th[class|id|align|scope|abbr|colspan|rowspan],td[class|id|align|abbr|colspan|rowspan]",
plugins: "paste,searchreplace,inlinepopups,spellchecker,safari,advlink,table,layer,insertdatetime",
editor_selector : "ccm-advanced-editor",
spellchecker_languages : "+English=en",   
theme_concrete_buttons1 : "pasteword,cut,copy,paste,|,undo,redo,|,search,replace,|,formatselect,styleselect,|,charmap,removeformat,cleanup,help,code,|,link,unlink",
theme_concrete_buttons2 : "bold,italic,|,justifyleft,justifycenter,justifyright,hr,|,bullist,numlist,blockquote,image,anchor,|,table,cell_props,delete_row,delete_col,col_after,col_before,row_after,row_before,|,insertdate,inserttime",
theme_concrete_blockformats : "p,h1,h2,h3,h4,blockquote",
theme_concrete_toolbar_align : "left",
style_formats: [
   {title:"Grey Main Text", selector:"p", classes:"grey"},   
   {title:"Red Text_bold", selector:"p", classes:"redbold"},
   {title:"Red Text", selector:"p,a", classes:"rednormal"},
   {title:"Yellow Text", selector:"p", classes:"yellow"},


I noticed that if i select a word in a sentence and try to assign it a setting from the above styles it simply applies it to the whole paragraph meaning i can't highlight specific words. Any ideas? Also I'd essentially like to place images without them being surrounded by <p> tags although this does not seem possible.

Any help would be greatly appreciated!
richardacherki replied on at Permalink Reply
So guys can anyone help then??
jbx replied on at Permalink Reply
jbx
http://tinymce.moxiecode.com/examples/example_24.php

Check the source code there. Basically, if you want a style to apply to an inline element, you can put something like this in your style_formats:
{title : 'Style name', inline : 'span', classes : 'inlineStyle'}
richardacherki replied on at Permalink Reply
Thanks JBX that's sorted the problem out, i've had a look at the source code from the other tinymce examples but i still can't seem to find a way to stop images being wrapped in the <p> tag, it's breaking my layout a bit, do you have any idea on a solution for this?


Thanks
jbx replied on at Permalink Reply
jbx
You may need to process these out using php. Not certain. All I know is I recall reading long threads where people were complaining about TinyMCE placing <p> tags all over the place and getting nowhere. TinyMCE are convinced that this is the way to go, so you may be stuck with them...

Jon
richardacherki replied on at Permalink Best Answer Reply
Hi guys,

Thanks for all the info i've managed to get around this problem, finally here's what i did, in the custom code for tinymce i've have
theme : "concrete", 
forced_root_block : '',
fix_table_elements : true, //Moves tables out of other block elements, like paragraphs. Splits containing element into two block elements.
extended_valid_elements : "div[class|id],table[class|id|summary],tr[class|id|valign],th[class|id|align|scope|abbr|colspan|rowspan],td[class|id|align|abbr|colspan|rowspan]",
plugins: "paste,searchreplace,inlinepopups,spellchecker,safari,advlink,table,layer,insertdatetime",
editor_selector : "ccm-advanced-editor",
spellchecker_languages : "+English=en",   
theme_concrete_buttons1 : "pasteword,cut,copy,paste,|,undo,redo,|,search,replace,|,formatselect,styleselect,|,charmap,removeformat,cleanup,help,code,|,link,unlink",
theme_concrete_buttons2 : "bold,italic,|,justifyleft,justifycenter,justifyright,hr,|,bullist,numlist,blockquote,image,anchor,|,table,cell_props,delete_row,delete_col,col_after,col_before,row_after,row_before,|,insertdate,inserttime",
theme_concrete_blockformats : "p,h1,h2,h3,h4,blockquote",
theme_concrete_toolbar_align : "left",
style_formats: [
   {title:"Grey Main Text", selector:"p", classes:"grey"},   
   {title:"Red Text bold", selector:"p", inline:"span", classes:"redbold"},
   {title:"Red Text", selector:"p,a", inline:"span", classes:"rednormal"},


The root_block code tells tinymce not to auto assign block items <p> tags off the bat.

Now when i insert an image i select the image and select format from the "Format" menu i also assign the css class relevant to the image from the "styles" menu, now looking at the html code the <p> tags are not visible and the image follows the css rules properly.

This might take some fiddling but it does work as long as the image does not have a format assigned. Try it let me know if it works!