[LRUG] [Help Request] Completely stumped about integrating "Dante" WYSIWYG into my Rails app
Jesse Waites
jesse.waites at gmail.com
Fri Aug 5 04:25:15 PDT 2016
XKCD :: Time Travel Thesis
I
12:11 am
IFTTT Action
http://xkcd.com/1716/ IFTTT Put the internet to work for you. Turn off or
edit this Recipe IFTTT Recipe: Share your Instagrams to Facebook connects
instagram to facebook Recommended for you
I got this from the developer yesterday- will try to implement later today.
Hi , thanks for your interest in Dante.
Well , Dante doesn't know anything about your backend but it has callbacks
that you can use to handle store , uploads and even @ suggest results. In
practice you could use a button if you want to submit the changes. sending
the editor.getContent().
I'm using Dante in production , currently from this branch :
https://github.com/michelson/Dante/pull/136 , that branch handles the "auto
save" properly.
The implementation I have is something like this:
editor = new Dante.Editor(
{
api_key: "my-api-key",
el: "#editor",
upload_url: "/uploads",
debug: #{Rails.env.production? ? false : true},
store_url: "/posts.json",
store_method: "post",
suggest_url: "/search.json",
store_success_handler: successStoreHandler,
suggest_query_param: "q[term]",
suggest_handler: handleSuggest,
before_xhr_handler: handle_before_xhr_handler,
success_xhr_handler: handle_success_xhr_handler,
suggest_resource_handler: handleSuggestResource
//extra_tooltip_widgets: [btn1, btn2]
}
)
editor.start()
so , when Dante detect changes in content it will post via ajax and try to
call the functions added in before_xhr_handler (show loading for example),
success_xhr_handler (when the content has been saved)
for example, im my function I use a /posts/new endpoint for new records and
when the first save occurs I will change the url on location with push
state to the created records, and change some options on editor to point on
/edit
successStoreHandler = function(data){
// data is the json data returned by your backend
var targetUrl = "/a/" + data.id
if(window.location.pathname != targetUrl){
// setup dante defaults again pointing update url
editor.store_url = targetUrl;
editor.upload_url = targetUrl + "/uploads.json";
editor.store_method = "put";
var targetUrlForPush = targetUrl + "/edit";
window.history.pushState({url: "" + targetUrlForPush}, "edit",
targetUrlForPush);
}
}
I hope you could find this useful
cheers
Atte.
Miguel Michelson Martinez
www.artenlinea.com
Reply
Forward
What are you working on today?
Yesterday
me, Phil (3)
Ok cool. Somehow the admin layout went missing (The sidebar menu thing when
you do a search, for example) so I added it back and am going through other
pages as well replacing it if it is missing. On
On Friday, August 5, 2016, Mark Burns <markthedeveloper at gmail.com> wrote:
> Another guess is that it is not using jquery to post hence not including
> the csrf token as a param to post and rails is dropping the requests before
> they hit your app.
> On Fri, 5 Aug 2016 at 14:17, Jon Wood <jon at ninjagiraffes.co.uk
> <javascript:_e(%7B%7D,'cvml','jon at ninjagiraffes.co.uk');>> wrote:
>
>> My guess is that yes, it regularly posts as you make changes. You should
>> be able to see if that's the case by watching the logs in
>> log/development.log for requests to your save endpoint.
>>
>> On Fri, 5 Aug 2016, 08:12 Jesse Waites, <jesse.waites at gmail.com
>> <javascript:_e(%7B%7D,'cvml','jesse.waites at gmail.com');>> wrote:
>>
>>> Hi everyone,
>>>
>>> This may be a little long, please bear with me.
>>>
>>> I have a dead simple hobby rails app spun up with Devise. I have users,
>>> users have many Stories. Those associations are done, easy peasy. I am now
>>> trying to integrate a Medium.com style WYSIWYG editor called Dante into a
>>> hobby app.
>>>
>>> This is the editor:
>>> https://github.com/michelson/Dante
>>>
>>> This is the demo in action:
>>> http://michelson.github.io/Dante/
>>>
>>> I have managed to get the editor on the page, but for the life of me I
>>> cannot seem to figure out how to get it to actually save the content.
>>>
>>> This is a link to my repo:
>>> https://github.com/piratebroadcast/bckpckrs/
>>>
>>> The integration of the editor is on this page:
>>> https://github.com/piratebroadcast/bckpckrs/blob/
>>> master/app/views/stories/new.html.erb
>>>
>>> The only reference anywhere online I've found is *me* trying to figure
>>> out how to integrate this thing almost a year ago:
>>> http://stackoverflow.com/questions/33656321/integrating-dante-ysiwyg-
>>> medium-style-editor-into-a-rails-form
>>>
>>> There, a developer answers that I should somehow integrate the content
>>> from the editor into a simple_form form. I'm not so sure about that, as the
>>> editor *Seems* to have an upload URL and can so it itself.
>>>
>>> <script type="text/javascript"> editor = new Dante.Editor( { el: "#editor", upload_url: "/images.json", //it expect an url string in response like /your/server/image.jpg or http://app.com/images/image.jpg store_url: "/save" //post to save } ); editor.start() </script>
>>>
>>>
>>>
>>> I am completely baffled as to how the system would know when you are
>>> done "writing" your story into the editor. Does it POST constantly?
>>>
>>> Any and all tips would really be appreciated.
>>>
>>> Thank you!
>>>
>>>
>>>
>>> --
>>> Jesse Waites
>>> Web Developer
>>> JesseWaites.com
>>> _______________________________________________
>>> Chat mailing list
>>> Chat at lists.lrug.org
>>> <javascript:_e(%7B%7D,'cvml','Chat at lists.lrug.org');>
>>> Archives: http://lists.lrug.org/pipermail/chat-lrug.org
>>> Manage your subscription: http://lists.lrug.org/options.
>>> cgi/chat-lrug.org
>>> List info: http://lists.lrug.org/listinfo.cgi/chat-lrug.org
>>>
>> _______________________________________________
>> Chat mailing list
>> Chat at lists.lrug.org <javascript:_e(%7B%7D,'cvml','Chat at lists.lrug.org');>
>> Archives: http://lists.lrug.org/pipermail/chat-lrug.org
>> Manage your subscription: http://lists.lrug.org/options.cgi/chat-lrug.org
>> List info: http://lists.lrug.org/listinfo.cgi/chat-lrug.org
>>
>
--
Jesse Waites
http://JesseWaites.com
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.lrug.org/pipermail/chat-lrug.org/attachments/20160805/a7975f92/attachment-0002.html>
More information about the Chat
mailing list