I am in need of a contenteditable plugin that will work well on all browsers + smartphones. I tried Codemirror but it was not working well on iphone. Then I tried Editarea and it works very well, but it is 150Kb, uses an iframe and has a lot of unnecessary code for me. What i need is a simple contenteditable area that will not allow the pasting of photos or other styled text and works well on phones as well.
You'll probably have to write your own handler since your logic is very custom. You'll have to disallow keyboard shortcuts like ctrl-b if you do not want to allow bolding for example. For paste, the best strategy to clean it is to inject a hidden div int o your contenteditable area and then place the cursor in it to force the pasted content into it. At that point you can reference the div and clean out unwanted data e.g. images. Finall you can take the content and put it after the div and then remove the div.
Also consider pasting from Word which can be very messy. In the paste handling you can even make an ajax call with the data to clean it server side.
Related
I'm using TinyMCE as a wysiwyg editor for a collaboration editor I'm working on. I need very granular changes that are made to the editor(Insert('a'), Delete(2), etc.). I see TinyMCE has a few events to handle this case, onchange_callback, and handle_event_callback. Neither one of these methods give you what changed to the editor, just the editor instance or the event. Is anyone aware of a method to just get changes to the editor, kind of like CodeMirror?
In order to do this you can save the editor content at a specified point of time and then compare it to the editor content to a later time.
I want to build a lightweight online text editor like google doc, but quite quite lighter than that.
What I mean is, I only want to realize the following three functions:
input/delete characters
create/delete a new line
indent
But I'm not quite sure how to build it.
Here is my idea:
Treat every line as a single div.
Monitor the keyboard event, when user hit enter, create a new div
According to my method, I need to set the div's contentEditable=true
However, after that, whenever I hit enter, a newline is created inside the div.
So, how to stop that? (can it only be solved by using javascript?)
Or, is there any other way to achieve my goal?
Just use event.preventDefault(); like so:
$(document).bind("keydown keypress", function(event) {
if ( event.which == 13 ) {
event.preventDefault();
// Your code here
}
});
I think you mean text editors like tinymce or CKEditor. You can make them as lighter as you want.
Be careful about letting people do this on your webpage -- if you're not properly escaping/monitoring input, they can wreak havoc on the page itself preventing them from being able to save things, etc.
Most of these editors implement their editor as an embedded iframe. Since it's being served from the same port, protocol and host, you have full script access to it.
So you make a tag in the iframe editable, and leave all the controls outside the iframe. When they click on a control, you make that happen in the iframe.
When they save, you just grab the contents of the iframe's div.
I would read the keyboard events and just modify the DOM to reflect those keyboard changes. The biggest problem you will have is to position the 'caret' (vertical line').View this SO question to do this correctly -> calculate-text-width-with-javascript
Another alternativ, and one that I prefer, is to use the tag. Its a more lightweight solution and comes with text measurement built-in. Google Closure library has a lot of support for this built in -> Closure Library, and example with text selection -> Canvas Text
As we know can set contenteditable in DIV to allow editable. It can make same like Textarea.
However there's the most big different are the "content copy and paste" to DIV and Textarea.
DIV is allow html/plain but Textarea only serve plain text.
Below are the method to solve those problem:-
Method 1 - Direct using window.clipboardData.getData('Text') ( will prompt for asking permission).
Problem : Mozilla and chrome are not support clipboarddata.
Method 2 - Using flash.
Problem : Flash v.10 has upgraded to new rules which cannot get clipboarddata without user first initialize.
Method 3- Using "onpaste" event. When data paste on div -> Set focus
on hidden textarea -> Get value from hidden textarea and set into div
by using setTimeout -> clear hidden textarea.
Problem : The timing set value to hidden textarea are not consistent.
I have saw google was doing well on this.
For IE , use clipboarddata.
For Mozilla,others (not support html5) - Anyone know how google done it ?
Hint: use iframe designmode ?
For Chrome (support html5) - Just set DIV to Contenteditable="plaintext-only".
The trick that I use for this kind of thing is to have an offscreen <textarea>, which is not visible to the user.
The textarea is focussed and has a keyboard handler that notices whether the user is typing in the textarea. As I detect the user is typing, I grab the value of the textarea and dump it in the div.
This is the basic idea. You'll need a bit more to get the look and feel right:
you can't just hide the textarea with display:none or visibility:hidden because that will generally make it insensitive to typing and events too. So you need to make it really small and position it outside the screen, or stack it behind some other element.
you're going to have to detect whether the textarea blurs and decide if you need to refocus it.
You'll want a click handler on the div so that if people click the div you can focus to the textarea instead so people can start typing again.
The nice thing about this approach is that general keyboard handling, like ctrl+cursor, and cut+paste etc. all work exactly as expected without having to code that yourself - you're just piggybacking on the existing functionality of the textarea.
Here's an example of how this works:
http://js1k.com/2012-love/demo/1168
(A javascript shell)
I have a small text editor in my home page ( a textarea ) where I can paste text. How can I get this text in a variable before it would be pasted? I know that there is this function:
clipboardData.getData()
but it doesn't work in Firefox, and I want something for all the browsers.I am using HTML and Javascript.
thanks
The short answer is that in general you can't get the text before it is pasted. What you can do is what big web-based WYSIWYG editors such as CKEditor and TinyMCE do, which is:
Detect a Ctrl-v / shift-ins event using a keypress event handler
In that handler, save the current user selection, add a <div> element off-screen (say at left -1000px) to the document, move the caret to be inside that div, thus effectively redirecting the paste
Set a very brief timer (say 1 millisecond) in the event handler to call another function that retrieves the HTML content from the div and does whatever processing is required, removes the div from the document, restores the user selection and inserts the processed HTML.
Note that this will only work for keyboard paste events and not pastes from the context or edit menus. By the time the paste event fires, it's too late to redirect the caret into the div (in some browsers, at least).
Getting the clipboard to work across all browsers is tricky and I believe it's safe to assume there's no way to make it work with only JavaScript, unless you're targeting one specific browser (usually IE). I used ZeroClipboard for this: http://code.google.com/p/zeroclipboard/ - it seems to do its job OK.
I am using an iframe and setting its contendocument.designMode to "on". This allows me to replicate a Rich Text Editor, and achieve much more flexibility in the editing process.
The problem is that I have certain links (test) that are added to the page, and of course these links don't work because i'm in designMode.
At first I thought, well I'll just wrap that link inside another iframe, but still it won't fire the event attached to it.
Is there a way to have certain elements work as they would normally, even though they are inside a designMode="on" document?
Recently had the exact same problem. My solution was to use a div with contentEditable="true" instead of an iframe, which then allows you to set contentEditable="false" on elements within that div.
Not a perfect solution, but gets the job done in my case.
You can place a checkbox to toggle to designmode 'on' and 'off'. To see the action temporarily swich to designMode 'off'. This way you may be able to get the desired behavior of your script.
If you look at google docs, when you focus on the link, they show a small div with different actions for that link.
I guess they have spent already a lot of energy to make it the best they could. So I wouldn't try something different.