Using summernote and tinymce, will try editor js but can you make a vid on how to handle images upload with wsywig editors cuz config images makes much problems for most of us
@@frikishaan does editor.js allow to upload images? As ckfinder/elfinder? I use ckeditor + elfinder with its laravel package, but it's a pain every time
Most comments show misunderstanding of purposes and advantages of using editorjs. The main difference of editorjs comparing with others - that it provides not HTML text, but JSON structure that describes your page. What does it mean for you? It means that you can convert this structure to presentation layer as you want! You can convert it to plain HTML on server-side-rendering, generate DOM on the fly with JS, or convert it to native components in your mobile app. It's the main purpose to use editorjs. Another cherry on the pie is writing your custom tools for this editor easily. If these features don't impress you - then don't shoot your leg and use familar editor like TinyMCE
I was inspired by editor.js. It looks really cool editor to me. I tried to use it for my next project, but I was disappointed. Let's anticipate the shortcomings that are not visible on the editorjs surface. 1. Alignment is impossible. 2. Image resizing is impossible. 3. Among the people who made plug-in in this open source, many Github owners have entered sleep mode. 4. There are many problems with server side rendering. 5. There are many bugs. Simply, it's not stable for real projects. In my case I bleed a lot while trying to use this editor in the new service. But editor JS is a really cool project. I am grateful for their hard work and I am hoping this project will grow well.
I've tested. But seems it's impossible to paste an image inside and to make an article. It works, but not meets my needs at this time. Wish it will in some time
Hello. Thanks for putting me on the path to EditorJS. I am using it in one of my projects now. Will you possibly make a video to use the same editorJS to edit and update either in vanilla js or React? That would be incredibly helpful. Thank you.
I struggled with this. I found if you remove the first line import EditorJS from '@editorjs/editorjs'; in the js file and follow the rest of this tutorial it will work.
using CKEditor in some custom projects most of the time. also stripping most of the features/plugins from it though. you don't want to let users have "font family" dropdown, so they could make all titles use "Comic Sans" :D (ofc they can modify html-source directly, but usually regular admin never does that)
It's constantly giving me an error when I try to import "import EditorJs from '@editorjs/editorjs';" "Uncaught SyntaxError: Cannot use import statement outside a module" I have no idea what to do.
you need webpack + babel or whatever to transpile your js. import is new javascript syntax. just use old import javascript from cnd, if you don't want the hassle, like
Hey guys, I need help. I faced with such issue: Uncaught SyntaxError: Cannot use import statement outside a module. Searching in google turned out to be useless. I'll be very grateful for the any help.
editor.js only works with and not with textrea so how to read output of editor.js? do i need to read as .innerhtml ? because its creating lot of nonsense code when i read it like inner html
In angular 9 gives me the following error. ERROR in node_modules/@editorjs/editorjs/types/api/block.d.ts:2:25 - error TS2307: Cannot find module '../../src/types-internal/block-data'. Helpme pls
Hey...check out my package. This covers the rest of the workflow...by providing a render function to convert your saved blocks into flexible React components www.npmjs.com/package/editorjs-react-renderer
Yeah you can parse to html in server side whenever an editor performs a save. I.e. having 2 data one html and one editor.js and load this editor.js data whenever a user or an editor edits
not saying this is bad, but personally i find "ckeditor" better, i don't know it just seams easier, and i don't know how this editor saves the text you made but in ckeditor if you save a heading1 title it will be saves as "Title text meaning you can really easy save it in a database and just paste it back in to html if you're creating a blog or something
Thanks for making me aware of this! I’m currently writing an app that stores content via Markdown syntax but I know things will get tricky when time comes to add internationalisation and I need to parse content text, translate it and preserve formatting. This looks like a much nicer solution and the user doesn’t need to know Markdown! Thanks
Can anyone ans my question. Can i control svg animation which is made in after effect then convert to json. Can i control this animation by html css javascript?
Suppose i made animation and convert to json in web can i change color of my animation, can i change some part of my animation longer, can i change sunglass of my character with css javascript directly by code?... Tnk you
@@coolrezaul I haven't tried manipulating the styles of an animation made with after effects using css and javascript. I've only used lottie-web to display and control the play state of an animation so I'm not sure.
Thank you very much for doing this. Any idea how to pick up unique code blocks like {{first_name}} in the editor? I am writing an email markdown editor and would love to allow the users include blocks like {{first_name}}. Any idea how to go about this?
Very interesting to see your approach in getting sorting through the data. I'm using contentful and it is similar data structure but a pain to filter and then sort. PS I'm just exporting the json data from contentful not using the content api
One thing that doesn’t seem to be touched on the Editor.js documentation is rendering on the final page. Seems this is left entirely up to the consumer?
Yes, this is the point "partly". I think they should have included at least a basic transformer function but hey publish it on github and others will be happy ;)
The editor has a method (or property, I don't remember right now) to get the HTML content being displayed on the editor itself, so you could store that in your database (alongside the json structured form of the content) then use the stored HTML to display on the front end and the stored json for the backend editor.
I want to give an edit button after the user has completed the blog for future updates to the same blog. So, once the user clicks on edit, he/she can edit the blog the same way we can create it. If anyone has some reference or any ideas on how to implement this. Please help. Thanks
Maybe next time you can tell at the beginning of the video for whom this video is meant to be. Wether its designers or developers and for what level. Thank you.
No. A headless CMS is a CMS without user interface. It is just a content repository that you can interact with via web services. Now, EditorJS can be used to create an interface that interacts with a headless CMS, or anything else. Possibilities are endless.
There is a React component for Editor.js from a third-party author: github.com/stfy/react-editor.js. For Vue.JS: github.com/changjoo-park/vue-editor-js
I use ckeditor v4.x and my opinion is stil better then this. Because free and developers can add lots of usefull plugins. For example; Autosave plugin. This plugin can do automatically save your data in local storage. if your user session time out and you still don't save your content, this plugin is your saver. If Editor.js can have options html encode, like this etc., i can use in my projects. Thank's for the video.
Which content editor do you use for your CMS? Will you switch to Editor.js? Let us know, and subscribe!
Using summernote and tinymce, will try editor js but can you make a vid on how to handle images upload with wsywig editors cuz config images makes much problems for most of us
@@Dhruvsaxena19 +100. That's pain)
@@frikishaan does editor.js allow to upload images? As ckfinder/elfinder? I use ckeditor + elfinder with its laravel package, but it's a pain every time
@@frikishaan thanx, that's important. Will test at night
Really nice.
Will check it out.
Most comments show misunderstanding of purposes and advantages of using editorjs. The main difference of editorjs comparing with others - that it provides not HTML text, but JSON structure that describes your page. What does it mean for you? It means that you can convert this structure to presentation layer as you want! You can convert it to plain HTML on server-side-rendering, generate DOM on the fly with JS, or convert it to native components in your mobile app. It's the main purpose to use editorjs. Another cherry on the pie is writing your custom tools for this editor easily. If these features don't impress you - then don't shoot your leg and use familar editor like TinyMCE
Great explanation
That gutenberg like was exactly what I was looking for.
I was inspired by editor.js. It looks really cool editor to me. I tried to use it for my next project, but I was disappointed.
Let's anticipate the shortcomings that are not visible on the editorjs surface.
1. Alignment is impossible.
2. Image resizing is impossible.
3. Among the people who made plug-in in this open source, many Github owners have entered sleep mode.
4. There are many problems with server side rendering.
5. There are many bugs.
Simply, it's not stable for real projects.
In my case I bleed a lot while trying to use this editor in the new service.
But editor JS is a really cool project. I am grateful for their hard work and I am hoping this project will grow well.
It didn't. still garbage
@@user-zl5gi8sv7u any recommendation nowaday? :P
I've tested. But seems it's impossible to paste an image inside and to make an article. It works, but not meets my needs at this time. Wish it will in some time
But you can create plugin to make inline tool
Have you found a way to add an image inside??
In world of wysiwyg, ckeditor, quill and others, anything less complex and more easily customizable is a a relief
Wow literally just found out about this yesterday
Someone deserves a raise in marketing department
Yeah
thanks for a great lesson, please how can i achieve this on vuejs 3, am new on vuejs
Finally a better alternatives to ckeditor
So cool man! Very usefull tutorial, keep on the good work. Wow! This tool is revolutionary!
having trouble implementing the upload and deletion of images with DraftJS. Definitely trying out this one.
Definitely gonna use it today.....
‼ Could not load existing sourcemap of "node_modules/@editorjs/embed/dist/bundle.js"
Not working for me=(
Me neither. For me, it throws that for the list bundle as well...
Wow this is really cool, of course I will switch to this. Looks like this is how workflowy was built .
Gary can you please link everything you use in the description, at least the main subject?
Hello. Thanks for putting me on the path to EditorJS. I am using it in one of my projects now. Will you possibly make a video to use the same editorJS to edit and update either in vanilla js or React? That would be incredibly helpful. Thank you.
Found the right video at the right time...thanks a lot...
Thank you very much. I have subscribed dude
Thanks for a video. Can it be full alternative for ckeditor and elfinder? To upload and link images to an article?
Great video!
I am definitely gonna play with this a bit and see how it would work with Mongo DB and Firebase DB.
@@sumanthsanathi6269 No, not yet. Gonna play with it on a demo CMS. Have you?
I struggled with this. I found if you remove the first line import EditorJS from '@editorjs/editorjs'; in the js file and follow the rest of this tutorial it will work.
Exactly what I was looking for thanks!!!
how to handle images width mongodb and express. please make a video for it
would love to see a follow up, on parsing the frontend
Thanks for the tutorial!! subscribed :)
Me staring at video to understand : ಠ_ʖಠ
After 10 minutes ad pops up saying : " aight I'm gonna give you three tips to improve yourself ..."
I realy fan of your videos, and your thumbnails as well 😃
using CKEditor in some custom projects most of the time. also stripping most of the features/plugins from it though. you don't want to let users have "font family" dropdown, so they could make all titles use "Comic Sans" :D (ofc they can modify html-source directly, but usually regular admin never does that)
Very helpful, thanks.
Hi Gary! can you do a tutorial on chart.js? thanks in advance Gary
Great, i was looking for something like this
try CK Editor
Literally dying at ".....coub.....?"
This is great. Thanks
Would it be possible/good idea/bad idea to connect an editor.js API to a Django backend?
Thumbs up for the topic.
Uncaught SyntaxError: Cannot use import statement outside a module ...... help?
Great and awesome, the future of editor, thanks a million your stuff
Nice endcard music
I've been looking for something exactly like this - thanks!
It's constantly giving me an error when I try to import "import EditorJs from '@editorjs/editorjs';" "Uncaught SyntaxError: Cannot use import statement outside a module"
I have no idea what to do.
you need webpack + babel or whatever to transpile your js. import is new javascript syntax.
just use old import javascript from cnd, if you don't want the hassle, like
Hey guys, I need help. I faced with such issue: Uncaught SyntaxError: Cannot use import statement outside a module.
Searching in google turned out to be useless.
I'll be very grateful for the any help.
same problem, did you solved the issue?
@@kongbullies6709 yea use webpack
how to convert output data from editorjs to html format
how do i use this in a node app? say i have a next.js app
How i can save EditorJS data if I use iu as an input field in my own form?
editor.js only works with and not with textrea so how to read output of editor.js? do i need to read as .innerhtml ? because its creating lot of nonsense code when i read it like inner html
great solution, i like it
Nice ending music :)))
you are life saver thank u
What about Quill.js?
that is not customizable editor, fro example I can't change the up and down arrows icons and I can't style the popup, I'm I, right?
if i use it with angular, so how do i can run it
In angular 9 gives me the following error. ERROR in node_modules/@editorjs/editorjs/types/api/block.d.ts:2:25 - error TS2307: Cannot find module '../../src/types-internal/block-data'. Helpme pls
How to convert the result into HTML instead of Json, for SEO friendly blog post.
Hey...check out my package. This covers the rest of the workflow...by providing a render function to convert your saved blocks into flexible React components
www.npmjs.com/package/editorjs-react-renderer
Will this saved in our database the same way we edit and type it ?
Yeah you can parse to html in server side whenever an editor performs a save. I.e. having 2 data one html and one editor.js and load this editor.js data whenever a user or an editor edits
Should’ve left a link to editorjs. I know we can Google it, but it’s more like showing appreciation to it.
It's remind me Notion app, and that's good !
Do you have a list of the VSC plugins you're using? Thanks! :)
not saying this is bad, but personally i find "ckeditor" better, i don't know it just seams easier, and i don't know how this editor saves the text you made but in ckeditor if you save a heading1 title it will be saves as "Title text meaning you can really easy save it in a database and just paste it back in to html if you're creating a blog or something
Thanks for making me aware of this! I’m currently writing an app that stores content via Markdown syntax but I know things will get tricky when time comes to add internationalisation and I need to parse content text, translate it and preserve formatting. This looks like a much nicer solution and the user doesn’t need to know Markdown! Thanks
Actually just noticed that text in Editor.js can still have inline formatting so some format parsing would still be required for i18n.
Can we use table tool in this editor ?
This was useful. Do more of these kinds. Libraries useful in web development, rather than design videos.
"Design Course"
@@michrisoft 😂
you should do a more updated version of this video using ionic 5
Thank you so much for this video.
Can anyone ans my question.
Can i control svg animation which is made in after effect then convert to json. Can i control this animation by html css javascript?
github.com/airbnb/lottie-web
Suppose i made animation and convert to json in web can i change color of my animation, can i change some part of my animation longer, can i change sunglass of my character with css javascript directly by code?... Tnk you
@@coolrezaul I haven't tried manipulating the styles of an animation made with after effects using css and javascript. I've only used lottie-web to display and control the play state of an animation so I'm not sure.
@@coolrezaul aescripts.com/bodymovin/ . Check this out
Tnk you both of you. I think we can with bodymovin
Thanks 🙏
Can you pleaaase show how to implement this in nuxt?
Can we use this with WordPress theme development
Thank you very much for doing this. Any idea how to pick up unique code blocks like {{first_name}} in the editor? I am writing an email markdown editor and would love to allow the users include blocks like {{first_name}}. Any idea how to go about this?
Very interesting to see your approach in getting sorting through the data. I'm using contentful and it is similar data structure but a pain to filter and then sort. PS I'm just exporting the json data from contentful not using the content api
Thanks for the video :-*
I'm thinking to implement this for remployed.com, for my users profiles.
how can i upload image with it
Can I use it in wordpress?
so this is what jupyter use?
Can I use gulp?
One thing that doesn’t seem to be touched on the Editor.js documentation is rendering on the final page. Seems this is left entirely up to the consumer?
Yes, this is the point "partly". I think they should have included at least a basic transformer function but hey publish it on github and others will be happy ;)
The editor has a method (or property, I don't remember right now) to get the HTML content being displayed on the editor itself, so you could store that in your database (alongside the json structured form of the content) then use the stored HTML to display on the front end and the stored json for the backend editor.
can you export to pdf with Editor.js?
Reminds me of the editor on medium for submitting blogs
I want to give an edit button after the user has completed the blog for future updates to the same blog. So, once the user clicks on edit, he/she can edit the blog the same way we can create it. If anyone has some reference or any ideas on how to implement this. Please help. Thanks
I remember my painful struggle of finding a good working editor during one of my project years ago. Thanks to editor.js team, those days are over.
lol ya right
Uncaught SyntaxError: Cannot use import statement outside a module ; Please fix bug fo me. Thank you!
are you running it with node? if not you don't need to import it, just reference the editor.js file before your index.js file
this is what I want
Can we use this with React.js??
can this be used in react-native for both ios and android @DesignCourse
Can this be customized more?
Great tutorials
Cool, How to turn this content to PDF ?
How can I add header 2 H3....?
thank you
Maybe next time you can tell at the beginning of the video for whom this video is meant to be. Wether its designers or developers and for what level. Thank you.
So this is what notion uses?
Thank you. Is this called headless CMS ?
No. A headless CMS is a CMS without user interface. It is just a content repository that you can interact with via web services. Now, EditorJS can be used to create an interface that interacts with a headless CMS, or anything else. Possibilities are endless.
anyone know how to make drag and drop img on this editor?
Could it work with react?
There is a React component for Editor.js from a third-party author: github.com/stfy/react-editor.js. For Vue.JS: github.com/changjoo-park/vue-editor-js
integrating this with wordpress as a front end editor ? Is that possible. This can be a paid gig if someone can do this for me.
I use ckeditor v4.x and my opinion is stil better then this. Because free and developers can add lots of usefull plugins. For example;
Autosave plugin. This plugin can do automatically save your data in local storage. if your user session time out and you still don't save your content, this plugin is your saver.
If Editor.js can have options html encode, like this etc., i can use in my projects. Thank's for the video.
Inspired by Gutenberg ?
Is this notion editor?)
Does it have a Vue project?
There is a community-driven wrapper: github.com/changjoo-park/vue-editor-js
Thank you