how to paste <pre> into tinymce and preserve the formatting? - tinymce

This seems very hard to do.
I'm pasting html code with <pre> into tinymce editor.
All the whitespaces are gone inside the <pre>
e.g. I'm trying to copy StackOverflow's <pre><code>block as in
def foo():
help me
It seems, tinymce trims whitespaces in <pre><code><span> and newlines are removed
How can I preserve it?
I'm using 3.5.3 btw

First of all you should set the entity encoding setting to raw
tinymce.init({
...
entity_encoding: "raw",
...´
But TinyMCE adds <br /> elements on line breaks if you edit your text. Here is a setup for syntay highlighting and preformatted text in NopCommerce, it is almost the same in WordPress or whatever.
TinyMCE Preformatted Text and Syntax Highlighting

Related

How to insert a new Word style into a RMarkdown file

Is there a simple way to do this using Knitr without using Pandoc? I tried adding some HTML <DIV Class="newStyle>&nbsp</div> into an .Rmd file, but the style didn't show up in the generated Word .docx.
Thanks, Sue.
My setup: Office 365 Pro Plus, RStudio 1.0.143.
I was able to get both the <div> and <span> syntax to work. First I created a new style in my reference.docx document with the same name I intended to use in the Pandoc markup tags. Careful what you name the style -- this worked when I used the name "SpanAdd" but did not work with the name "Span_Add." The <div> tag should be used when you want to specify a paragraph style -- the default "Linked Paragraph and Character" style type in Word works fine for this. However, the <span> tag is more finicky and I was only able to get it to work with a "Character" style type. I based my character styles on "Default Paragraph Text."
Anyway, once I modified a new style in the reference document and saved it, I was able to use these tags within an .Rmd file to generate marked-up text.

Keep § when pasting from word

I'm trying to paste content from a word doc into a tinymce instance. The content contains the § (paragraph) character, but TinyMce changes it into an li tag.
Is there a way to config TinyMce to allow special characters like §?
What you are seeing is behavior around the Paste plugin when a sentence starts with that character.
When it starts with that character the Paste plugin treats that like a list element. If the character is anywhere other than the first character TinyMCE does not create a list element.
The best thing to do is to open a bug report on the issue tracker for TinyMCE so the developers are aware of this issue.
https://github.com/tinymce/tinymce/issues

How to display newline in TimelineItem control's text property?

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

Text/Code highlight with jsDoc

jsDoc seems to support most of the MD syntax, but when it comes to highlighting a single reserved word or text, I cannot find a usable tag for that.
In the MD syntax I can use `word`, which would set a grey background and a different font, so you can see it clearly, same as on StackOverflow - word.
In jsDoc, whether I use `word` or <code>word</code>, the effect is just setting italic style to the word, which cannot be clearly seen as a reserved word.
Is there any syntax in jsDoc to clearly highlight a word or a text string, like `some text` in MD, to look like some text?
Alternatively, is there a way to customize it - provide my own CSS for a standard MD tag?
JSDoc documentation seems to be using <code> tag, and it highlights the text using a grey background like you want by setting it on the code tag properties defined on the usejavadoc.css file:
From http://usejsdoc.org/tags-name.html:
There is a guide on how to edit or create your own JSDoc template, with a section on how to override the default template layout file:
http://usejsdoc.org/about-configuring-default-template.html#overriding-the-default-template-s-layout-file
But for something as simple as this, you don't even have to go that far. Just edit the css fragment, before or after generation, and set the background-color you want for the code tag. You may do it before generation by editing this line and setting the background color you want:
https://github.com/jsdoc3/jsdoc/blob/5a58bdf5a551844f12b46be6436aefd3c41e0393/templates/default/static/styles/jsdoc-default.css#L257
Or, if that doesn't work, overriding the property by adding
code {
background-color: #DEDEDE !important;
}
to the file.
As an alternative you can use a framework like qooxdoo to generate your documentation using JSDoc-like comments. According to their API reference you may use <pre class="javascript"> for inline javascript syntax code highlighting, and it looks pretty nice: http://manual.qooxdoo.org/3.0/pages/development/api_jsdoc_ref.html#html

tinymce removes line breaks so all text is in a continuous chunk with no paragraphs

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.