Avoid losing format after selecting all text and start typing - tinymce

We use TinyMCE as the wysiwyg editor for our content builder. You can drag and drop a text module and once you click an edit button an TinyMCE instance will open. This works really well.
Problem is now that the builder is made for designers so a lot of the times you add a text module just for a 1 word heading or other cases where you only have one block. (one h1, one p etc.) You can also see this behavior in the official demos: Just add an lonely h2 heading, select all text and start to write.
Now Tiny MCE has the default behavior that if you select the complete text (which is almost always the case if you for example change an 1 line / word heading) and you start typing you will lose your formats completely. ( in our case: color, font-size, font-weight, line-height etc.)
This makes editing an heading for example really painful. Best workaround so far is to leave 1 character to not lose the format and then delete the character in the end.
I never saw that behavior in other editors so my question is: Is there maybe an easy setting or workaround to avoid this?


If there are situations where you want a root element to be something specific (e.g. <h2>) you can use the forced_root_block setting on that instance of TinyMCE to force a specific element:
https://www.tinymce.com/docs/configure/content-filtering/#forced_root_block
Even if you delete all text the new text will be wrapped with that root element. See this TinyMCE Fiddle for examples:
http://fiddle.tinymce.com/SOfaab
I think this would address your one line issue?

Related

Fillable Pdf multi-line, Allow rich text formatting in Acrobat Pro DC: but it ignores line spacing/leading set in More

I'm on Win10, using Acrobat Pro DC 2021.011... to edit and Reader DC (same version) to test.
From experience and from reading forums etc, forms in these apps are maddening... but I have not been able to find any discussion (or solutions) to the following behavior...
The form I'm building for other employees' use has a large edit text box set to Multi-line and Allow Rich Text Formatting. It is set to a default font, Calibri and size 50pt. For most situations this will work for them; provides 2-3 lines for a short product description. But occasionally they want a smaller font and more lines... They know how to get the ctrl+e properties bar. But in my testing of this alternative situation they'll need sometimes, I'm finding it's impossible to get the smaller font size and more lines to work. Here's my process.
tab into text box. Ctrl+E for properties bar.
before typing I set the font size to 24
then I type in my 4 lines of text
then I tab to my next form field...
and kaboom... the field I just filled...it's line height is so large it's pushed some of the content invisible. I assume this is coming from the field's default font size, 50
And if I try to adjust the line height, by selecting all the text and then choosing in More...>Form Field Text Properties>Paragraph>Line Spacing
If I set it to Single and click Close/click into another field I get the very large leading (presumably for 50pt font (same as pic above after point 5)
If I choose Exactly and set to point size slightly larger, click Close/out of field, I get another ridiculous result where the 2/3 line have the height I set, but the space between the 1 & 2 second line is way too much and the space between the last line and 3rd line is way too small...
before tabbing or clicking out of field to another field
Good lord.. what is that! 3 different leading values in the same field; just after applying 1 value to all lines, all text in the field...
It makes no sense... it doesn't look like it regards your input at all, and just comes up with it's own random leading... I've fiddled with Space before/after and combinations of Line Height and nothing comes close to what we need... At this point I'm convinced the Acrobat tools for a stylizing text in a multi-line, allow formatting text field are useless. I'd be better off with my employees they can't format anything, ever. Just type one line and hit Tab or Enter...
What is going on! I'm trying to make a simple fillable form for other employees to use, but this kind of behavior makes that impossible (It's enough of a stretch to teach them to use the ctrl+E and do some styling of their text but this is bonkers and completely unteachable... there's not rhyme or pattern to teach!)
Hope someone can help or has seen this behavior too.

How to insert keyboard key graphic representations into your document?

I'm working on a document describing keyboard shortcuts in GNOME and want to make text better looking than: ALT + TAB. A common way seems to be like in this thread where the buttons appear to be within the text:
https://unix.stackexchange.com/q/465681
Is this possible in LibreOffice in a proper way, or is it just inserting images inline? That doesn't seem like it would work every well with changing font size, etc. later, so I was hoping for a better solution.

You could insert real push buttons that don't do anything by following steps 1 thru 6 outlined at https://help.libreoffice.org/Common/Inserting_and_Editing_Buttons. But that approach, as well as inserting inline images, would be awkward because you'd have to worry at least about sizing, anchoring, and wrapping of surrounding text.
The approach you appear to be trying to avoid seems much more palatable, so long as you're not looking to exactly duplicate to Stack Exchange look.
As an example to demonstrate that it's workable, I did the following by applying the same Character formatting settings to each key word. This involved changing font family and size, setting light gray highlighting, adding a gray border, and changing left and right border padding from 0.02 to 0.06...
To make things easy, the settings could all be done with a single button press by creating a macro that could be applied to selected text. And since the result is just formatted text, there are no sizing, anchoring, or text wrapping issues to worry about.
One other option, as an alternative to significant text formatting, is to acquire and use a keyboard font, such as that discussed at How is the Keyboard font automatically styled as keyboard-like keys for the letters in Alt, Shift, Ctrl, Esc, and Backspace?. That would only require changing to that font to type in key representations.

Add HTML but not in text mode of TinyMCE

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.

Microsoft Word->Field Code->{TC}

So I am having a problem. This is what I can create on one of my laptop:
On another, when I created something that has {TC} in it, the whole field code disappeared.
For the example above, if on the other computer, both are running Office 2010,
I can input the code to create the table of content from:
{TOC \f \h \z \f 1\t "Heading 1,1,Heading 2,2,Heading 3,3,Title,1}
to
{TC}
The moment I type in TC, the whole {} disappears.
Other field codes work just fine, except for {TC}. So my question is how do I get {TC} to show on my other laptop?
Thank you for your time.

Apparently, I found my answer.
When I searched google for my answer, most sites give this as a solution:
For Word 2010, go to File->Options->Advanced
Under Show document contents: Select "Show field code instead of their values"
This is the equivalent of pressing Alt+F9, which DID NOT solve my problem.
Apparently, the solution to get {TC} to show in your document is in:
go to File->Options->Display
and check to always show HIDDEN TEXT.
I hope this helps someone in the future.

Yeah, the disappearing TC code is annoying at first -- seems like it's broken. Other codes work, but why does that disappear, even if entering manually? Word instantly sets TC code to Hidden, even the field code itself.
To temporarily toggle this visible without permanently changing your display to show Hidden Text, you can use the normal Ctrl-Shift-8, which toggles display of spaces, paragraph marks, tabs, and Hidden Text, on and off. This is a good keyboard shortcut to have in your standard back of tricks anyway. It is frequent in Word that you need to toggle paragraph marks on and off, because paragraph formatting is attached to the Paragraph mark, and when they're hidden, it can be tricky to fix various formatting issues.

The original post was a few years ago, but I fear things have gotten worse since then, not better. I am using Word 365 v2201, which should be up to date. The other day, I wasted hours on trying to resolve this issue with TC field codes.
First I tried entering them using Insert > Quick Parts > Field. Word creates what looks like a field code, but it behaves as normal text. Messing around with the various controls to toggle field display and hidden text etc etc, has absolutely no effect. It is basically a faux field. And of course, it is completely ignored when compiling the TOC.
Next, I tried entering it manually, by using Ctrl + F9 to either create a blank field or convert some existing text into a field. Same result as above.
As with the original post, this seems to afflict only the TC field code. Other codes work fine, including TOC. And if I create a TOC field, then edit the code to TC, it immediately loses its properties as a field. If I then put the O back in, it immediately behaves as a field once again. Unlike in the original post, adjusting the settings for field display and/or hidden text, have no impact.
In the end, the only solution was to create the field using Alt + Shift + o to open the Mark Table of Contents Entry dialog box. And finally, this works!

How do you display code snippets in MS Word preserving format and syntax highlighting?

Does anyone know a way to display code in Microsoft Word documents that preserves coloring and formatting? Preferably, the method would also be unobtrusive and easy to update.
I have tried to include code as regular text which looks awful and gets in the way when editing regular text. I have also tried inserting objects, a WordPad document and Text Box, into the document then putting the code inside those objects. The code looks much better and is easier to avoid while editing the rest of the text. However, these objects can only span one page which makes editing a nightmare when several pages of code need to be added.
Lastly, I know that there are much better editors/formats that have no problem handling this but I am stuck working with MS word.

Here is the best way, for me, to add code inside word:
Go to Insert tab, Text section, click Object button (it's on the right)
Choose OpenDocument Text which will open a new embedded word document
Copy and paste your code from Visual Studio / Eclipse inside this embedded word page
Save and close
Advantages
The result looks very nice. Here are the advantages of this method:
The code keeps its original layout and colors
The code is separated from the rest of the document, as if it was a picture or a chart
Spelling errors won't be highlighted in the code (this is cool !)
And it takes only few seconds.

Download and install Notepad++ and do the following:
Paste your code in the window;
Select the programming language from the language menu;
Select the text to copy;
Right click and select Plugin commands -> Copy Text with Syntax Highlighting;
Paste it into MS Word and you are good to go!
Update 29/06/2013:
Notepad++ has a plugin called "NppExport" (comes pre-installed) that allows you to copy to RTF, HTML and ALL. It permits dozens of languages, whereas the aforementioned IDEs are limited to a handful each (without other plug-ins).
I use Copy all formats to clipboard and "paste as HTML" in MS word.

After reading a lot of related answers, I came across my own solution, which for me is the most suitable one.
Result looks like this:
As you can see, it is the same syntax highlighting like on Stack Overflow which is quite awesome.
Steps to reproduce:
on Stack Overflow
Goto Ask Question (preferably with Chrome)
Paste Code and add a language tag (e.g. Java) to get syntax hightlighting
Copy code from preview
in Word
Insert > Table > 1x1
Paste code (you may need to use Paste Special... > Formatted Text (RTF) from the Edit menu to not lose the syntax hilighting)
Table Design > Borders > No Border
Select code > Edit > Find > Replace
Search Document ^p (Paragraph Mark)
Replace With ^l (Manual Line Break)
(This is required to remove the gaps between some lines)
Select code again > Review > Language > check "Do not check spelling or grammar"
Finally add a caption using References > Insert Caption > New Label > name it "Listing" or sth
Sample code thanks to this guy

There is a nice Online Tool for that : https://www.troye.io/planetb/
Just copy the generated code and paste it into your word editing software. So far I've tried it on MS Word and WPS Writer, works really well.
Doesn't play nice with Firefox but works just fine on Chrome (and IE too, but who wants to use that).
One of the main benefits is that, unlike the Code Format Add-In for Word, it does NOT mess with your code, and respects various languages' syntax.
I tried many other options offered in other answers but I found this one to be the most efficient (quick and really effective).
There is also another online tool quoted in another answer (markup.su) but I find the planetB output more elegant (although less versatile).
Input :
Output :

I type my code in Visual Studio, and then copy-paste into word. it preserves the colors.

When I've done this, I've made extensive use of styles. It helps a lot.
What I do is create a paragraph style (perhaps called "Code Example" or something like that) which uses a monospaced font, carefully chosen tabs, a very light grey background, a thin black border above and below (that helps visibility a lot) and with spelling turned off. I also make sure that inter-line and inter-paragraph spacing are set right. I then create additional character styles on top (e.g., "Comment", "String", "Keyword", "Function Name Decl", "Variable Name Decl") which I layer on top; those set the color and whether the text is bold/italic. It's then pretty simple to go through and mark up a pasted example as being code and have it come out looking really good, and this is works well for short snippets. Long chunks of code probably should not normally be in something that's going to go on a dead tree. :-)
An advantage of doing it this way is that it is easy to adapt to whatever code you're doing; you don't have to rely on some IDE to figure out whatever is going on for you. (The main problem? Printed pages typically aren't as wide as editor windows so wrapping will suck...)

Maybe this is overly simple, but have you tried pasting in your code and setting the font on it to Courier New?

Try defining a style called 'code' and make it use a small fixed width font, it should look better then.
Use CTRL+SPACEBAR to reset style.

If you are using Sublime Text, you can copy the code from Sublime to MS Word preserving the syntax highlighting.
Install the package called SublimeHighlight.
In Sublime, using your cursor, select the code you want to copy, right click it, select 'copy as rtf', and paste into MS Word.

I'm using Easy Code Formatter. It's also an Office add-in. It allows you to select the coding style / and has a quick formatting button. Pretty neat.

In case you're like me and are too lazy or in a hurry and don't want to download additional software, you can use http://markup.su/highlighter/. It's very straight forward and supports several highlight themes and many programming languages. In my case I was using Visual Studio Code, which doesn't allow copying with format due to CSS involved in styling (as reported here).
Copy the text from the Preview box and then in Word go to Insert -> Textbox, paste the Preview from the website, highlight all the text, and then disable spell checking for that textbox.
This is what the code looks like finally.

The best way I found is by using the table.
Create a table with 1x1. Then copy the code and paste it.
If you're using the desktop app then it will inherit the code editor theme color and paste it accordingly, else you can change the table style to any color.
UPDATE ------------------
From Word 2021, you can directly paste the code and it will preserve the formatting. No need to create the table.
Thank you #RdC1965 for mentioning this.

This is a bit indirect, but it works very nicely. Get LiveWriter and install this plugin:
http://lvildosola.blogspot.com/2007/02/code-snippet-plugin-for-windows-live.html
Insert your code using the plugin into a blog post. Select all and copy it to Word.
It looks great and can include line numbers. It also spans pages decently.
HTH
Colby Africa

Vim has a nifty feature that converts code to HTML format preserving syntax highlighting, font style, background color and even line numbers. Run :TOhtml and vim creates a new buffer containing html markup.
Next, open this html file in a web browser and copy/paste whatever it rendered to Word. Vim tips wiki has more information.

In my experience copy-paste from eclipse and Notepad++ works directly with word.
For some reason I had a problem with a file that didn't preserve coloring. I made a new .java file, copy-paste code to that, then copy-paste to word and it worked...
As the other guys said, create a new paragraph style. What I do is use mono-spaced font like courier new, small size close to 8px for fonts, single spaced with no space between paragraphs, make tab stops small (0.5cm,1cm,..,5cm), put a simple line border around the text and disable grammar checks. That way i achieved the line braking of eclipse so I don't have to do anything more.
Hope I helped ;)

This is the simplest approach I follow. Consider I want to paste java code.
I paste the code here so that spaces, tabs and flower brackets are neatly formated http://www.tutorialspoint.com/online_java_formatter.htm
Then I paste the code got from step 1 here so that the colors, fonts are added to the code http://markup.su/highlighter/
Then paste the preview code got from step 2 to the MS word. Finally it will look like this

You can use VS code to keep code format and highlighting. Directly copy and paste code from VS.

you can simply use this Add-in on any office program.
Go to insert tab, then Get Add-ins, and search for Easy Syntax Highlighter
It supports
185 languages and 89 themes.
Automatic language detection.
Multi-language code highlighting.

Use a monospaced font like Lucida Console, which comes with Windows. If you cut/paste from Visual Studio or something that supports syntax highlighting, you can often preserve the colour scheme of the syntax highlighter.

Answer for people trying to resolve this issue in 2019:
Most answers to this question are outdated by now. I wish there was a way to reinspect old questions and answers every now and then!
The method I found for this question that works with Office 365 and its associated programs can be found here.

I'm using Word 2010 and I like copying and paste from a github gist. Just remember to keep source formatting!
I then change the font to DejaVu Sans Mono.
You can opt to copy with or without the numbering.

Copying into Eclipse and paste it in Word is also another option.

You can also use SciTE to paste code if you don't want to install heavy IDEs and then download plugins for all the code you're making. Simply choose your language from the language menu, type your code, high-light code, select Edit->Copy as RTF, paste into Word with formatting (default paste).
SciTE supports the following languages but probably has support for others: Abaqus*, Ada, ANS.1 MIB definition files*, APDL, Assembler (NASM, MASM), Asymptote*, AutoIt*, Avenue*, Batch files (MS-DOS), Baan*, Bash*, BlitzBasic*, Bullant*, C/C++/C#, Clarion, cmake*, conf (Apache), CSound, CSS*, D, diff files*, E-Script*, Eiffel*, Erlang*, Flagship (Clipper / XBase), Flash (ActionScript), Fortran*, Forth*, GAP*, Gettext, Haskell, HTML*, HTML with embedded JavaScript, VBScript, PHP and ASP*, Gui4Cli*, IDL - both MSIDL and XPIDL*, INI, properties* and similar, InnoSetup*, Java*, JavaScript*, LISP*, LOT*, Lout*, Lua*, Make, Matlab*, Metapost*, MMIXAL, MSSQL, nnCron, NSIS*, Objective Caml*, Opal, Octave*, Pascal/Delphi*, Perl, most of it except for some ambiguous cases*, PL/M*, Progress*, PostScript*, POV-Ray*, PowerBasic*, PowerShell*, PureBasic*, Python*, R*, Rebol*, Ruby*, Scheme*, scriptol*, Specman E*, Spice, Smalltalk, SQL and PLSQL, TADS3*, TeX and LaTeX, Tcl/Tk*, VB and VBScript*, Verilog*, VHDL*, XML*, YAML*.

If you are using Intellij IDEA, just copy the code from the IDE and paste it in the word document.

A web site for coloration with lots of languages.
http://hilite.me/
You can host one yourself since it is open source. The code is on github.

There really isn't a clean way to do it, and it could still look fishy based on your exact style settings.
What you could try to do is to first run a code-to-HTML conversion (there are many programs that do that), and then try to open up the HTML file with word, that might hopefully provide you with the formatted and pretty code, and then copy and paste it into your document.

I was also looking for it and ended up creating something for my code display.
Here's a good way:
Create a rectangular form and place your text inside.
Change the font to Consolas and size ~10.
Change the text font to gray near-black (gray 25%, darker 75%)
Use darker colors to highlight your text if needed and choose one to be the contour.

I have created an easier method using tables, as they are easier to create, manage, and more consistent (with the possibility to save the table's style inside the document itself), but I couldn't find a better way for code colouring scheme, sorry for that.
Steps:
Create a 3x3 table.
Select the table, and make its borders invisible ("No Borders" option), and activate "View Gridlines" option.
Make the adjustments to cells' spacing and columns' widths to get the desired aspect. (You will have to get in "Table Properties" for fine tuning).
Create a "Paragraph Style" with the name of "Code" just for your code snippets (as mentioned in https://stackoverflow.com/a/25092977/8533804)
Create another "Paragraph Style" with the name of "Code_numberline" that will be based upon the previous created style, but this you will add a numbering line in its definition (this will automate line numbering).
Apply "Code_numberline" to the first column, and "Code" to the 3 column.
Add a fill in the middle column.
Save that table style and enjoy!

The best presentation for code in documents is in a fixed-width font (as it should appear in an IDE), with either a faint, shaded background or a light border to distinguish the block from other text.

If its Java source code copy it to Visual Studio and then copy it back to Word.