michelson / dante2 Goto Github PK
View Code? Open in Web Editor NEWA complete rewrite of dante editor in draft-js
Home Page: https://michelson.github.io/dante2/
License: Other
A complete rewrite of dante editor in draft-js
Home Page: https://michelson.github.io/dante2/
License: Other
In my settings, I only see "save_handler" is working (console.log).
But doesn't save by "store_url" or "url" (no requests to server). What's wrong? Help please.
document.addEventListener('DOMContentLoaded', function () {
editor = new Dante({
upload_url: "/uploads/new",
store_url: "/api/save",
el: "app",
content: JSON.parse(window.PocData),
debug: true,
data_storage: {
interval: 2000,
url: "/store",
save_handler: function (ctx, content) {
console.log("SAVING DATA!!");
console.info({
editor_content: JSON.stringify(content),
text_content: ctx.getTextFromEditor(content)
});
}
},
})
editor.render()
})
I want to insert two placeholders like :-
Title
Write your text here.
How can I do that?
As far as I know, for showing articles or post, we needed to use dante2 editor in non editable mode for rendering the html, which doesn't works good for SEO optimizations. One needed to use server side rendering for proper SEO optimization. Is there any suggested way for SEO optimation of the articles or post? or Can someone please point me to the code where dante2 is converting the json markups to html, so that I can use in server side rendering?
When adding a link it sends requet to
http://api.embed.ly/1/extract?key={KEY}&url={URL}&scheme=https
How can i change it to something
http://custom.com/url?blahblah={}
Could you point out the line of code ?
How do i update the model onChange ?
Following https://michelson.github.io/dante2/doc.html, I am using new Dante({ el: "app"})
to initialise the Editor.
Thank You!
Which one is better this one or github.com/yabwe/medium-editor/ ?
Would it be, or is it possible, to send the editor content json string from to a function rather than posting it to a URL?
Thanks!
There are errors right now if we run basic eslint on this project so I think it would be a good idea to add eslint and make sure it passes before commits are getting pushed.
Since you said the editor is based on data and not dom i thought how will i able to change the size ( font, image/embed size etc ) without changing the look of how the post was written.
As you see if you change the font-size of .postContent
the paragraphs get broken.
Dante Normal(18px)
Dante Broken(14px)
Dante Expected(transform:scale(.8))
Using transform scale is a workaround but its not good to use it because text gets blurred. so i wonder if there is any other way out there ?
I've set up an account with Embed.ly and added their API key to my application.
if $("[data-editor-content]").length > 0
$data = $("[data-editor-content]").data()
window.editor = new Dante
el: "editor"
api_key: $data.apiKey
read_only: !$data.editable
content: $("[data-editor-content]").data("editor-content")
upload_url: $data.uploadUrl
data_storage:
failure_handler: -> console.log("Failure")
success_handler: -> console.log("Success")
interval: 1000
url: $data.dataStorageUrl
method: "PATCH"
xhr:
before_handler: ->
console.log("Before xhr")
success_handler: ->
console.log("Success xhr")
error_handler: ->
console.log("Error xhr")
editor.render()
When I inspect my editor I can see the API key in the options
console.log(editor.options.api_key) # => "[mykey"]
But when I try to embed a URL, I see this error message
Invalid `key` provided: undefined. To find your key, log into https://app.embed.ly -> API.
And the same thing is reported in my console.
[Error] Failed to load resource: the server responded with a status of 401 (Unauthorized) (extract, line 0) https://api.embed.ly/1/extract?key=undefined&url=https://vimeo.com/197412946&scheme=https
Any ideas?
Hi
the placeholder for the link text doesn't seem to be configurable up to now?
Thanks,
Georg
I've tried upgrading to version 0.3.2 in Rails, but I just get an error message in the JS console.
My code hasn't changed at all from the previous version I had installed.
The errors I'm seeing are:
[Error] TypeError: undefined is not an object (evaluating 'React.createElement')
(anonymous function) (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:16608)
__webpack_require__ (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:52)
(anonymous function) (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:8015)
__webpack_require__ (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:52)
(anonymous function) (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:5747)
__webpack_require__ (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:52)
(anonymous function) (Dante2.self-a6f6602cd952debeeaa021dd671d18405046c75127e547878b7fe1e580aaf4cd.js:64)
(anonymous function) (Dante2.self-a6f6602cd952debeeaa021dd671d18405046c75127e547878b7fe1e580aaf4cd.js:65)
__webpack_require__ (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:52)
(anonymous function) (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:121)
__webpack_require__ (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:52)
(anonymous function) (Dante2.self-a6f6602cd952debeeaa021dd671d18405046c75127e547878b7fe1e580aaf4cd.js:40)
(anonymous function) (Dante2.self-a6f6602cd952debeeaa021dd671d18405046c75127e547878b7fe1e580aaf4cd.js:41)
__webpack_require__ (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:52)
(anonymous function) (Dante2.self-a6f6602cd952debeeaa021dd671d18405046c75127e547878b7fe1e580aaf4cd.js:18)
__webpack_require__ (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:52)
webpackJsonpCallback (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:23)
(anonymous function) (Dante2.self-a6f6602cd952debeeaa021dd671d18405046c75127e547878b7fe1e580aaf4cd.js:11)
webpackUniversalModuleDefinition (Dante2.self-a6f6602cd952debeeaa021dd671d18405046c75127e547878b7fe1e580aaf4cd.js:9)
Global Code (Dante2.self-a6f6602cd952debeeaa021dd671d18405046c75127e547878b7fe1e580aaf4cd.js:10)
[Error] ReferenceError: Can't find variable: Dante
(anonymous function) (posts.self-a0a4eae2fae059bfeabae18f566b848ed4a9166e8c9a5cf6b56b78fc02c31165.js:12)
dispatch (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:5227)
handle (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:4879)
dispatchEvent
dispatch (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js:6:899)
notifyApplicationAfterPageLoad (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js:6:32467)
pageLoaded (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js:6:30855)
(anonymous function) (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js:6:27069)
[Error] ReferenceError: Can't find variable: Dante
(anonymous function) (posts.self-a0a4eae2fae059bfeabae18f566b848ed4a9166e8c9a5cf6b56b78fc02c31165.js:12)
dispatch (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:5227)
handle (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:4879)
dispatchEvent
dispatch (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js:6:899)
notifyApplicationAfterPageLoad (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js:6:32467)
visitCompleted (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js:7:332)
complete (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js:6:22637)
(anonymous function) (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js:6:24367)
(anonymous function) (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js:6:26880)
[Error] TypeError: undefined is not an object (evaluating 'q.clear')
e (bundle.js:152)
I am not able to generate dante.css, dante.js, dante-vendors.js for use in a separate app, however I am able to use it with the demo cloned in local.
Also there are not guidelines on how to generate those?
Is there any docs regarding that?
P.S: I am not a node developer, and want to use it in my python project, just as css, and js urls, is that possible?
It would be awesome to have required blocks as a feature.
If you visit https://asd.reimertz.co/create you see that I have Title, subtitle and author as a starting point but a lot of people probably just remove these right now.
For consistency, that sucks pretty badly since I am planning on building an explore feature.
ping @michelson
Hello was wondering how to upload images ๐
The text copied (cmd+c) from the editor content is not getting pasted (cmd+v) while copied text from outside is working fine.
Hi all,
In my application I'm using Multer for file uploads (and compression with TinyPNG) to S3, that works fine. Now, I'm looking for a way to use Multer and TinyPNg to optimize, store and return a link to the Dante editor for displaying images in blogs created by users of my application.
I saw some nice implementations of the Dante editor with, for example, imgur.com (https://asd.reimertz.co/create), so I'm pretty sure it should work with S3 as well. I just don't really know where to start here..
Any help would be highly appreciated!
Kind regards,
Lothar
I want to send authorization token for auth purpose as well as enable below options in each request fired by dante.
xhrFields: {
withCredentials: true
},
crossDomain: true
how do i get the json state in order to save it in backend ? i dont find it in docs
immutable
is used as a dependency , but there's no record in package.json
I would love to know about, or to suggest, a function that could be called in order to immediately send the editor content data to the url endpoint stored with the Dante object.
The regularly timed storing works well unless the user quickly navigates away from the page. In that case the user may return to the document later and find that not all of their changes have been saved. If the user can initiate saving themselves before navigating away they can be assured the document will be up to date when they return to it.
I would like to know like during the process of development of the editor, is there any documentation available in which its explained that what parameters are used in json and what all things can i use to convert it back to html?
After initialising Dante (like so):
editor = new Dante({
el: "app",
content: JSON.parse(content),
...
});
editor.render();
How can you change the content and force Dante to render again?
I tried running editor.editor.setPreContent(JSON.parse(newContent));
and editor.options.content = JSON.parse(newContent);
followed by editor.editor.render();
and editor.render();
, to no effect.
I looked at app/components/App.cjsx but I couldn't figure it out.
Thanks for your help!
Currently, editor is sending editor_content and text_content on store url, after saving the json i.e. editor_content in backend. How to render it on another html page to show the article to the user?
According to the docs, what am I able to know is we can render in editor using window.PocData but there is nothing in docs how to render it in another html page. Thanks in advance for your help.
Hi,
it seems the String
"Write Caption for image (Optional)" is hardcoded ... ?
Best,
Georg
In Rails, protect_from_forgery with: :exception
expects there to be a CSRF
meta tag content.
How can I configure this to be sent with the autosave post?
I've tried the following, but it doesn't work since there's no xhr
argument for the before_handler callback
$data = $("[data-editor-content]").data()
editor = new Dante
el: "editor"
read_only: !$data.editable
content: $("[data-editor-content]").data("editor-content")
upload_url: $data.uploadUrl
data_storage:
failure_handler: -> console.log("Failure")
success_handler: -> console.log("Success")
interval: 1000
url: $data.dataStorageUrl
method: "PATCH"
xhr:
before_handler: (xhr) ->
console.log("This raises an exception")
It would be great if calling dispatchChangesToSave could result in the same xhr handlers (before_handler, success_handler) being called so it's possible to keep the user updated on the article's status just as it is with automatic saving.
I tried this script for setting content in editor, but didn't got success, below is the script :-
$.getJSON("http://127.0.0.1:8081/fetch/", function(data){
window.PocData = data;
console.log(data);
document.addEventListener('DOMContentLoaded', function(){
editor = new Dante(
{
el: "app",
content: data,
upload_url: "http://127.0.0.1:8081/upload/",
data_storage: {
url: "http://127.0.0.1:8081/store/"
}
}
)
editor.render()
});
})
and below is the data format which I am fetching using getJSON :-
{u'text_content': u'sheesh mohsin', u'editor_content': u'{"entityMap":{},"blocks":[{"key":"46hh7","text":"sheesh mohsin","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}]}'}
Please provide more details.
#Gemfile
gem 'dante2-editor'
gem 'react-rails' #, '~> 1.4.0'
#application.js
//= require jquery
//= require jquery_ujs
//= require react
//= require 'dante-vendors.js'
//= require 'Dante2.js'
//= require_tree .
#view
<div id="dante2-editor"></div>
<script type="text/javascript">
new Dante({ el: "#dante2-editor"});
</script>
Console shows the Dante object being created but not showing. What am I missing?
Right now, what I can see is, dante is sending the complete data on store url , is there any way to send only the changes did by the user and add it up in the backend? so that we can save some bandwidth from user side? and alternatively improve the user experience?
Awesome job on this new version. Obviously this version of Dante can be integrated with react as easily as any other standard JavaScript module but given that it was built in react in the first place, I was imagining there would be a component to import and work with react directly. Any thoughts on this?
Just wonder the reasoning behind using coffeescript rather than es6 transpiling with babel?
It seems the majority of the community has moved away from coffeescript.
I am about to get Dante to work as a React component but the issue is that I have to have a coffeescript loader to be able to import it (except some weird issues with your fonts, but I'm about to fix that as well).
Is there a callback method I can define when an image is deleted from a post?
Otherwise, I'll likely end up with a lot of images on my server that aren't being used.
Not compatible with webpack v2.2+
please check this: webpack/webpack#4039
When im uploading a picture what is the thing should i return from server ? the uploaded url what format ?
Hi, anyway we can change the menu buttons icon/text?
Also, is it possible to remove some functionality that we don't need?
Hi Miguel.
1- I using this ES6 modules. I want get content from editor with editorState. How do I access editorState?
2- draft-js default way for focus when page loads, does not work in Dante.
In the original medium editor people can highlight some text which is very useful.
So it would be awesome to add that feature.
moreover i was thinking to it would be cool if instead of one color highlight it could get a list of ['#hex','#hex2']
colors and toggle the color
The toolbar once you select some text is not positioning correctly. It shows up below the selected text.
Any ideas on how this can be fixed? Reproducible here: https://github.com/shkbahmad/Dante2RailsSample
Can this editor be integrated with angular(which framework's name has changed from angular2) project?
A project using angular-cli to build apps.
Right now, everything gets built into /docs
which is mainly for the documentation page.
I think this project needs to look at how other React-based libs are doing it. Most of them build several builds for
npm/bower/distributable for window.Dante
and es for import { Dante } from 'Dante2'
.
Dante2 looks great but I can't work out how to use it in my existing Node site. I'm far from a Node expert (I'm much more familiar with Python and PHP).
I've installed the module, but now what? You have an example of how to initialise it:
new Dante({
upload_url: "http://localhost:9292/uploads/new",
store_url: "http://localhost:3333/store.json",
el: "app"
})
And I'm guessing I need to have an element like this in my page:
<div id="app"></div>
And will need to have something (what?) happen when requests are made to those two URLs.
But obviously I also need to include some Dante2 JS and CSS files somewhere, somehow. Are there instructions for what else I need to do?
Sorry if I sound stupid - I don't see anyone else here having this problem - but I'm baffled!
When Inserting a Video the Caption is the URL of the Video (minus the "h" from http://) ..
Tested with:
https://www.youtube.com/watch?v=2hpVVv493Uw
Hi,
is there a way to disable the DanteImagePopover tooltip?
we don't need/want the alignment chooser in our project..
Thanks,
Georg
Images/iframes etc can be aligned to left. But can they be aligned to right siide ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.