I'm using TinyMce textarea editor and have a problem. As you probably know Tinymce transforms a standard html textarea into a rich text editor.
On our 'edit listing' page we call up some text from our db for the user to edit (previously in a standard textarea, now in the tinymce textarea.
Previously the standard textarea would preserve linebreaks and the user would get several paragraphs of text in the text area, now with tinyMCE they get a huge chunk of text with no linebreaks. (I have pasted an example of an entry in our db below - as you can see it has line breaks in it by tinymce seems to be ignoring them when it displays them in the editor).
Just to clarify my issue is now that tinymce is stripping something when I submit the form, it's that when I pull text (that contains line breaks) from the db and populate the tinymce textarea with that data (for the user to edit) in the tinymce textarea - the text appears (in the tinymce textarea) as one massive chunk of text with my paragraphs (whereas in a standard textarea it is nicely formatted with linebreaks)
Any help on how to resolve this would be greatly appreciated - do I need to use some sort of populate() type function to put the text in, or maybe I need to replace all the linebreaks with a different special character that tinyMCE will recognise as a line break and preserve?..
Thanks in advance.
Nick
example from db:
Here is line one
Here is line two
And here is line three
Which appears in tinymce as:
Here is line one Here is line two And here is line three
I faced a similar a problem, a while back and had questions just like yours. Also I finally ended up on SE just like you.
Anyway, I think I have the solution to your problem. If you are using PHP as your server side language, then you should use nl2br() PHP function.
Suppose you have stored your content fetched from the database in a php variable. Something like this:
$content = $row['content'];
Now when displaying it on to your screen, use the nl2br() function.
echo nl2br("<p>".$content."<p>");
Now, this part inside () depends on how you want to output the data. And I will leave it to you to figure that part out.
Hope this helps.
Related
I have a big text and like to highlight words that are trademarks. So within this big CDATA node I need to grab for multiple words like "ACME Soda Chips" and make them red.
currently I do something like this in a TinyMCE plugin:
// almost ...
var foo = editor.getContent();
foo.replace('ACME Soda Chips', '<span class="douh">ACME Soda Chips</span>');
editor.setContent(foo);
My problem now is, that such HTML is displayed in Text-Mode (where you see the content as plain HTML) and also submitted therefor stored to the database.
But what I like to have is:
Highlight a word in the visual mode
Do not store my surrounding span somehow
Optional: Do not show that I used a span and CSS-class to highlight things.
Hint:
I may completely do this wrong - please help.
I read some other plugins and honestly I don't understand what they do.
Imagine the whole text as one single big CDATA part but I like to highlight a specific set out of it.
My PHP generates a Word document, but it will not render carriage returns. My CKEditor translates a carriage return into either,
<br>, or <div>asdf</div>
When the Word document is created, it will display those HTML tags, so I strip them out. What replacement code, character, ascii, or tag can I use so that when the page is rendered, it shows the text like it did in the Editor?
Current example - if you have the text "Don't jump off the" [then hit Enter, so that the next word is below it]...
"cliff." Instead, currently, that gets saved into SQL as:
Don't jump off the <br>cliff.
Don't jump off the <div>cliff</div>.
...depending on which browser is used. In the msWord output, any tags left in the content [exceptions to strip_tags function] get displayed literally in msWord. Or, if I replace the tags with ASCII
it displays that literally, too. Not sure if this helps, but this is defined at the top of my php report_generator.php file:
require_once '/var/www/PhpWord/src/PhpWord/Autoloader.php';
\PhpOffice\PhpWord\Autoloader::register();
include "/var/www/ncpcphp/NCPC_PHP_Functions.php";
DEFINE("WRITEtoFDOCS", "NO");
DEFINE("FDOCSDIRECTORY", "Contract Attachments");
DEFINE("MIMETYPE","application/vnd.openxmlformats-officedocument.wordprocessingml.document" );
Help - what can I use to cause the output to show the carriage return?
Thank you, Cindy. Your answer is a piece of the solution. My CKEditor saves carriage returns as either
<br>, <br />, or <div></div>
depending on which browser is used Chrome[div] or Firefox[br] - that goes into my msSQL. Yet, if my editor has turned-on an "Enter filter" [keycode-13] in order to prevent someone from enter-editing a [[Placeholder]] (ckeditor read-onlyplugin) then saved editor text strips out the Enter. So, I did this: kept in the enter filter because it is necessary, then after the text carriage returns are saved as br's or div's, when I run my report generator, I replace
<br>, <br />, and <div></div>
with "\n" like you said. Then I explode the text variable like this:
$show_cad = explode("\n", $show_cad);
foreach($show_cad as $line) {
$section->addText(htmlspecialchars($line));
}
The code in the editor needed to filter out the Enters only when Enter is pressed in the [[Placeholder]] plug in is more complex, and I got largely from CKEditor themselves. They request that I do not post their full solutions, but if you like I could show you pieces of it. Basically, I had to register the Placeholder widget. Then when Enter is pressed, it checks if the context is with Placeholder. If so, filter the Enter [then it disappears from the saved editor text], but if Enter is pressed elsewhere, it gets saved and used properly.
Thank you for your help!
We have a SAPUI5 timeline control, where we are showing the comments coming from server.
The issue is, if the comments contain a newline \n, then the Timeline control is not able to display the text in newline. Instead, it introduces space wherever \n is present.
We have tried formatting \n to unicode character also but that also didn't worked. Timeline control aggregates TimelineItem.
The control we are using is: https://ui5.sap.com/#/api/sap.suite.ui.commons.TimelineItem
Code snippet can be found at:
https://jsbin.com/kuluyehilu/edit?html,output
I inspected your example and came up with the following solution.
Since the text is embedded in a <span>, all unnecessary whitespace will be trimmed. What you can do is telling the span (via CSS) that it should display the whitespace anyway.
If you don't have a CSS file in your project yet, create one. Then add the following lines
div.sapSuiteUiCommonsTimelineItemShellBody>span {
white-space: pre;
}
This should do the trick.
JSBin: https://jsbin.com/feladeneso/1/edit?html,output
If you inspect the rendered element, you will see it actually put in the break:
<span id="__item0-realtext">x
y</span>
...but did not convert it to a <br/> tag. You cannot add the tag yourself since it will be escaped, either. Maybe you can try to override the renderer, and convert any line breaks to html breaks
I have nicEdit implemented in the backend for uploading news items, and in the frontend each newsitem has a square in front of the beginning of the text body (image attached). This only occurs in the first paragraph of the text.
Due to the paragraph tags added by nicEdit, the text is displayed on a different line than the square. I have searched in the nicEdit docs and in previously answered questions on here but could not find a solution. Is there any way to change the paragraph formatting in nicEdit to use br at the end of a paragraph instead of having it wrap the text with p tags? Or if not, to have Nicdit automatically add the square to the beginning of each text?
Thank you in advance for any help!!
http://i.stack.imgur.com/dxxtu.png
Edit: Turns out the p tags were not caused by the nicedit but by the users copy-pasting the articles. I have used this to remove formatting from pasted text, but the tags are still there (it seems to only remove font properties).
As a temporary fix I have added the square to the nicedit wysiwyg as initial text, so that it is sent to the db along with the rest of the text and inside the same paragraph.
I realized there's a line in the code you modified that specifies all the unwanted tags. You should add the paragraph there.
Search for
/* remove undwanted tags */
newSnippet = newSnippet.replace(/<(div|span|style|meta|link){1}.*?>/gi,'');
in the nicEditorInstance class, and change it to
/* remove undwanted tags */
newSnippet = newSnippet.replace(/<(div|p|span|style|meta|link){1}.*?>/gi,'');
Notice the "p" has been added. That will prevent nicEdit to wrap the paragraphs in tags.
We are using Plone 4.1.3 and the default TinyMCE editor. When we press the Enter key in TinyMCE, it produces a double line spacing instead of single line. We found a few similar questions and answers on this issue in the forum but don't know and cannot find the TinyMCE configuration file to modify to make line break into single line spacing. There is also nothing in Site Setup or ZMI to configure this for TinyMCE.
We found this the forum but it is not pertaining to plone.
Decrease the line spacing in TinyMCE textarea
Thank you very much in anticipation
cmgui
CSS. These are just paragraph elements (<p> tags). -- style them!
http://plone.293351.n2.nabble.com/TinyMCE-Plone-4-customizing-the-styles-for-own-CSS-classes-td5954678.html
As sdupton pointed out, this is indeed on purpose; enter is supposed to be a paragraph break, and behaves the same way in applications like Word. You can insert line breaks by shift-enter, but it's not encouraged to do that on the web, since text flows differently depending on font size and window size (and OS!).
If you want paragraphs to have less spacing, use CSS to reduce the margin/padding.