(Tinymce) Line breaks get stripped off in firefox while using getContent{format:text} - tinymce

I was trying to type the few lines in firefox and expect to use getContent{format: text} to only fetch the content.
Here is the content: (I have three lines and each start with the leftmost postion)
"text me if
there is
a chance"
It works in chrome that it gives the following format when running getContent.
...
<body>
text me if
there is
a chance
</body>
...
However in firefox I got:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
text me ifthere isa chance
</body>
</html>
It seems to strip off the line break. Could someone help on this?

In TinyMCE 4+ there is no option to disable stripping off line breaks. For me a littly dirty hack worked - just replace line breaks with <br> tags before initializing TinyMCE:
//imagine that your textarea is called textarea#message
var a = $("textarea#message").val();
a = a.replace(/\n/g, '<br />');
$("textarea#message").val(a);
If you need afterwards text without <br> but with line breaks, just apply the same transformation vise versa:
var a = $("textarea#message").val();
a = a.replace(/<br\s*[\/]?>/gi, "\n");
$("textarea#message").val(a);

Maybe a bit late to the party, but it just happened to me to walk into the same problem. It seems firefox has some issues with linebreaks in text that gets inserted into a textarea. My solution was something like this:
var text = text.replace("\r\n", "\\r\\n");
I guess FireFox is just a great fan of Slash(es)...
For the full solution I used the following code, which does not use the format: text, but format: html which get parsed by the DOMParser first:
var text = editor.getContent({ format: 'html' });
var doc = new DOMParser().parseFromString(text, 'text/html');
text = doc.body.textContent.replace("\r\n", "\\r\\n");
In case you still want to have tags within the code to display aswell as the link as the text within the tag add this line before the DOMParser:
text = text.replace(/<a.*href="(.*?)".*>(.*?)<\/a>/gi, ' $2: $1 ');
Which will change:
Go to some page
to this:
Go to some page: //some.link
Cheers!

To make sure things like this don't happen you should use a <br> tag instead of a regular line brea (ctrl+return). This is the default procedure in html code.

I got around it by using DOMParser().
tinymceContextValue = tinymce.get('abstract1').getContent({format: 'html'});
var doc = new DOMParser().parseFromString(tinymceContextValue ,'text/html');
tinymceContextValue = doc.body.textContent;
In this case, we could still preserve the line break. But be noted that do not change the tinymce configuration to enable . It will not work with it.

Related

Tinymce editor stripping the script tag in edit mode

I have an tinymce editor in admin area where I want to use script tag. With using follows, I am able to use tag and save it. After that I can see it in database as saved. But the problem is that when I edit the same page again and the editor preloaded with content then it stripped the tag somehow. So I can not see it and edit it again.
valid_children : '+body[style],+body[script]',
extended_valid_elements : '*[*]',
So please let me know if there is any way I can stop these script tag stripping off. I have tried to consol log the editor.getContent() but it also show content without tag whereas I can see it in DB and frontend source.
Thanks
You are likely getting tripped up by trying to load the closing script tag as part of a string in JavaScript itself.
If you have a closing script (</script>) tag in a JavaScript string the interpreter is likely interpreting that as the closing of your script block and not part of the content in the string. In many cases this will simply break the page's JavaScript completely.
Here is an example in TinyMCE Fiddle that shows the correct way to pass a </script> tag in a string: http://fiddle.tinymce.com/Fvhaab
For example:
tinymce.editors[0].setContent(`
<p>This is NEW content in TinyMCE!</p>
<script>
var x = "test";
var y = 10;
</script>
`);
...will not work. If you use this attempt for the closing script tag you will see the editor does not appear at all as that closing script tag prematurely ends the entire section of JavaScript.
Instead you can escape the / in the closing script tag:
tinymce.editors[0].setContent(`
<p>This is NEW content in TinyMCE!</p>
<script>
var x = "test";
var y = 10;
<\/script>
`);
...and you will see that the script is loaded into TinyMCE as you would expect.

The text retrieved from the database is showing without the lines [duplicate]

I have the following variable: "hello↵↵world". (the value is coming from a textarea)
The problem is when I ask Meteor to display it with {{content}}, everything appears on the same line and the line break are not taken into account.
{{content}}
# renders
hello world
# should render
hello
world
If you're using bootstrap using the <pre> tag will come with some style that you probably don't want... If you want to avoid that you can solve this with some simple CSS:
.pre {
white-space: pre;
}
and then just wrap your content with that class:
<span class="pre">{{content}}</span>
<pre> worked fine for me until I had long lines of text. By default it disables line wrapping and long lines break the page layout or are cut off.
You could probably get around it with white-space: pre-wrap; but what I ended up doing was create a Spacebars-Helper that escapes the text first and then replaces all breaks with <br/>
UI.registerHelper('breaklines', function(text, options) {
text = s.escapeHTML(text);
text = text.replace(/(\r\n|\n|\r)/gm, '<br/>');
return new Spacebars.SafeString(text);
});
I would then use the helper in my templates in the following way:
{{breaklines title}}
escapeHTML is part of Underscore.string, a collection of string manipulation extensions that you can pull in with meteor add underscorestring:underscore.string, but any other way of escaping html should work fine as well.
Wrap with
<pre>
Any
amount of
formatting.
</pre>
One way is to create a handlebar helper:
Handlebars.registerHelper 'breaklines', (text) ->
text = text.replace /(\r\n|\n|\r)/gm, '<br>'
return text
and then to do so: (do not forget the three brackets!)
{{{breaklines content}}}
just use <br> it is enough no more troubles.

Unicde Character in Rails View causing gem rack-google-analytics to fail

I was recently attempting to do an update to my views and replace the vanilla asterisk "*" character which was meant to represent a star with the unicode black star "★" (U+2605, "&#x2605"; "&#9733"; 0xE2 0x98 0x85 (e29885)). Everything seemed to work great as I added the character into a string in the appropriate views. One of such views is shown below.
_recent_updates.html.haml
%table.tablesorter#home
%thead
%tr#header
%th#year Year
%th#name Player Name
%th#position Position
%th#school School
%th#stars Stars
%tbody
- #recent_commits.each do |rc|
%tr{:class => cycle("odd", "even")}
%td#class= rc.player.year
%td#name= link_to display_name(rc.player), player_path(rc.player.slug)
%td#position= Position.find(rc.player.position_id).abbr if rc.player.position_id
%td#school= link_to rc.school.name, school_path(rc.school.slug)
%td#stars= "#{display_star(rc.player.vc_star_rating)}★"
I released the update and went along with my business. A couple of days later, I checked Google Analytics to see how traffic was going to the site, and I noticed a precipitous drop to nearly zero. I did some checking as I knew there was a great deal of traffic to the site during this time period, and realized that there was something wrong with my google analytics code. When I looked at the source code for the page in production, here is what I saw.
<--! ...My Page Contents -->
<script type="text/javascript">
if (typeof gaJsHost == 'undefined') {
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-XXXXXXXX-1");
pageTracker._trackPageview();
} catch(err) {}</scr
It appears that the extra bytes consumed by the unicode character were unaccounted for so that they effectively ate the bottom of my page, causing it to end abruptly. What I should have seen was that script tag should have been ended, as well as the end of the body and html tags like so.
<--! ... My Page Contents -->
<script type="text/javascript">
if (typeof gaJsHost == 'undefined') {
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-XXXXXXXX-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
I reverted to the previous change from git (the replacement of asterisks with stars was the only change in the commit in question), and my Google Analytics Tracking Code works fine again, and my script, body and html tags all have their proper closing tags.
My question is two fold.
How do I add the star character back into my view without eating up the end of my code?
I thought UTF-8 was supported out of the box in Rails 3.1, so why is this happening?
I have not seen this issue with Google Analytics in particular, but in general you will get errors if your Rails source files contain Unicode characters without having the
# encoding: UTF-8
line at the top. Double-check that your HAML file is actually encoded as UTF-8 and not anything weird like UTF-16 or a non-Unicode format, then add this tag to the top and see if that solves the issue. You may also try setting Haml::Template.options[:encoding] = "utf-8" in your environment.rb - afaik it should be the default, but may be overridden somewhere.
Rails 3.1 supports Unicode out of the box, but doesn't tolerate Unicode inside its code unless you ask it to. Also note that some database drivers still don't fully support Unicode.
After banging my head against the wall for a few days, and adding some variation of "encoding: UTF-8" to just about every file in my Rails app, I decided to try using the html code &#x2605. First I went to the trusty HTML2HAML converter. It told be that the html code &#x2605 converted to \★ in haml. So I tried that and got a nasty little ISE message. I tried a couple of other variations until finally I stumbled upon a solution.
I created an erb based partial _star.html.erb which I called from my _recent_updates.html.haml file specifically to render the star. Once I did that, everything cleared up and worked like a charm.
I'm still not sure what was going on with the haml, but I'm hoping someone smarter than me can figure it out.
Last line updated:
_recent_updates.html.haml
%table.tablesorter#home
%thead
%tr#header
%th#year Year
%th#name Player Name
%th#position Position
%th#school School
%th#stars Stars
%tbody
- #recent_commits.each do |rc|
%tr{:class => cycle("odd", "even")}
%td#class= rc.player.year
%td#name= link_to display_name(rc.player), player_path(rc.player.slug)
%td#position= Position.find(rc.player.position_id).abbr if rc.player.position_id
%td#school= link_to rc.school.name, school_path(rc.school.slug)
%td#stars
= render 'star', :rc => rc
My new partial
_star.html.erb
<%= "#{display_star(rc.player.vc_star_rating)}" %>★

Find and replace variable div contents

I have a php page which contains a large amount of HTML in it. One part of the HTML has a div in the following format:
<div class="reusable-block" id="xyzabcwy">there is a lot of HTML here which may be in any format</div>
Keep in mind, this div is contained within the DOM at any location however, I do know the div ID programatically.
I was originally finding this string within my database, since a record of it exists there however, the format between the data in the database record and the page are sometimes different due to whitespace but other than the white space, the strings are exactly the same. The problem is, I don't know what format the whitespace is in.
It seems it is better to write a regular expression to find this div and replace it entirely.
I could use a hand though.
Other ideas are also welcome.
Many thanks!
If you are using jQuery,
$('#xyzabcwy').html(new_data);
if not
document.getElementById('xyzabcwy').innerHTML = new_data;
otherwise, here is a PHP example.
Edit: PHP
<?php
$id = "xyzabcwy";
$html = "<div id=\"" . $id . "\">this is html</div>";
$newdata = "test";
echo preg_replace("#<div[^>]*id=\"{$id}\".*?</div>#si",$newdata,$html);
?>
 This should output
<div id="123">test</div>
Answer from: Replace a div content with PHP

Simple paragraph break

I am trying to make a simple paragraph break in my text file (name.js) so that when the iphone pulls the information (name.js) there is not one big run on paragraph. I have looked and looked and cannot find this information can you help me project is due at this time...
try something like this in the javascript:
var pageBreak = document.createElement("/p");
document.getElementsByTagName("tagToInsertBreakAfter")[0].appendChild(pageBreak);
I am away from my machine so i cannot check but try a \n or \r\n
Well it had to be one or the other it'
<br />
i just hacked a widget and tried it. By the way i am assuming you are doing some like the following
// localised strings
var backString_01 = "World Second <br />offers unbeatable exchange rates and exceptional service for foreign exchange and international payments";
then outputting to the document with
document.getElementById('services_headline').innerHTML = backString_01;
With the element in the html something like ....
<div id="services_headline" apple-part="com.apple.Dashcode.part.text" class="apple-text apple-no-children" apple-default-image-visibility="hidden" apple-text-overflow="ellipsis"></div>