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.
Related
I'm displaying an array in HTML page. On a text column when onfocus event is fired i display the text in CKedit using CKEDITOR.replace('#elementId').
I would like hide the CKeditor once the element is not anymore selected (using onblur event) and display unformated text as it was before selecting the element.
Does anyone know how to do that?
I think, only way is destroy instance of CKEditor
CKEDITOR.instances["YourInstanceID"].destroy();
You can recreate instance again, when needed
CKEDITOR.replace("YourInstanceID")
But, may be you should check inline version:
CKEditor inline example
I think most convenient will be using inline editors. Which only appear when user select specific element.
Another option is replacing editor after event and destroy it in other way. But this approach might be a little bit laggy, because editor should be properly destroyed and recreated, what might be time consuming for a browse. Here is an example on doubleclicking the divs, similar approach you could be able to use for focusing and bluring.
Thans for your answers.
I finaly simply added or removed ckeditor editor class in the textarea tag.
I am allowing my users to add YouTube embedded videos via the TinyMCE editor. I know that the content of the WYSIWYG is going into a responsive website, I want to automatically wrap the in the fluid width video wrapper (https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php).
So anywhere we have an Iframe inserted I want to wrap that in a div class=videoWrapper. I can't seem to find how I can wrap around existing content. Thanks in advance.
There are two questions here that will change how you can do this...
At what point do you have to have this <div> in place?
Does it have to happen when content is inserted?
Can you do this work when you go to save the content?
What are the ways people can insert this video data?
Do you have a custom UI to do this?
Are you relying on the TinyMCE Insert Media dialog?
Other?
To address item #1 above:
If you don't need to add this at the moment the content is added you can always add this when the content is posted to the server for storage. You can walk the DOM and look for the releavant <iframe> tags and wrap them in the <div>. This is likely the simplest approach as you only do this on content save and its done on the server which is a more controlled environment. This would also catch people using code view and removing your wrapper <div> in a subsequent editing session.
If you have to add things on the fly then item #2 becomes important...
If you have only one way to add the <iframe> then you can look at how they are doing that and see if that approach fires any event(s) that you can use to be notified (e.g. there are events for paste, keyup, etc). If there are multiple ways to add this data (Insert Media, copy/paste, code view, etc) then it will be pretty hard to find events that work for all of these possible approaches.
Note: Not all TinyMCE plugins fire events for everything they are doing so you may not find an event that you can catch right when the content is entered regardless of how its added.
If that is the case you can use one of TinyMCE's generic events (e.g. 'change') and look for unwrapped <iframe> tags at that time:
tinymce.init({
selector: '#myTextarea',
setup: function (editor) {
editor.on('change', function () {
//Update the DOM here
});
}
})
The built in editor events are documented here: https://www.tinymce.com/docs/advanced/events/
CodeMirror
I need to:
create a single instance of codemirror editor dynamically
change it's current value sometimes (by destroying it ant initilizing again?)
change type of editor - sometimes I need the editor itself, sometimes I need diff mode
This is happening in SinglePageApplication.
How should i handle it? should i create textarea and then convert it in and out codemirror each time as described here (method cm.toTextArea()). Or there is another more clearer way?
You can update the value of an existing editor with its setValue method, and change its mode with editor.setOption("mode", ....).
To get rid of an editor, just detach it from the DOM and make sure you don't keep any references to it, and the garbage collector will take care of it.
I am currently using CKEditor to be able to edit and to view documents in my SQL database. If I change the content of the document in the sql database it should automatically update the CKEditor instance with the new text. My only problem is that it flashes when ever it updates (ie: it goes blank and then updates to the new text). Does anyone know of a way to make it a smother transition. I'm also using JQuery so I'm not sure if there is anything that could be used there to make a smooth transition to the new text.
CKEDITOR.instances.content.setData("data");
CKEDITOR.instance.content.setData("new data");
The change from data to new data will have a quick bit of lag.
There's no way to avoid some slight flickering when setting data in framed (based on wysiwygarea plugin) editor instance. This is because the entire contents of the iframe containing your work must be re-created. This is nothing like a piece of cake and I hardly think we can bypass this thing.
I'd recommend you to play with element.setHtml( html ) on editable though:
CKEDITOR.instances.editor1.editable().setHtml( '<p>FooBar</p>' );
This is not a valid method for setting editor contents in any way because it bypasses internal filtering, processing and stuff. Yet it may work formay you if you're careful.
P.S. You'll probably also want to cache editor1.editable() object to speed-up things.
There are quite some core developers of CKEditor active on stack
overflow.
Yep. We are ;)
It seems that the screen flickers because the page is reloading an iframe within the editor. By using the divarea plugin for CKEditor I can get rid of the flickering. The only problem now is that the CKEditor.readOnly property no longer works...
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