There is issue related to CKEditor paragraph spacing. If I'm typing in ckeditor, it works fine. If I copy paste something from browser, it works fine. But when I copy paste something from word file, I get large space between two paragraphs. So I manually need to remove a extra line between two paragraphs. I have searched on internet for solution. And I got some solutions too. But none of them is working for copy/paste from word file. I have tried these solutions.
Solution 1
Solution 2
These solution are working fine to solve issue while manually typing or copy/paste form browser. But not working for copy/paste from word file. And I can't understand why this happens. If any one knows the answer, it will be appreciated.
Use Paste from Word option on menu bar of CKEditor.
That way you will receive MS Word formatted text converted to WEB formatting.
Usually when copying text from some text pre-processors (like Word, Excel...) you will copy some hidden formatting (like inline CSS, additional markup and so on). When pasting to CKEditor directly all these additions are left as is and it leads to broken layout, that's why you need to first process this copied text and only than put it in text.
Related
I'm working on a document printout from MS PowerApps. Best method I have found thus far is to write it in HTML and but save as a .doc file so that it opens in word online. From there, the user can save as PDF. So far, this works surprisingly well and allows for a great deal of control over the output, but one limitation I have found is that word does not seem to recognize multiple classes on a single element. This is kind of a pain as I am using a lot of tables, so I have to either create a new class for every single cell cell format I need or use inline CSS instead. Not huge issue, but it makes for messy code and time consuming updates. Is there any way to achieve this?
Edit:
File here: https://wetransfer.com/downloads/29323f5c8060a374ed23e8ff2b6e9fd320210116015928/c991f4
It's designed to open in word online but it works in desktop as long as the view mode is set to print layout and not web layout.
Edit2: I should note that I did not figure out the headers all by myself, but worked off of some code provided by Georgi Nikolov found here
You can't write HTML or CSS Code into MS Word.
MS Word is Rich Text Editor
Rich Text: Rich Text Format (RTF) is a file format that allows the exchange of text files between different editors and it has its formatting so we can't use it to write HTML.
HTML Must be written in Plain Text Editor because Plain text contains no formatting, only line breaks and spacing. Therefore no text formatting (such as font sizes and colors, bolding or italics) can be used.
some examples for Plain TextEditors that you can use to write HTML and CSS are Notepad and Notepad++
I am pasting an HTML table into my wordpress site from Text Editor. The table is styled with CSS and both codes are correct.
Whether I paste it in to Wordpress or the W3Schools tester, not all of the styling takes place. It seems to choose different td's, tr's to style when it wants to.
If I delete td class="name" and then type it back out, it all works fine.
What am I doing wrong?
If deleting " and retyping it, then I would think that is where the issue is. I have come across this in the past, and I pretty much just retyped each one. If you try pasting the code to something like notepadd++ or Sublime Text, it may remove the character formatting of the ". Then copy and paste it from there to Wordpress.
I copy a text from a source in a platform. It is a private platform that has a box where you can type text. There is a button where you can see the HTML source code afterwards. I copied numerous texts with no problem. When I am trying to copy-paste the above, I noticed that in the HTML code a specific tag gets produced.
<p><strong><em><span lang="en-gb">Week of the 5th of September</span></em></strong></p>
So, my question is, how is that possible. Does a text after copying it generates specific tags? So, in the copying process, some things get copied apart from the text we can see... Also, this could be happening because the source text (that is about to be copied) contains characters that are not supported from the unicode set up in the platform (web application)?
I am really curious to understand what is happening.
Based on the fact you said it had a button where you can view source, this sounds like a WYSIWIG (What you see is what you get) editor like CKeditor, TinyMCE, Froala, etc. They take standard HTML textarea elements and using Javascript and CSS convert them into more robust editors. They allow you to do simple text formatting in the textarea, upload images, view source, etc.
They are used a lot in blogs and for content editing for people that don't write code but want to be able to manage and maintain content in web sites. For instance if you type a "paragraph" of text in one of these it will automatically wrap it with the appropriate <p> tags using Javascript.
In your case you're adding content in this box, and it's simply applying the formatting to it with Javascript. It will do the same if you just type in the box, vs. copy/paste.
Here are some links to WYSIWIG editors so you can learn more about how they function:
http://ckeditor.com/
https://www.tinymce.com/
https://www.froala.com/wysiwyg-editor
Fun Fact: The editor you used when you typed your question on Stack Overflow uses one of these. https://meta.stackexchange.com/questions/121981/stackoverflow-official-wmd-editor
It`s not much information, so I‘ll take a guess:
For <strong><em>: The website could eventually use a div with the contenteditable="true" attribute (more info on mdn) as the input method. When you then paste in text from another application that already has markup like bold or italic, it‘s converted to html tags.
The <span lang="en-gb"> could come from the browser, another application or the website through analyzing the text and adding this.
I used syntaxhighlighter in my front web page to highlight code. But I came across a question that the word in the code isn't wrapped when the code length is longer than the length of the <div>.
then I googled it. And found a way mentioned below:
pre,code{
white-space:pre-wrap;/*css-3*/
white-space:-moz-pre-wrap;/*Mozilla,since1999*/
white-space:-pre-wrap;/*Opera4-6*/
white-space:-o-pre-wrap;/*Opera7*/
word-wrap:break-word;/*InternetExplorer5.5+*/
}
However, a new problem appeared, the line number is not corresponding to the actual code line：
My question is:
How can I avoid the code overflows while keep the code line be corresponding to the actual original code line?
You can use CodeMirror editor. It has a lot of feature support including word wrap and read-only like the Sublime Text Editor.
I guess it does correspond the original code lines. Because of the wrapping you are getting messed up with the numbering. Try wrapping the code with JavaScript - add new line symbol \n and and caret returning symbol \r (depends on your programming environment and its settings) and see if it helps.
You have to make some changes to the JavaScript, too.
It's explained at the bottom of the comment section here, including a demonstration in jsfiddle: https://bitbucket.org/alexg/syntaxhighlighter/issue/182/version-3-making-code-wrap
I'm writing a web application which needs to bring the stored paragraphs into the front web. The text come from excel work sheet and contains control characters like indent. I want to show the text in the exactly manner as it was in excel. How can I do that then? Thanks in advance.
Without seeing your text to begin with, my initial suggestion would be to wrap it in pre-formatted tags. Note that this won't work for formatting like italics, underlines, etc. Merely white-space:
<pre>
Anything within these tags will
maintain its original formatting. Spaces, new lines, and all.
</pre>
It would be easier for you to save your excel file as web page into new file and use the html of this new file in your application.
You might want to check out RTF-to-HTML conversion.