It feels like it's a hack on top of a hack - it doesn't think too far ahead, and if you allow it, it will nest your HTML infinitely as long as the content looks good on-screen. I'm creating an open-source version of a new editor - one that I would build after getting all this experience and knowledge from working with the editor at Answerly.
This new editor would handle all keystroke events manually and would allow for some very consistent configurations and features such as:. I will be sharing my development story and code in this blog, and you can get the latest updates and support me by subscribing to the newsletter below:. Contenteditable will be consistent, eventually, whether with existing proposals or something completely new. But say it updated tomorrow, it would take a lot of time until browser adoption grows - so until now, we're stuck with the current solutions.
If you search the internet, two propositions seem to have the most traction and promise to improve the current contenteditable. This proposition from Ben Peters Microsoft suggests a minimalistic version of contenteditable that only supports caret drawing and moving, some keyboard events, and typing characters.
This contenteditable would allow the user to handle the styling manually, something similar to what I will be doing with my open source project.
It would work as the current contenteditable but allow for a lot more customization and more events. Many blogposts cover this last proposition according to my research, but none include a source, so I'd take it with a pinch of salt. Products Helpdesk Widget. Search Widget. Notify Widget. I don't have to deal with line breaks manually. But why this affect the result as I described in the problem because I have a CSS style of using word-wrap: pre , and CKeditor does not know that.
It delete those white-spaces and make the viewing strange. And I find the solution, however, there is no config option to control that. It is acceptable with a very small hack. Show 1 more comment. Active Oldest Votes. I found it. Improve this answer. Chloe Chloe This is not good in attribute values, so beware. Add a comment. That's only on paste events. What if someone needs to type out multiple lines in the source mode and keep the line breaks? Of course once this was saved all formatting was lost in the db as well.
Show 3 more comments. Simon Simon 1 2 2 bronze badges. Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown. The Overflow Blog. Stack Gives Back Safety in numbers: crowdsourcing data on nefarious IP addresses. Featured on Meta.
New post summary designs on greatest hits now, everywhere else eventually. Winter Bash Visually, these editors do pretty well. Although the line spacing was only respected by the MailChimp editor. The others seem to have added extra spaces. None picked up the typeface or color — this is probably good, but inconsistent with expected results. The content may look fine in the editor, but behind the scenes it could be slowing down the website or, in some cases, breaking the layout.
Behind the scenes, the HTML markup can differ wildly. Here is how a developer would create the markup for our test content:. Now imagine this was an article containing dozens of paragraphs and not just a small bit of test copy.
All the extra empty tags would be compounded, causing the user to download more data and search engines to deal with extra, unrelated HTML. We tried some older ones, though, and for the simple bit of copy we tested, one jQuery-based WYSIWYG editor generated 18, characters for our 93 characters of copy!
You can mitigate issues with pasting in content from your clipboard in a few ways. This is less than ideal however, especially if you need to collaborate with others. Alternative, you can paste your text into a plaintext program like Notepad or TextEdit first, then copy from there to your web editor and apply your formatting using the WYSIWYG editor tools.
0コメント