Editor.js in Ruby on Rails 7 with Stimulus!

[@Deanin]

Hey everyone! This one was actually pretty quick to put together, thanks to the docs and ChatGPT haha. If you're interested, I have Active Storage working with Editor.JS as well. It's pretty easy to integrate, I'd be happy to cover that as well. Let me know. Playlist for future videos: kzbin.info/aero/PL3mtAHT_eRexIV5-61ibrzBKap1TT2Q_y

[@wakematta]

the play list doesnt have the video :)

[@Ninjujitsu]

downdooted for using chatgpt

[@pawpenggaga]

Bro is carrying the weight of the whole Rails framework in his shoulders ur an icon

[@stpaquet]

Always happy to discover new JS libs

[@SethCox-g7h]

Thanks! This came at the perfect time. Can you share your solution to integrating active storage as well? MUCH appreciated!

[@WilliamHouston-ct4eg]

Great introduction and setup! One way that I was able to simplify the form submission is by tying the submit action of the form to a function on the stimulus controller. That gets rid of the event handling in `connect`. You can also skip the prevent default on the event if the rest of the form submission is "regular". The event is handled before the request is sent to the server, so the content is added properly. There might be some issue with using async/await in event handling, but I haven't seen any problems yet. Obviously, I used slightly different controller and function names: ``` // In the JS: async addEditorContent() { const data = await this.contentEditor.save() this.contentInputTarget.value = JSON.stringify(data) } // On the form in the html: data-action='editorjs#addEditorContent' ```

[@chrise86]

Just a note on the event listeners - passing `this.saveEditorData.bind(this)` into the callback will cause a memory leak as it creates a new function every time. It would be better to use a fat arrow syntax for the method (i.e. `saveEditorData = async (event) => {}`, or bind in an initialize function (i.e. `this.saveEditorData = this.saveEditorData.bind(this)`.

[@danielb.2873]

How to migrate from ActionText to EditorJS? Keeping the already written rich texts or translating them to EditorJS

[@cporrast]

Nice I've been trying to figure out what wysiwyg editor to use for a fun project

[@kaihuang7158]

good job bro

[@umairhameed4594]

Hey Deanin, how we add the fixed title block at the top in editorjs in rails?

[@azizdevfull]

Thanks!

[@danielb.2873]

Can I use EditorJS with Tailwindcss?

[@wintanmi]

Great content here @Deanin...but I am having an issue, I have done everything and checked with your code..but i get this persistent error at my end. JSON::ParserError in Articles#index Showing /home/wintan/railsproject/winread/app/views/articles/_article.html.erb where line #9 raised: 859: unexpected token at '' Extracted source (around line #3): 1 2 3 4 5 6 module ArticlesHelper def display_content(content) parsed_content = JSON.parse(content) content_html = parsed_content['blocks'].map do |block| case block['type'] when 'paragraph' this has really delayed me for weeks now...I would be glad if you can help me please.