<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!
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!
if anyone should have a change of helping you, we need to see your code?
he means chance ;) what version of concrete5 are you using also
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
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!
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"},
Viewing 15 lines of 34 lines. View entire code block.
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!
So guys can anyone help then??
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:
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'}
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
Thanks
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
Jon
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
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!
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"},
Viewing 15 lines of 35 lines. View entire code block.
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!
