5 ms·
React Draft Wysiwyg
- anilgulecha 10y ago[EDIT: Just for reference, the title originally was 'the right way to content manage..'] I'd maybe call this "an" approach, rather than the 'right' approach :) Already, prosemirror has provided a solid alternative, with things like custom-schemas, which ensure we're no longer in contenteditable-copy/paste hell. There's substance.io and quilljs as well. Any of these could be the right approach for a particular CMS problem.
- tluyben2 10y agoMostly the 'right approach' depends a lot on the scale of the site(s) you are managing with it when it comes to a CMS. You really start missing forced structure even with a few content managers, let alone 100s of content managers copy/pasting stuff all over the place.
- ingenter 10y agoI just came here to write that I think this is THE right approach for wysiwyg editor. Having a full model of the document tree rather and working from that rather than sanitizing `contenteditable`. I expect this approach to automatically solve many problems that other wysiwyg editors have.
- amelius 10y agoProsemirror still uses contenteditable under the hood though. I actually wonder why that is the case.
- ingenter 10y agoTo be fair "React Draft Wysiwyg" is using contenteditable too, but it also builds a full model of the document.
- grayrest 10y agoIt handles the more complex (e.g. CJK) input methods. The alternative is a hidden text field and you have to put more effort into emulating the cursor (e.g. up arrow/down arrow). Regularly re-generating the underlying markup removes a large class of edge cases and cross-browser incompatibilities in exchange for not being able to use the browser's native undo. It's still a lot harder than you'd expect but it seems to be working for draft and prosemirror better than my attempt to normalize the cross browser differences and rely on the browser. P.S. I also came into this thread to endorse Prosemirror.
- benbriggs 10y agoI like and use Draft, but the separation of a document model from contenteditable is a feature of the editor frameworks mentioned above (as well as others like slate) and is not unique to Draft, or this implementation of an editor around Draft.
- jyotipuri 10y agoThanks your your insightful feedback.
- jyotipuri 10y agoHi Anil, I did not said only right approach :)
- pugio 10y agoDoes anyone else notice a tiny typing lag? I can't point to it, but whenever I type with a delayed response it feels as though I'm slogging through muddy ground, an almost subliminal sensation.
- Ronsenshi 10y agoCan't say I notice it.
- Touche 10y agoYeah, I do, slightly. A more noticeable thing is that if you select some text and then Bold / Italics / Underscore, etc. there is a flash where the text appears to be no selected and then becomes selected again. Given this is React, my guess of what is going on is that the rich text is redrawn when these buttons are pressed (and perhaps even on each keystroke) and the selection has to be re-applied in code. Perhaps they can improve this, but this is why I think it's important to stay away from high level frameworks for doing low-level things like text editing. Use your high level framework for application architecture and all that good stuff, but when something has to be fast, drop down to the lowest level you have.
- Robin_f 10y agoThis looks really good. I'm only missing an option to put in formatted code or something.
- jyotipuri 10y agoNice feedback, I just created an issue for it #71. I will prioritize it.
- rekshaw 10y agoNice! p.s. indent buttons don't work (on Firefox)
- Ronsenshi 10y agoLooks very nice, thanks for the work. I've been tinkering with Draft off and on for quite some time and I love how powerful it is, however documentation was rather lacking in some areas and this project would definitely help me understand some of the things about Draft. Too bad there's still only a workaround for block styles (as in setting "style" prop on a whole block instead of using setBlockData method).
- jyotipuri 10y agoI hope I would find more time, I wanna do more on DraftJS and its approach for content editing. Its very powerful approach.
- ianstormtaylor 10y agoJust in case you're interested, I ran into the same issues with Draft when using it myself—having to do lots of strange workarounds for what felt like normal levels of customization. I've been working on an alternative that aims to be much less opinionated and with a much cleaner API, called Slate: https://github.com/ianstormtaylor/slate https://github.com/ianstormtaylor/slate
- MWil 10y agoSince you can't tab or you lose focus of the editor box, I am pressing the "add indent" button but to no avail Edit: Someone beat me to it, but being 2/6 of the early comments shows that they are important!
- dawnerd 10y agoDoesn't seem to be working on mobile. iOS 10
- deleted 10y ago[deleted]
- amelius 10y agoOne important thing seems to be missing though: collaborative editing. (A requirement on the modern web, since you don't want to edit a file only to find out that your version was overwritten by another person who happened to be editing at the same time).
- somecallitblues 10y agoAnd an inbuilt chat :)
- jyotipuri 10y agoHi, It can be made collaborative. Depends on how you integrate it in your application.
- amelius 10y agoOk, it was missing in the list of features.
- xmattx 10y agoJust a few random observations: I can't seem to toggle off bold/italic/...? Neither can it be toggled on before typing it seems. Also, setting text alignment removes bullets. Nice idea, but functionally not quite there yet.
- theweatherman 10y agoI've done a some investigation into this, and I can tell you while this looks cool. It'd be difficult to use on other devices (tablets, phones). The best I've seen is https://www.froala.com/wysiwyg-editor https://www.froala.com/wysiwyg-editor Killer feature is the fact that I can use it on the iPad, Android tablet, IE, and Chrome. Also, its supports tables, which was one of the requirements for our clients. Licensing is pretty affordable, and it's easy to integrate because there are plugins available for different frameworks (angular, django, ...)
- rkuykendall-com 10y agoFroala seems to be leading the pack, but was still very disappointing. It plays _okay_ with webpack, but requires jQuery, and doesn't seem to support es6 imports. Plus, the development speed is good, but sloppy. Their official React documentation starts with something they forgot to change when they copy-pasted it from react-highcharts: https://www.froala.com/wysiwyg-editor/docs/framework-plugins/react https://www.froala.com/wysiwyg-editor/docs/framework-plugins...
- kilburn 10y agoI tried it in firefox mobile. After inputting the first letter the cursor jumped behind it. I tried to reposition the cursor to no avail (the whole edit area loses and regains focus on each tap). Also, I can't delete stuff (backspace does nothing). Edit: at this point I just quit trying.
- tyingq 10y agoLooks nice. Not sure if this is a bug, but if I set a specific font size, it doesn't attach any kind of unit. For example, if I select 18, it doesn't convert that to 18px or 18em...just "18": <span style="font-size: 18;">This is some text.</span> I believe that's not valid css.
- Rezo 10y agoI don't think the toolbar actions work as one would usually expect. That is, hit Bold, type, text should be bold but isn't. The tools only seem to apply if there's already a selection, but that's not how vanilla Draft or any editor I can think of works.
- jackreichert 10y agoI love these initiatives. It does, though, need thorough testing in an office environment. Things that users, not developers, will come out. For example, I tried cutting and pasting from Word. Forget about formatting, none of the line breaks carried over. That's not to discount this. It'll be great in certain settings, but it has far to mature if it's goal is to compete with tinyMCE.
- jyotipuri 10y agoTotally agree to this.
- ianstormtaylor 10y agoThis is great! I agree that I think this kind of editor composing is the way forward for most content editing on the web. I was deep into Draft a while back, and there are some downsides to it though. It's document model is flat, which makes it hard to model nested structures like tables, captions, etc. It also treats a lot of the built-in logic in privileged ways which makes it hard to override and add custom logic. And generally the API and docs are fairly convoluted to use and understand. If anyone is interested in composing complex editors in React/Immutable, you might be interested in a library I've been working on called Slate: https://github.com/ianstormtaylor/slate https://github.com/ianstormtaylor/slate Unlike most of the other editors, its goal is to not have opinions out of the box. If you're going for just basic WYSIWYG then it's probably not for you, but if you're trying for more advanced editing experiences I think that flexibility is critical. Anyways, awesome work! I just wanted to add another perspective.
- jmfurlott 10y agoHow does Slate compare to draft in package size? I find that including Draft for simple simple simple WYSIWYG editing to be enormous. I don't have the exact size on me, but it made my bundle huuge
- ianstormtaylor 10y agoHonestly right now it's probably worse. It's still in beta, so I've been working on the core architecture and logic, before diving into things like package size. So I'm not sure. It also hugely depends on whether you were already using React and Immutable.js as dependencies inside your app, or whether you have to add them just for the editor. For super simple WYSIWYG editing, like I mentioned, you're not going to want to use Slate. (Or maybe Draft either.) Slate is designed for much more advanced use cases. Things like building wiki tools, or chat tools, or anything where the editing experience itself is a significant enough portion of your product that you want total control over it, and don't want to be constrained by the opinions that most editing frameworks bake into their core libraries.
- jyotipuri 10y ago
- wahnfrieden 10y agoPlease note that Draft.js lacks "inline blocks": there's no way to, for example, have an image rendered inline rather than as its own block. I lost hours to this non-obvious omission so maybe this will save someone else time :) I've been using https://github.com/ianstormtaylor/slate https://github.com/ianstormtaylor/slate instead, which uses a similar architecture but has inline blocks. It's not quite as fully-baked as Draft.js yet though.
- rkuykendall-com 10y agoAnyone know a modern editor that can handle editing HTML implemented using an iframe so there's no CSS leak? I want to be able to render email templates and let clients tweak them before they gets sent. Currently trying to get Froala to work with webpack.
- galacticpony 10y agoNo offense, but it feels junky, just like most web stuff that's trying to do "real" application UI. Here's some of the problems: - You can accidentally "select" the text of the buttons - changing the style of the text causes selection to flicker - clicking outside a paragraph area causes the selection to flicker (instead of moving the cursor) - many of the menus don't collapse automatically and they overlap each other - the site layout just breaks when the page width is too narrow (may be more of a website problem) All of these are very common problems with web technology, working around them makes the difference between "good" and "acceptable".
- dismantlethesun 10y agoIn case anyone is reading this. You can solve #1 with CSS3, using "user-select: none;". It's something I don't often see added to buttons, but it is a huge benefit for any app-like layout.
- manigandham 10y agoRunning list of html/wysiwyg editors: https://gist.github.com/manigandham/65543a0bc2bf7006a487 https://gist.github.com/manigandham/65543a0bc2bf7006a487