9 ms·
Redactor - javascript (jQuery) WYSIWYG editor
- JiPi 14y agoIs code available on Github? This seems really promising at first. Would love to try it soon but it really needs a public repo. English documentation would be a great plus too! :)
- phleet 14y agoBolding (and other similar operations) should use Cmd instead of Ctrl on OS X. Google docs does this
- Johnyma22 14y agoAlso see http://beta.etherpad.org http://beta.etherpad.org for a nice editor
- popee 14y agoEtherpad uses java, so if you don't like that try etherpad-lite based on node.js. Like ~10x less memory at startup :-) https://github.com/Pita/etherpad-lite https://github.com/Pita/etherpad-lite
- MechanisM 14y agoIt's good but codebase is so huge..
- Timmy_C 14y agoIt uses inline styles. That's an issue for me. It also looks like it doesn't do nested lists. On the other hand, full-screen mode is really cool.
- MechanisM 14y agoThis is another one russian text editor - http://elrte.org/demo http://elrte.org/demo. Comes with filemanager - http://elfinder.org/ http://elfinder.org/
- theuglyfggt 14y agoBoring. IBM can do much more, fggggt. lol http://maqetta.org/ http://maqetta.org/
- opendomain 14y agoIBM did create an excellent open source wysiwyg html5 editor http://maqetta.org/ http://maqetta.org/ - check it out to compare
- buremba 14y agoit seems lightweight even if the minified version is 40kb.
- wavephorm 14y agoI think we're starting to approach a time period where lamenting over filesizes over 10KB should be a thing of the past. I have a fairly typical internet connection, and I can download 40 MEGABYTES in about 8 seconds.
- buremba 14y agoyou're right but if you working with a module loader (like require.js or yepnope.js) it affects actually.
- joshfraser 14y agoI disagree. The size of the typical webpage is growing at faster rate than people are upgrading to faster internet connections. The average webpage is now > 1MB. It matters because adding even a tenth of a second to your load time can cost you in pageviews and revenue.
- petitmiam 14y agoFairly typical internet connection in what country? In a major city?
- tzury 14y agoSelecting a word, making it "bold", looking at the code, seeing <b> word.. </b>. Shouldn't it be <strong></strong> ?
- kijin 14y agoThere's a reason why W3C didn't just replace <b> and <i> with <strong> and <em>. A lot of people think they're just equivalent, but a lot of other people disagree. "Please display this in italic" arguably sends a different message from "Please emphasize this", and in some settings they may not be interchangeable.
- celoyd 14y agoThe classic example is screen readers. A phrase that’s italicized because it’s important should probably be slightly louder, but a phrase that’s italicized because it’s foreign should probably be pronounced slightly slower. Those are entirely orthogonal things, and it’s useful to distinguish them. Semantic HTML + CSS can be taken too far, but having separate layers gives you a lot more flexibility than presentational HTML alone, which tends to be very brittle.
- kijin 14y agoIf <i> means something different from <em>, you can keep them distinct while keeping everything "semantic". In fact, you could have a dozen different HTML elements for each use case of italics, e.g. <foreign> for foreign words and <t> for titles of books and movies, and it will be a mess, but it will still be "semantic". So the semantic-vs-presentational argument doesn't even apply here. Meanwhile, the whole concept of using italics for emphasis is a Western idea. CJK languages, for example, don't use italics for emphasis, and most of their italic fonts actually look terrible on screen.
- celoyd 14y agoI don’t understand what you’re arguing for or against here.
- websirnik 14y agoHave been using it for a while now. The latest version is pretty stable. Ability to resize images inside the editor is pretty cool.
- tzaman 14y agoThank you, but I'm sticking with https://github.com/xing/wysihtml5 https://github.com/xing/wysihtml5
- jejacks0n 14y agoI'd suggest https://github.com/jejacks0n/mercury https://github.com/jejacks0n/mercury if you're using Rails. Full disclosure, I'm the primary author.
- MechanisM 14y agoTwitter Bootstrap enabled editor http://jhollingworth.github.com/bootstrap-wysihtml5/ http://jhollingworth.github.com/bootstrap-wysihtml5/
- nabilt 14y agoI just added bootstrap-wysihtml5 to a project and I'm liking it. My only problem is it won't let me type comments in the HTML view and I can't figure out how to dynamically resize the text area. Redactor seems to let you do this. Looking forward to trying this out as well. Edit: Redactor looks like it retains formatting for the HTML. That's enough to make me switch.
- chmike 14y agoIt deserve it's fantastic qualifier. It's the first wysiwyg editor I test that works correctly with iPad. Excellent work. I would love to make it simpler to insert iPad images. Basically make the upload intermediate step not visible. Unfortunately it is not possible to upload images from the iPad. edit: unfortunately copy past doesn't work on iPad. The selection is difficult and the copy is simply ignored. Past inserts whatever is in the clipboard.
- d0mine 14y agoCopy-paste works for me on iPad
- chmike 14y agoIt is the copy operation from inside the editor text area that doesn't work. If you copy text in another place, it gets stored in the clipboard and the past operation works as expected. If you copy text selected in the editor text area, the clipboard is left unchanged. Pasting gives you whatever was in the clipboard. So trying to copy text from the editor text area and pasting it in another app or place doesn't work since it's the copy operation that doesn't work. The text selection is also not working as expected since it behaves slightly differently than other iPad text editable text field. But this is not a real problem.
- d0mine 14y agoIt most certainly works in the provided example from the article, the same way as in other text editors on iPad. We might have different versions (builtin browser in news:yc on iOS 5.1.1).
- chj 14y agohonestly i didn't expect it to work at all on iPad. truely amazing.
- ricardobeat 14y agoI had two issues: you have to click on the top of an empty textarea to start editing (guessing the first input position), and text entry stopped working after pressing the bold button.
- kijin 14y agoFirefox 12. Font color selector doesn't work in full-screen mode. (The color palette doesn't appear when you click on the font color icon.)
- jabo 14y agoI don't like the fact that when I resize the editor the content disappears until I complete the resize. During the resize (click on the tab at the bottom and drag), the content disappears.
- antiterra 14y agoLooks nice, but I was unable to stretch the image back to its original size after shrinking it. It kind of inches a little bit and then stops. It's irritating to see the page announce itself as "fantastic" when it's clearly not properly finished.
- deleted 14y ago[deleted]
- haydenchambers 14y agothey should have allowed more leeway.. but you can just grab it in the middle
- kalininalex 14y agoInteresting. It's seem to be the issue with capturing mouse events. If you move the mouse out of the image quickly, it'll lose it and the resize will stop. But if you move the mouse slowly so that it always stays over the image, it'll resize it. It's a workaround to use for now (but sure, it's a problem with the implementation).
- josscrowcroft 14y agoGreat work, really nice to use. Would love to see this as a WordPress plugin (sick of the default editor) but that would require plugin support, as per the roadmap.
- bdfh42 14y agoOn the face of it a very nice editor - good work. some confusion on licenses - MIT is available but with a caveat and I don't think you can do that.
- amper5and 14y agoThere's no caveat. It says "Redactor распространяется бесплатно по лицензии MIT или GPL, на ваш выбор." which literally means "Redactor is distributed freely under the MIT or GPL licenses - it's your choice." Edit: This goes to the lack of English docs, not to your misunderstanding I'm sure.
- drewmclellan 14y agoIn the source of the script itself, it has: Dual licensed under the MIT or GPL Version 2 licenses. ...which is how jQuery is licensed, as is common for plugins and other jQuery-based projects.
- bdfh42 14y agoInteresting - the text with regard to the licensing changed between my first and subsequent visit - now clearly licensed as you say.
- wvl 14y agoLooking at this again 3 days later, it seems the license has been changed again. The license is now the "Creative Commons Attribution-NonCommercial 3.0 license.", and they're charging for commercial use.
- flippyhead 14y agocurious as to why this is different/better than so many other editors?
- pyrotechnick 14y agoWhere does it say it is different/better than so many other editors?
- dumphuk 14y agoAgreed, didn't seem that special .. now this on the other hand: http://www.aloha-editor.org/ http://www.aloha-editor.org/
- bergie 14y agoYep, Aloha is very cool, especially now that they're replacing ExtJS with jQuery UI to make it lighter. It is unfortunate that they've stuck with the problematic AGPL, though. That was the primary reason that made me start http://hallojs.org http://hallojs.org
- dcesiel 14y agoI'm not really familiar with the AGPL. Why is it problematic?
- bergie 14y agoIt differs from GPL in that it is "viral" also when served through the web, so it could mean that your whole web application must either be AGPL, or you must buy an exception from the developer. AGPL is a new license, and so there are few examples of how it affects things in practice. Many developers (especially ones building open source under less-strict license) prefer to keep their distance.
- nilsbunger 14y agoDoes just linking to their hosted js and CSS force you to open up your backend under AGPL?
- dcesiel 14y agoIs there english documentation? I only see the zip download. Is this code on github?
- alanh 14y agoThese are terrifically hard to make, and I applaud anyone who take the time and effort. But, a problem: Tapping Bold with no text highlighted (the expectation is that whatever you type next is bold) not only doesn’t work, but steals focus and you lose your cursor You should not consider this library production-ready!
- godDLL 14y ago> You should not consider this library production-ready! Surely you kid, this is the nicest one I am to see come out yet. File a bug mate.
- skyhook_mockups 14y agoThis is ok... although there are lots of better alternatives. Some issues: - No way of adding headings? * edit: sorry it's under styles. - Clicking bold, italic etc should expand the selection to the word that the cursor is in. - Setting formatting should restore the cursor to the editing area - Clicking into a formatted area should toggle the buttons in the toolbar that apply - image alignment a little clunky. Why not add a simple overlay for align centre|left|right on mouseover? On the plus side image resizing is done well. One thing that annoys me no end is that all editors I've ever used apply block level formatting (h1,2,3 etc) for an entire paragraph when only a sentence is selected. The most intuitive approach would be to break the sentence out of the paragraph and style only it. As a user I expect what I have highlighted to change not all of the surrounding text as well! These things aren't easy to get right, especially cross browser. I recently put together an editor to exactly suit my needs (uses contenteditable instead of an iframe), but it's chrome, firefox and ie9+(? i think) only. Trying to get something usable across legacy browsers is ridiculously hard.
- dutchbrit 14y agoMIT license is the best part - and great that it's fully featured!!!
- rquantz 14y agoCan anyone recommend an editor with a really good API for making custom buttons? My admittedly shallow research hasn't uncovered anything that is particularly joyful to use.
- godDLL 14y agoThis one isn't bad on that front, you should take a look.
- alecperkins 14y agoThe fullscreen mode is a nice touch, as is the image resizing, provided the cursor doesn't leave the image boundary. It's frustrating that, like other editors, it doesn't differentiate so well between line and block actions. Also, I was very disappointed that I couldn't drag the image to reposition it.
- tvon 14y agoFWIW, both MCE and CK have fullscreen mode.
- NathanKP 14y agoOne fairly important thing I couldn't figure out how to do was move the image around. I guess I expected it to work like Wordpress or Blogger's post editor where you can drag the image around to adjust its location in the text. Instead I could only resize the image using click and drag, not move it.
- alecperkins 14y agoI'd love to see a drag-and-drop editor that doesn't require the image be absolutely positioned and can have text interact with the image. Somewhat like iBooks Author, but without fixed page sizes.
- dools 14y agoThat's what we do in Decal[1]. It's very hard to get right - we're reasonably close but it's still a little finicky. Basically while you drag the image around it follows your mouse but when you drop it, it tries to guess the best place to insert it into the HTML so that it will most closely approximate your desired position. You can see it in action without signing up in our instructional video on placing images: http://www.decalcms.com/page/Support/#instructionalVideos http://www.decalcms.com/page/Support/#instructionalVideos [1]http://www.decalcms.com/page/4_minute_challenge http://www.decalcms.com/page/4_minute_challenge
- grayrest 14y agoI haven't used iBooks Author, but you may want to check out Squarespace 6 when we launch in the next few days. I'm very proud of our editing and layout system. http://new.squarespace.com/ http://new.squarespace.com/ <- about halfway through demo video.
- godDLL 14y agoYou double-click it.
- jQueryIsAwesome 14y agoThe image options needs a little bit of work, maybe a button in in the corner to edit the float position (left/right), a little transforming box to change the size when is selected (those little squares in the corners like Photoshop) and the ability to drag it from any other part.
- philipes 14y agoI was looking for something like this earlier today.
- joe_the_user 14y agoI played with such javascript things a few years ago. They were indeed hard to create and (at least then) relied on a detailed know of the browser and platform's characteristics. But given the varying tasks which call for that kind of editor, what I'd really like to see is a small semi-standard tool or framework for the construction of such editors. As it is now, one must either use an existing tool having too many or too few features or go to the great lengths of modifying one.
- president 14y agoFirst major competitor to TinyMCE i've seen. Great work, this is awesome!! I hope this becomes big.
- dybskiy 14y agoI think this code is much easier accessed when hosted on GitHub so I'll maintain the repo for now: https://github.com/dybskiy/redactor-js https://github.com/dybskiy/redactor-js
- wamatt 14y agoWould be great if it supported clipboard pasting of images like Gmail does.
- fidz 14y agoI wonder why people make so much different rich text editor. while i only use Markdown format for my projects. I wonder about the Rich Text to HTML compatibility (some rich text editor have problem with interpreting formatted text into the HTML, since then i afraid to use rich text editor and more using it).
- jakejake 14y agoMarkdown is great for projects where the users don't mind writing using code. WYSISYG editors are nice for people who are not technical at all to manage their website and things like that. They do sometimes produce really terrible HTML though, especially because people copy/paste from MS Word and it results in a bunch of garbage.
- chmike 14y agoMarkdown has a lot of shortcoming because it maps to basic html. i.e. It ignores starting numbers and numbering gaps. Markdown is not a standardize encoding. Many markdown editors don't support tables for instance. Finally, as an editor, it lacks the easiness to add images and such. They need to be uploaded in a web server. It thus has significant limitations before it can be considered a serious rich text alternative. I do use it and I would love it had a better support because it is easy. What I like is that when writing we focus on the text, not the formating. Formatting is implicit.
- matthewking 14y agoLooks very nice, I'm glad there's some movement in this space lately. Ran into a bug though, if you insert a table then return twice after it, all content below the table is removed..
- aichi 14y agoIt is maybe nice, but not good, because it is not generating same output in all browsers. Also copying from word (most needed) is not filtered properly and same in all browsers.
- gordonslondon 14y agoOne point really boring about all these editors is the fact they require an iframe. For now i'm building a cms and having to deal with iframes (like injecting css, trigger click inside) is a pain. One could argue that it's a security risk to not use an iframe but tests [1] shows that only IE is vulnerable to code injection by copy-pasting inside the editor. So for now we're stuck to use an iframe on all editors because some shitty browsers are unsecure. IMO we should create an editor without iframe and drop the IE support. It could be much more flexible and easier for us, developpers. [1] http://tifftiff.de/contenteditable/onpaste_test.html http://tifftiff.de/contenteditable/onpaste_test.html