How can I programmatically set content? about dante HOT 7 CLOSED

Hi @nesvet ,
the easiest way should be a $(editor.el).html("hello") . where editor is your Dante.editor instance.

could you go further on explaining what are you trying to do in order to be more helpfull?.

from dante.

Hi, @michelson.

That's enough, thank you.

from dante.

Doing$(editor.el).html("hello") works with the contenteditable element but destroys the editor in my case (eg. after calling it layout is messed, no more tooltips, no more + button on new line etc..) and if i try to call .restart() or .render() i get the initial values and not the content i'm trying to set

I'm trying to save getContent() on history.pushstate and restore it on browser back button using popstate

from dante.

Ok found the working way at current state of API:

$(dante_editor.el).find(".section-inner").html("Restored html")

What about an API for this feature ? I'll open an issue for this.

Update: even this solution gives me problems with tooltips disappearing after a bit of editing. The hack I'm using now is to completley overriding the editor instance after a content editable update:

function setDanteContent(html){
     jQuery("#editor").html(html);
     dante_editor = new Dante.Editor(
            {
                api_key: "omissis",
                el: "#editor",
                upload_url: "/ajax/upload",
                store_url: "/ajax/saveItemBody" + "?id=" + window.editingItemId,
                suggest_url: "/ajax/suggest",
                store_success_handler: dante_store_success,
                debug: false
            }
    );
    dante_editor.start();
}

from dante.

Update: I'd to add jQuery("#editor").unbind(); to my hack to make it work properly (a sort of raw destroy of event handlers bound with _.bind(this...) in order to avoid multiple invokation if re-initialized in this way

function setDanteContent(html){
    jQuery(dante_editor.el).unbind();
    jQuery(dante_editor.el).html(html);

    dante_editor = new Dante.Editor(
            {
                api_key: "omissis",
                el: dante_editor.el,
                upload_url: "/ajax/upload",
                store_url: "/ajax/saveItemBody" + "?id=" + window.editingItemId,
                suggest_url: "/ajax/suggest",
                store_success_handler: dante_store_success,
                debug: false
            }
    );
    dante_editor.start();
}

from dante.

Hi , Dante does not make many assumptions on how to set content , it just initialize the content present on $el. When I want to display previous content, i just use something like this

<div id="editor">
  <%= partial "readme.md" %>
</div>

in the same way, if you are going to initialize content from js, you must set it first to the DOM and then initialize Dante. it should work fine.

I will use a "js class" to avoid re-initialization

class MyEditor 
   constructor: ->
      @editor = new Dante.Editor ...

   render: ->
      @editor.start()

   other_func: ->
     @editor.someThingElse()

then somewhere in the code

$(document).ready ()->
  ed = MyEditor.new
  ed.render()

from dante.

Yes, but I need to be able to do it more and more times in the same 'single page application', same DOM, changing just the editor content, as I may want to load different articles using PJAX navigation, different templates via AJAX (e.g. writer picks a template for an article format), localStorage API (e.g. draft saved just locally), history API ( undo/redo with browser back buttons without reloading the page), always without reloading the webpage or re-initializing the editor.

With my current hack I was able to implement "history API ( undo/redo with browser back buttons without reloading the page)" and I'm going to implement the rest too, it works, anyway having to 'reinstanciate' the editor from scratch I not a thing that I like much for performance and memory garbage collection, i don't sleep well knowing that happening behind the scenes (see also: #121 ) while our writers use it ;).

Can you please consider trying to implement a setContent() #149 method in the Dante base class?

You know deeply how Dante works internally, maybe it's easy for you to avoid the issue I get if I use .html / innerHTML, and if not please let us know why it's hard, maybe other contributors can help you to patch the issues or side-effects of a first PR.

I think other developers too may find this useful, please consider some testing about dynamically changing the content on your Dante editor, it's a pity that such awesome product is made just for 'server side rendered pages' and not also for 'single page applications' (see: 'appshell' paradigm, suggested even by Google ).

Anyway I apologize if I 'ask' that, I don't speak well english so maybe you can read me aggressive while I'm not:
your work is awesome and impressing, thank you for open sourcing it, I know we cannot pretend more, I'm issuing those request just with the intention to help you as we all know, there's always room for improvements, consider it just my feedback, of course not a complain, this editor is already perfect for me, but can be "more perfect" :) !

from dante.