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.
Related
Description
So I've read through the GTM Custom template APIs; but I don't find anything regarding getting (e.g.) a div element. I've tried copying document from window using copyFromWindow() or calling document.getElementById through callInWindow(), but both times, I always get this error message when I add document to the permissions:
The value must not start with any key predefined on global scope (i.e. in Window), or any JavaScript keywords.
Question
Is there anyway that it is possible to call a DOM element through custom GTM tags?
My goal is to create a tag that can inject video's in selected div elements. I could do this by creating a custom HTML tag, but I don't want our marketing guy to always go through code. So a tag that asks him for the target ID and video url could make it easier
No. Preventing access to the DOM (and controlling access to the global namespace) is pretty much the point of sandboxed Javascript. Since GTM is not supposed to interfere with the DOM, this should not usually be a problem (well, that's what Google thinks at least).
If you need to learn about some property of a DOM object, you can get this (i.e. the property, not the object itself) via a DOM type variable and pass it in as a data item by creating a field that accept variables.
Simo has a bit about this in his inital write-up on custom templates (you have to scroll down quite a bit). While Google has added a number of APIs since, I doubt that a DOM API is coming up, because that would pretty much defy the purpose of sandboxed Javascript.
I'm making a collaborative browser text editor and I have some optimizations concerns. The goal is to allow users to edit files arbitrarily long. When someone updates the file, everyone receives an update notification, which updates the editor content.
I'm interested to know what happens under the hood with the code bellow: does the program deallocates the old value content and allocates the new one every time this function is called? Ideally, what I would like to do is to have something like a 'file buffer', then I would just move the contents around as the users insert new data into it. But I don't want to lose the convenience of using the textarea element with its events and stuff.
function updateTextAreaValue(new_value) {
var my_textarea = document.querySelector("#my_textarea");
my_textarea.value = new_value;
}
The contents of a textarea are just a string. Setting a new value releases the string it used to contain (making it eligible for garbage collection), and stores the new one.
You've said you don't want to lose the convenience of a textarea element because of its "events and stuff," but a contenteditable div will have the same events, and also a DOM structure within it that you can adjust rather than replacing the entire string. And since it's HTML, it has styling, etc.
But of course, if a textarea serves your needs...
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'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 have a <div id="populated"> element on the page which receives dynamically created content, including populated DIVs, text areas, input texts and check boxes. Moreover, there are some elements with addEventListener.
My question is: how to save this "populated" DIV and reload it when a user returns to the page?
What I've tried, by using localStorage:
Save the entire DIV as a serialised object (got tips from here). Problem: "Uncaught TypeError: Accessing selectionDirection on an input element that cannot have a selection."
Save the entire DIV as innerHTML. Problems: 1) bind events are lost 2) already entered data in textareas/inputs is lost.
I can rebind the events, but parsing the DIV structure and storing/restoring .value for each element seemed too complicated.
I'm using "pure" JavaScript (no frameworks) and without AJAX. Any ideas, keywords?
There are basically three ways to persist data on the web:
Server-Side
Local Storage
Cookies
Now cookies have a finite limit to how much they can store (and IIRC that limit varies by browser), so if your DIV has a decent amount of stuff in it, cookies won't cut it. Local storage works for newer browsers ... if it works at all that is (you should really post your storage error as a separate SO post of its own).
As for what to store, you can basically give up on storing bound events ... unless you want to convert every one to an in-line attribute (eg. "onclick='...") and save all the HTML ... but that would be a terrible idea because inline events quickly become a nightmare. (If you only have one or two this might be an option ... but I wince at suggesting it.)
What is commonly done instead is that you serialize your data in to an structure that just contains the data (no DOM, no events, etc.). You store that (however you choose), and then when you want to "load" it you deserialize it, building any DOM elements you need and hooking up any events you want at that point. JSON.stringify (present in newer browser's, or available via Crockford's JSON library if you want to support older ones) is one option for doing this serialization, as is jQuery's serialize and serializeArray methods. Or you can roll your own solution.
So in short:
Serialize just the data you want to save (via JSON.stringify, $.serialize or $.serializeArray, or your own function)
Choose from server-side (the common approach), cookies (limited space) or local storage (only on newer browsers and you'll have to solve your error) to store it
When you get it out of storage, deserialize it, building DOM elements and binding events to those elements as needed.
Hope that helps.
It took some redesign, but I managed to solve the problem:
The structure of the DIV is stored as innerHTML on onpageonload in localStorage.
The values of the fields inside the DIV are serialised and stored in localStorage.
The binding function is independent and can be called so it parses the whole DIV.
On onbeforeunload the scrips goes through the DIV as saves the "inner HTML" and the values. While loading, the scripts checks if localStorage is empty: if not, populates the DIV, loads the values and rebind the events.