Webwide is the inclusive discussion community for web designers, developers & makers.

Whether you're an enthusiast, in training, or a seasoned pro – you'll fit right in at Webwide. Creating an account is fast, easy and completely free so you can start participating right away.

Read our Code of Conduct

Free Membership Benefits

  • Participate in hundreds of interesting discussions
  • Network with industry peers and make new connections
  • Show off your own projects and relevant content
  • Get help and feedback for your coding and designs
  • Buy and sell services and resources in the marketplace
  • Participate in our friendly community challenges
  • Earn trophies and work your way up our leaderboards
  • Enjoy exclusive Webwide member discounts and offers
  • ...and so much more!

React WYSIWYG Editor

Ms-mousa

Member
Joined
Oct 22, 2019
Messages
5
Reaction score
6
Points
5
Hi guys,

I want to develop a WYSIWYG for React for my personal use. So I'm wondering how to approach that.
I'm thinking maybe IONIC app with browser build in?
Also I'm wondering how to implement when you highlight specific code and you get that part of the code highlighted in built in browser?
I find it quite an interesting challenged! So my first though is to get a mongodb that holds the code and a reference to that rendered item in the browser and execute a function that retrieves that bit of code when you click on the item in the browser. But then there will be many many reads to db.

Any inputs?
 
  • Like
Reactions: Adam

mpigsley

Member
Joined
Oct 21, 2019
Messages
6
Reaction score
10
Points
5
Location
Omaha, NE
Local Time
Yesterday, 21:39
First thing is that I would develop the editor separately from your back-end/database of preference as they really shouldn't have anything to do with each other. At the end of the day you'll just be storing the data as a string in some sort of database.

If you take a look at draft.js it looks like they handle highlighting and typing with a contentEditable div wrapper. The stylized text within is handled with layers of spans. Not sure if these sort of browser API's are available in the cross-platform ionic framework though.
 
  • Like
Reactions: v1rtl

v1rtl

Member
Joined
Oct 10, 2019
Messages
13
Reaction score
9
Points
205
Location
Near Moscow
Local Time
Today, 06:39
Website
v1rtl.site
Pronouns
bruh
If you need a React desktop app try Electron. Although I hate it very much it is still a solution.

But I strongly recommend just writing a React component, publishing it so other can use, and then host a "demo" which will be the app you try to build.