How to clean up HTML on-paste in my WYSIWYG editor - javascript

I have created a WYSIWYG HTML editor and I noticed that when you paste text from Word, it comes in with its source formatting and I don't want it. Is it possible to clean that up when it gets to the editor.
What I need the most is being able to clean-up the text before it get to the editor itself. Something like an "onPaste" thing that can allow me to filter my text when it's pasted (using the command or keyboard shortcut).

HTML Purifier will create standards compliant markup
http://htmlpurifier.org/
Or http://www.w3.org/People/Raggett/tidy/
If those don't help you, I suggest you switch to FCKEditor or tinymce which has this feature built-in.

you could easily set the InsertMode like this
{
InsertMode: "insert_only_text"
}
from the docs

Related

online collaborative code editing ide

I am trying to build a collaborative code editor using node.js. I am able to make contents inside a textarea collaborative (multiple people can edit it simultaneously).
How to turn an existing textarea into a code editor using CodeMirror without replacing the textarea? (if I directly try to make the text area into editor using code mirror it will either replace it or create an editor below it without replacing it)
How do I make the existing text area into code editor?
Actually, this should be somewhat simple. If one builds a synchronous editor, it should be event-based, isn't it in your case?
So you should be able to do 2 things: detect an edit (and send it to others) and programmatically change the content of the edit area once you recieve a message ("another guy has edited"). And that's not difficult to do:
to detect editing, use the change/changes events
to set changes, use content manipulation methods like setValue or replaceRange

Tinymce: How to save text with html tags ony?

How do I configure tinymce to only save html tags and text.
My source file is microsoft word and if i cut and paste something from there is adds all kinds of metadata about the font family, formatting and so on which I don't need.
style=\"text-align:\r\n\"font-family...etc.etc.
I tried
entity_encoding:"raw"
but it doesn't seem to be working. I'm just looking for something like:
<p>Test</p>
Can anyone help?
Thanks very much
That's a feature of the premium TinyMCE.
From their feature page, under Premium: https://www.tinymce.com/features/
Improved Copy-Paste:
Unrivaled technology that cleans your pasted Word content and matches
styles to your preference (works with images, too.)
As an alternative you could try CKEditor, http://ckeditor.com/ which has this functionality available as a configurable plugin: http://ckeditor.com/addon/pastefromword
By the way, if you're doing this as a one off, I usually just paste text into a plain text editor like Notepad, which will strip all formatting and then copy and paste that again into your browser.

JavaScript WYSIWYG implementation

I want to write a very simple WYSIWYG editor, but i don't understand how do they work :(
I've tried to read sources of tinyMCE but stuck in all those classes and functions.
As I know they're creating iframe then do some black magic there and everything works.
The question is: what do those editors do with iframe so it becomes editable?
Thank you.
The keywords are contentEditable and designMode.
Good sources to get started:
Rich-Text Editing in Mozilla (MDC)
element.contentEditable in Mozilla (MDC)
contentEditable in IE (MSDN)
very simple means you want little extension? In such case, you will like http://code.google.com/p/jwysiwyg/
Its constructor is really simple, but not good for extension works.
You can search JQuery. I think there's huge amount of HTML editor or rich text editor available.
By the way, the HTML editor inside Extjs is the worst thing I have ever seen.
Google released yesterday an open source editor:
http://closuretools.blogspot.com/2010/07/introducing-closure-library-editor.html
A quick look at it shows an IFRAME with the BODY tag with the attribute: contentEditable

How does Google mail achieve rtf in textarea?

I am intended to develop a rich input textarea similar to Google mail. Any ideal or resource to share? Thanks in advance!
My suggestion is to use TinyMCE it is a great Rich Text Box. Yahoo also has a really great Rich Text Editor (which has been deprecated).
These are not textareas, btw - they are IFRAMEs holding full HTML managed by the editor code. I also recommend FCKeditor - very configurable and easily integrated. You can write your code using textareas, make a javascript call and those textareas go hidden and the IFRAME gets injected in place. Upon submit the html gets copied back in the textarea. so really don't need to do much...
I am not sure what google uses, but I've used FCKEditor and it worked out great.
Look at the ContentEditable tag. And also have a look at Squire on gihub which is an open source rich text editor that is very lightweight and flexible (used in opera's mail client)
The editors given in the other answers are very heavy and come with their own (outdated, bloated) UI components.

YUI Editor: How to paste as plain text?

I implemented the Yahoo Rich Text Editor (YUI Editor) in a Rails application using the YUI_Editor Plugin.
If I copy/paste text out of a PDF into a YUI-Editor-enhanced-TextArea (YEETA :)) it does not only copy the text but also the formatting of it.
How do I configure the YUI Editor to remove all formatting of text pasted into the YEETA before inserting it?
I'm intrested in your answer even if you're not working with Rails and/or using the YUI_Editor plugin. Give me a hint and I'll figure out how to solve this with my setup.
Thanks a lot for your help!
I've written an extension to the YUI editor to handle this, you can download it here:
http://antscode.blogspot.com/2009/05/strip-formatting-on-paste-using-yui.html
As far as I know there is no such function in the YUI editor. Finally I parsed the editor content on submit as described on this question.

Categories