TinyMCE Forum / <pre> Not working as expected

intGod · 2005-06-17 13:37:19

I've got a problem with using <pre> tags in tinyMCE. When I copy and paste text into the editor (from Notepad), the text gets mangled. I lose the enters, the spaces etc.

It's annoying because you would expect code between <pre> tags to not get formatted. It's the whole point of the <pre> tag.

I've also tried entering the text directly into the HTML view, but that didn't work either. My spaces got converted to   and I lost the carriage returns.

Is there a workaround? Or is it a feature?

Edit: Preformat: true seems to yield some result. But still, if I hit enter within a <pre> block, I get two free lines, instead of just one. Also, tabs get stripped . When entering the text directly into the HTML window, all code gets mangled, tabs get removed and carriage returns too.

speednet · 2005-06-18 17:00:56

Is the < pre> tag in your extended_valid_elements?

apeiro · 2007-11-05 19:07:32

*bump*

Same problem here. I see this type of post multiple times on this forum, yet it's never answered/solved. Does anyone know how to keep TinyMCE from touching the text inside a <pre> tag?

Thank you.

apeiro · 2007-11-05 19:52:50

Setting "preformatted : true" does not work as I had hoped -- all it seems to do is wrap the entire content in a <pre> tag.

Setting "apply_source_formatting : false" makes TinyMCE preserve my whitespace, but now I don't have nicely-formatted HTML, so jumping into the 'html' editor box is a no-go (too messy).

I guess I can't have my cake and eat it too, huh? Any other tips?

apeiro · 2007-11-05 20:19:49

Well, I couldn't fix with configuration changes, but I can fix it in the TinyMCE code.

In tiny_mce_src.js, line 5055:

Code:

h = h.replace(new RegExp('\\n\\s+', 'gi'), '\n'); // Remove previous formatting

Comment that out and leading whitespace will be preserved, and you can still use "apply_source_formatting" to generate clean HTML.

HTH.

savant · 2009-01-28 23:56:59

Wow.... this STILL hasn't been fixed or responded to? I have this issue too --- and a few others that I've posted about and seen no response either. I wonder... will anyone respond here?

As far as my specific problem ... I just put in a bunch of text, selected it, chose preformatted in my format select. TinyMCE SPLIT all my text on newlines / br's and wrapped each in its own <pre> tag. I was trying to use it for code samples (since in yet another post I mentioned SAMP, CODE, and XMP won't work either). I dunno about you, but having my code broken into hundreds of seperated lines is not the intended result. Not to mention the OTHER problem where TinyMCE likes to insert a new line after the content inside a <pre> block so after you edit & save 10 times, you're code block has 10 extra lines. Yuck.

I know I'm not the only one here that cares about this, and I also know I can fix it if someone would just point me in the right direction .... AND I also know my employer would want me to give that fix back to TinyMCE, so I really don't understand why I'm getting /no/ responses at all?

Btw --- my config *(again!):

<script type="text/javascript">
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "rte",
theme : "advanced",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
content_css : "/css/cd_editor.v01072009.css",
entity_encoding : "named",
template_external_list_url : "js/template_list.js",
external_link_list_url : "js/link_list.js",
external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media.js",
spellchecker_languages : "+English=en",
spellchecker_rpc_url : "/js/tiny_mce/plugins/spellchecker/rpc.php",
theme_advanced_fonts : "Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;Georgia=georgia;Palatino Linotype=palatino;Trebuchet MS=trebuchet ms,geneva;Times New Roman=times new roman,times;Verdana=verdana,geneva",
valid_elements : "*[*]",
extended_valid_elements : "code,xmp,samp",
remove_linebreaks : false,
cleanup_callback : "CD.tinyMceCleanupCallback",
save_callback : "CD.tinyMceSaveCallback",
indent_mode : "simple",
table_inline_editing : true,
inlinepopups_skin : "cd",
theme_advanced_blockformats : "p,h1,h2,h3,blockquote,pre",
plugins : (isSafari ? "safari," : "") + "spellchecker,pagebreak,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,preview,media,searchreplace,print,contextmenu,paste,fullscreen,nonbreaking,xhtmlxtras,template,cddatetime,cdnewpage,cdattach,cdappblock,cdlink,advlink,cdwm,cdautosave",
theme_advanced_buttons1 : "cddatetime,cdnewpage,cdattach,cdappblock,cdlink,advlink,|,formatselect,fontselect,fontsizeselect,bold,italic,underline,strikethrough,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,numlist,bullist,outdent,indent,|,hr,table,spellchecker,|,fullscreen,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : ""});
</script>

MC Guys, we love tinyMCE here and want to help, but if noone responds, its REALLY difficult.

savant · 2009-01-30 18:45:48

Well, I have a sort-of solution... it seems to work for the most part. Check it out in this thread

meecect · 2009-12-02 00:38:17

I know this thread is old, but you might want to check out the preelementfix plugin. It may address some of your issues:

http://sourceforge.net/tracker/index.ph … tid=738747

mark_mceuser · 2010-05-10 07:34:49

I have preformatted text which isn't HTML. Since I want to just use the search and replace parts of tinymce to allow people to edit a lot of stuff quickly it should be relatively simple to do... or so I thought. From reading the forum for a few hours chasing down threads on this it seems apparent it's only been designed to tweak [X]HTML code, not normal text. I don't know if the authors want to do just text, below is how I get it to do that nicely.

Here's my tinymce_config.js:

tinyMCE.init({
mode : "none",
theme : "advanced",
plugins : "searchreplace,media",
theme_advanced_layout_manager : "SimpleLayout",
theme_advanced_buttons1 : "search,replace,undo,redo",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_disable : "bold,italic,underline,zoom,preview,sub,sup,seperator,charmap",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "none",
content_css : "/atcweb/js/atc_tinymce_css.css",
convert_newlines_to_brs : true,
element_format : 'text',
entity_encoding : 'raw',
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : '',
inline_styles : false,
nowrap : false,
remove_linebreaks : false,
remove_redundant_brs : false,
remove_trailing_nbsp : false,
preformatted : true,
verify_html : false
});

function toggle_editor(area_id) {
var area_element = new tinymce.dom.Element(area_id);
var action_description = area_id + "_toggle";
if (!tinyMCE.get(area_id)) {
tinyMCE.execCommand('mceAddControl',false, area_id);
document.getElementById(action_description).innerHTML = 'Save';
} else {
tinyMCE.execCommand('mceRemoveControl',false, area_id);
document.getElementById(action_description).innerHTML = 'Edit';
}
}

I had to edit the tiny_mce.js javascript in the editor save() function to stop it adding '<BR>' to the end of every line when I toggle out of the editor back to the normal TEXTAREA. Here's a diff:

host:/atcweb/js/tinymce/jscripts/tiny_mce me% diff tiny_mce.js tiny_mce_src.js
10195c10195
< var t = this, e = t.getElement(), h, f, s;
---
> var t = this, e = t.getElement(), h, f;
10201d10200
< s = t.settings;
10212,10213d10210
< if (s.preformatted)
< o.content = o.content.replace(/(<br>|<br \/>)/g, '\r\n');

And this is the HTML code from the web page to use it all:

[...]
<SCRIPT TYPE="text/javascript" src="/atcweb/js/tinymce/jscripts/tiny_mce/tiny_mce.js"></SCRIPT>
<SCRIPT TYPE="text/javascript" src="/atcweb/js/atc_tinymce_config.js"></SCRIPT>
[...]

[...]
<A HREF="javascript:void();" onclick="toggle_editor('ethers');">
<FONT ID="ethers_toggle" NAME="ethers_toggle" CLASS="tinywhite">Edit</FONT>
</A><BR>
<TEXTAREA CLASS="blacktextarea" ID="ethers" NAME="ethers" COLS=20 ROWS=2>00:21:28:22:EE:46
</TEXTAREA><BR>
[...]

The net effect is my TEXTAREAs come up normally when the page loads. If someone presses the Edit link then the javascript on that toggles on the editor and then they can edit (same as in the TEXTAREA) as well as search+replace and whatever other plugins I want. Since it's straight text I don't want the font altering stuff etc. Then when they click the Save link (the toggle_editor() function alters the Edit to be a Save) the editor is exited and the TEXTAREA now has the new text. It's what I need it to do, but yeah it required a minor code change to the tiny_mce.js script.

I'd like to see the next release of TinyMCE with this bit of code in it, either with that s.preformatted check or possibly another variable like s.br_to_newline_on_exit. Whatever works best. Then I wouldn't have to tweak the code each time to update TinyMCE to a new version

ta,
Mark.

Last edited by mark_mceuser (2010-05-10 07:49:12)

Felix Riesterer · 2010-05-10 22:26:02

mark_mceuser wrote:
I have preformatted text which isn't HTML. Since I want to just use the search and replace parts of tinymce to allow people to edit a lot of stuff quickly it should be relatively simple to do... or so I thought.

So TinyMCE would seem to be the wrong tool for your needs. What you need is a kind of text editor. There has been an interesting approach based on TinyMCE's code. Search this forum for EditArea and you might find what you really need.

mark_mceuser · 2010-05-11 00:34:40

Thanks for the pointers. I'll think about using those plugins though at the moment I'm happy with the TinyMCE setup as it stands. It's not programming code that I want to edit but I am considering if the keyword highlighting is something I want. The full screen button might be useful too.

FYI I switched to editing a DIV instead of the TEXTAREA and put direct loading and saving to the web server using XMLHttpRequest calls. That gives me maximum flexibility and possibly server side version control as each DIV on the web page is edited. I'd rather put effort into working on that side of things right now

Thanks.

Wombat_AU · 2010-06-01 01:03:41

To savant and others with similar need.

"...trying to use it for code samples..."

Aware tM parses the html code as set up (or not) during init I simply created my own plugin from the example plugin. The popup displays it's own textarea for input (or pasting). Primarily what one needs to do is replace all < and > with < and > so tM will leave it all alone when submitted.

The plugin I produced has its own button image and language pack and also the hacked example JS encloses the final output in a coloured DIV to highlight the code sample, plus it offers a choice of <pre> or <code> wrapping.

How your plugin handles multiple spaces is up to yourself but it should conform to what tM is already setup to do so the muli spaces will not be changed (if that's what you want).

Give it a try. Regards.

#1 2005-06-17 13:37:19

<pre> Not working as expected

#2 2005-06-18 17:00:56

Re: <pre> Not working as expected

#3 2007-11-05 19:07:32

Re: <pre> Not working as expected

#4 2007-11-05 19:52:50

Re: <pre> Not working as expected

#5 2007-11-05 20:19:49

Re: <pre> Not working as expected

Code:

#6 2009-01-28 23:56:59

Re: <pre> Not working as expected

#7 2009-01-30 18:45:48

Re: <pre> Not working as expected

#8 2009-12-02 00:38:17

Re: <pre> Not working as expected

#9 2010-05-10 07:34:49

Re: <pre> Not working as expected

#10 2010-05-10 22:26:02

Re: <pre> Not working as expected

mark_mceuser wrote:

#11 2010-05-11 00:34:40

Re: <pre> Not working as expected

#12 2010-06-01 01:03:41

Re: <pre> Not working as expected

Board footer