Slashdot Mirror

← Back to Stories (view on slashdot.org)

Soon to Be Released CKEditor 4 Features New Skin And Inline Editing

Posted by Unknown on from the crawling-out-of-1999 dept.

PsxMeUP writes "CKEditor, one of the world's most popular WYSIWYG HTML editors, is getting a new default skin. The winner, Rafal Bromirski, will also receive $1000. The new design is going with the trendy monochrome look. The skin will be used with the soon-to-be-released CKEditor 4, which will feature inline editing." I recommend checking out the inline editing demo. Who needs textarea any more?

69 comments

  1. Slashvertising. by Anonymous Coward · · Score: 0, Insightful

    Never heard of CKEditor and I could care less that version 4 is out, let alone that yet another pointless closed source editor gave some sucker $1000 for doing something that they SHOULD have paid their employees a lot more to do.

    1. Re:Slashvertising. by Anonymous Coward · · Score: 4, Informative

      To simplify Open Source community involvement and development, CKEditor 4 is now hosted on GitHub, the popular git community site.

      OK.

    2. Re:Slashvertising. by Anonymous Coward · · Score: 5, Informative

      It's an open-source project, fool, and a pretty darn good one.

    3. Re:Slashvertising. by Anonymous Coward · · Score: 0

      Agreed

    4. Re:Slashvertising. by Anonymous Coward · · Score: 0

      100% agree! I've used it in dozens of different projects!

    5. Re:Slashvertising. by Anonymous Coward · · Score: 0

      then why even waste your an anyone else's time commenting you fucking idiot, oh yer...cos you got the first post..wanker

    6. Re:Slashvertising. by Anonymous Coward · · Score: 0

      Seeing how you've never heard of it and could care less, it's funny to see you just assume it's closed source.

  2. And it's only $29.99! Call now! by Anonymous Coward · · Score: 0

    This seems like a blatant product advertisement.

  3. More Gray?? by Anonymous Coward · · Score: 2, Insightful

    Seriously, what is wrong with color in a UI?

    1. Re:More Gray?? by narcc · · Score: 0

      Color?! What are you? Some kind of communist?

      --
      Required reading for internet skeptics
  4. Oh. Right. And I care because? by Anonymous Coward · · Score: -1

    And with that in-line editing - how does that content you are editing get persisted to the back end CMS that is driving the site?

    There's dozens of WYSIWYG textarea replacements, and I'm sure many people here have integrated them with a CMS/database using some Javascript and AJAX.

    1. Re:Oh. Right. And I care because? by monkeyhybrid · · Score: 1

      It can be persisted in exactly the same way as a WYSIWYG textarea replacement within a tradiitonal CMS does it - using Javascript and AJAX to pass the content to your backend. Makes very little difference whether the data comes from a textarea or from another DOM element / Javscript variable.

    2. Re:Oh. Right. And I care because? by Tom · · Score: 1

      And I've looked around their beta site for documentation showing me how to do it. Because, you know, CKEditor just might be most interesting to developers, who kind of like to see code and understand how the integration is going to work and all that.

      But no. Lots of demos, no example of showing you how to do the AJAX calls. Uh... they DO have a built-in functionality for that, don't they? If I have to code all that up by hand, then please explain to me how this new feature makes it in any way better than using the current version and Jeditable ?

      --
      Assorted stuff I do sometimes: Lemuria.org
  5. Monochrome by LihTox · · Score: 1

    I for one will be glad when monochrome is passé; I'm surprised Google still has its multicolor logo, for all its embraced this trend. Vive les couleurs!

    1. Re:Monochrome by SomePgmr · · Score: 1

      It seems the theme you use is entirely optional, and there's a bunch of very colorful ones there. ;)

  6. Cool by pinkeen · · Score: 1

    That's very good to know. It's about time this editor gets a decent look (the old incarnations were ugly to say the least).

    In other news - I can see people misusing the inline editing feature. Tons of bugs and user frustration commencing in 3...2...1...

  7. Slashvertisment? by Aguazul2 · · Score: 1

    Trendy monochrome -- do they mean like my VT100? That's so trendy they'll still be imitating it 50 years from now.

  8. Meh by Anonymous Coward · · Score: 0

    I still use the icons from v2.

  9. Does it work on iOS yet? by Anonymous Coward · · Score: 0

    Was a deal breaker for me about a year ago.

    Who needs textarea? Today's internet.

    1. Re:Does it work on iOS yet? by Anonymous Coward · · Score: 0

      Yes, it works on iOS 5+ and Android 3+

  10. Oh no! by FalMunir · · Score: 2

    "Who needs textarea any more?" I do. I am writing this comment in VIM using the "I's All Text" extension for Firefox. I use my tool of choice (VIM) for almost everything I write, and I am not overjoyed with "solutions" trying to enforce other tools and behavior than the ones that help me the most. Freedom of choice is, at lest for me, very valuable.

    1. Re:Oh no! by Anonymous Coward · · Score: 0

      Hi rms, I see you've advanced beyond emailing webpages to yourself. Why aren't you using emacs?

    2. Re:Oh no! by monkeyhybrid · · Score: 1

      Textareas do have the advantage of being accessible too, to those using screen readers and the like.

      Inline editing has lots of advantages too though, so maybe the perfect CMS way of doing things would be to have both options - inline editing for typical end users, and textarea (both plain and WYSIWYG replacements) for accessibility purposes.

  11. Nicely done! by Anonymous Coward · · Score: 0

    I've used CKEditor in projects since it was FCKEditor. The demo is snappy and sexy, and I love the inline editing support!

    Hope it receives rapid adoption.

  12. CKEditor is like TinyMCE by Anonymous Coward · · Score: 1

    CKEditor is like TinyMCE. Tiny has a lot better documentation and CK, formerly known as FCK, changed their inner workings a couple of years ago without having a solid stable branch. We changed to Tiny.

  13. Wrong. It's A Steaming Pile of Hell. by saudadelinux · · Score: -1, Troll

    I'd MUCH rather use Notepad - not even Notepad2 or Notepad++, vim, pico, nano ... anything put this hot mess. It adds in tags where you don't want any; it's the only HTML editor I've ever seen that blows up a page when you edit the source; and many, many more deficiencies.

    --
    I didn't think the house band in Hell would play this badly.
    1. Re:Wrong. It's A Steaming Pile of Hell. by Anonymous Coward · · Score: 3, Informative

      I'd MUCH rather use Notepad - not even Notepad2 or Notepad++, vim, pico, nano

      This is an inline replacement for textarea. It has nothing to do with those.

    2. Re:Wrong. It's A Steaming Pile of Hell. by Dracos · · Score: 1

      Every web WYSIWYG produces garbage markup, that's why I hate them. They're supposed to make HTML easier for plebians, but in reality they're given the power to make incomprehensible messes. Like handing a loaded shotgun to a toddler.

      At least what CK produces (and FCK before it) is less fubar'd than what TinyMCE vomits out.

      Inline editing is a recipe for an infinite amount of "I edited the page, and now it's broken" support requests. Only rabidly masochistic developers would even think of deploying it anywhere that a non-developer could access it.

      Long live the textarea!

    3. Re:Wrong. It's A Steaming Pile of Hell. by Anonymous Coward · · Score: 0

      I will turn in my geek card by stating that back in the day, I used FrontPage to make a quick web page... then I looked at the markup generated. Then, I realised how much of a fool I was to use the software. It even added things that were not valid HTML! Something on the lines of { 0.000, 0000, ..... }, and no, that was no CSS block. It was a bunch of nested curly brackets with zeros inside. As parent said WYSIWYG editors trend to do that, a lot. Like giving a five year old a pound of sugar and a Super Soaker...

    4. Re:Wrong. It's A Steaming Pile of Hell. by houghi · · Score: 2

      Inline editing is terrible if you give them ALL options.

      First it has nothing to do with development. It has to do with content.

      What we did was first disable anything that could be abused. This included almost anything. What was left was bullets, bold, the colors black and red and links. Also placing images was allowed.

      Next we explained everybody how to use those things and had the amount of users limited. Never had an issue.

      If it can break anything, then the developer did a shoddy job.

      --
      Don't fight for your country, if your country does not fight for you.
    5. Re:Wrong. It's A Steaming Pile of Hell. by Anonymous Coward · · Score: 0

      vs. the, "Hey can you change Dr. Bizer's name to Dr. L.L. Bizer" phone call you get while you're midst trying to debug some javascript?

      I'd rather have the clients make minor changes and then call me if they break something.

    6. Re:Wrong. It's A Steaming Pile of Hell. by Anonymous Coward · · Score: 0

      I'm confused, why exactly would those editors add tags? I've been programming websites for over 15-years and editors like notepad++ don't add hidden tags. nano doesn't do it either, and if it would, it would be terrible for editing core server files with. I don't normally get browser / cross-browser incompatibilities because I know how to code, perhaps you're doing it wrong.

    7. Re:Wrong. It's A Steaming Pile of Hell. by Lennie · · Score: 2

      It is actually the browser that creates most of the garbage. The editor mostly uses an API to tell the browser that a certain part of the page is editable.

      --
      New things are always on the horizon
    8. Re:Wrong. It's A Steaming Pile of Hell. by Anonymous Coward · · Score: -1

      I'll let the textarea live when whatever DOM fucktard who thought that everyone should overload some bullshit selection API for the task of locating/moving the cursor gets replaced with someone who can tell me the actual exact location of the cursor that won't flip out if the user highlights some text and or clicks outside of the textarea.

      All I want to do is let my users insert boilerplate text at the caret, but noooooo.

      For the record, the task sucks pretty runny shit in both CKEditor and TinyMCE. I've given up for "at the cursor" and ended up with using TinyMCE and "at the end of the last paragraph in some browsers or at the end of the text in other browsers because some browsers will place the string outside of the area TinyMCE submits on the form if you do/don't nest internal tags. Even then, sometimes a random span tag shows up for no reason at all (I don't even give users toolbars. Just a dropdown of things to insert.) and the insertion code gets out of whack because stuff is nested at the wrong levels.

  14. Noooooooooo! by sootman · · Score: 1, Insightful

    Thank $DEITY this is an option. (It is an option, right?) A bit of color is a GOOD thing. With monochromatic icons, you need to inspect each icon carefully to discern its shape. With color, your eyes can quickly jump to the right one, especially if you've used it for a while. It just becomes automatic, like muscle memory.

    The old icons were great. The ones that were just for text were black (bold, ital, underline, left/right/center). Text+decoration were black and colored (lists, indent, super/subscript). Separate functions (import from Word, clean up, spellcheck, table) were colorful. (As were "text color" and "highlight", FFS.)

    This is NOT progress. :-|

    Side note: Today I learned that "Noooooooooo" in a subject is OK, but one more "o" results in "Lameness filter encountered. Post aborted! Filter error: Too much repetition." Remember: Ten "O"s, kids. It's not just a good idea, it's the law.

    --
    Dear Slashdot: next time you want to mess with the site, add a rich-text editor for comments.
    1. Re:Noooooooooo! by interval1066 · · Score: 4, Insightful

      With color, your eyes can quickly jump to the right one...

      Which is great for people with color sight. As a colorblind person I can testify that this is of no use to me whatsoever. Now, before you 'color' (<- clever, no?) me an activist lemme just say that this is not a big deal to me, I'm comfortable in my disability and am not advocating some kind of radical, PETA-esque change in society. But your very first statement; "With monochromatic icons, you need to inspect each icon carefully to discern its shape.", well, sorry but I just don't find this to be too much of a burden. Yes, I do it as a matter of course. But do you REALLY need the extra help?

      I like the trend to less chromatic styles, its helps me and I believe it lends itself to a more streamlined, uniform look for all of us. Its hardly anything to get activist about, but like the 2nd law I tend to less complexity anyway.

      --
      Python: 'And then suddenly you have a language which says "we're all stuck with whatever the whiniest coder wants".'
    2. Re:Noooooooooo! by Anonymous Coward · · Score: 0

      Colour may or may not help, but spatial memory does not depend on it.

      Try taking one of your existing colourful setups, randomise the icon positions, then see how quickly you get used to the new layout. I'd wager there wouldn't be much difference between that and getting used to the new grey icons.

    3. Re:Noooooooooo! by flimflammer · · Score: 2

      Well, the fact of the matter is that far more people are not colorblind than are. Those who are not can use these extra color hints to do what we want to do quicker. Do we absolutely need color? No, we don't, but that doesn't mean we should just forego color altogether when there is a proven benefit to it because ~9% of others can't discern the same differences. I know you said you aren't trying to make the whole societal change argument; I merely am responding to the piece of text suggesting we don't need the extra hints.

      I say this with the most respect to those who are colorblind. It's early in the morning (for me), so if anything I said reads as offensive, please understand that was entirely not my intent.

    4. Re:Noooooooooo! by sootman · · Score: 3, Insightful

      I knew someone would bring this up. No, it's not much of a burden, but if color makes it better for fully-sighted people (who, by the way, greatly outnumber people with any amount or kind of color blindness -- not that we're therefore more important, it's simply a question of what does the most good for the most people) then why not leave it in? Plus it's not like I'm advocating making a TV louder, which would help a hearing-impaired person watch a show but would cause discomfort for others. If something helps one group and has no impact on another, why not do it?

      Totally blind people can't see icons at all. Does that mean the icons should be replaced with BOLD ITALIC UNDERLINE STRIKETHROUGH NUMBERED LIST BULLETED LIST INDENT OUTDENT SUBSCRIPT SUPERSCRIPT TEXT COLOR HIGHLIGHT COLOR MAKE LINK BREAK LINK LEFT ALIGN CENTER RIGHT ALIGN so you have the same experience a blind person has with a screen reader? After all, it's not much of a burden on you, right?

      That's what separates something that is merely "usable" from things that are truly "good" -- a thousand little details, all adding up to a better experience. Is this the end of the world? No. Is it a step backwards? Yes.

      --
      Dear Slashdot: next time you want to mess with the site, add a rich-text editor for comments.
    5. Re:Noooooooooo! by sootman · · Score: 1

      > Try taking one of your existing colourful setups, randomise the icon
      > positions, then see how quickly you get used to the new layout. I'd
      > wager there wouldn't be much difference between that and getting
      > used to the new grey icons.

      I've already done that, effectively, and color is indeed key. I work with several rich text editors daily (personal blog, work CMS, school's LMS, and more, plus random web forms, blog comment forms, etc., in addition to Word, Excel, and other local apps) and each has a different layout. Having colors definitely helps me get around better. Switch them all to grey and I'd go nuts.

      --
      Dear Slashdot: next time you want to mess with the site, add a rich-text editor for comments.
    6. Re:Noooooooooo! by Anonymous Coward · · Score: 0

      If only we could have it both ways. Oh, wait...

    7. Re:Noooooooooo! by monkeyhybrid · · Score: 1

      Yes, it's just an option. The monochrome theme is just one you can choose from and presumably the default as of this new version. You can choose a colour theme if you prefer, or make your own. Try the demo linked to in the summary, it uses a colour theme.

      The focus of this story shouldn't be the new theme (it looks nice to me but not really a big deal) but the new functionality this version brings, mainly being the inline editing.

    8. Re:Noooooooooo! by interval1066 · · Score: 1

      Totally blind people can't see icons at all.

      Specious argument. The totally blind don't even figure into this caclulus, so I'm going to completely disregard your little "fit" and again argue that simplicity is a better way to go. Might as well get the shoe to fit as many people as possible in my opinion.

      --
      Python: 'And then suddenly you have a language which says "we're all stuck with whatever the whiniest coder wants".'
    9. Re:Noooooooooo! by sootman · · Score: 2

      You want things to be equally bad for everyone, whereas I want things to be as good as possible for as many as possible. Sorry, but your way makes no sense. Presenting colorful icons to colorblind users does not harm them in any way, but its an enhancement for fully-sighted users. Colorful icons don't "not fit" colorblind users. (Sorry for the double negative there -- not proper English but there's not a word that's the opposite of "fit".) This isn't like the difference between sounds that are too loud or not loud enough, or words that are long and confusing versus short and clear. There is no downside to using colorful icons, but there is an upside, therefore they should be used, if you're going for maximum usability.

      --
      Dear Slashdot: next time you want to mess with the site, add a rich-text editor for comments.
  15. Congrats... by Anonymous Coward · · Score: 0

    to the 4 skin contest winner.

  16. Aww man.. by Splat · · Score: 1

    You're telling me I need to stop using HotDog to manage my websites?!

  17. Who needs it? by jez9999 · · Score: 1

    Who needs textarea any more?

    Slashdot?

    --
    == Jez ==
    Do you miss Firefox? Try Pale Moon.
  18. So what do I use on the Desktop? by Jonah+Hex · · Score: 1

    Sometimes I just want to write a longer piece on my desktop before moving to the web and see a WYSIWYG HTML view. Right now I stick to PSpad on the desktop, WordPress HTML mode (not WYSIWYG), and Google Docs depending on what I'm typing up. I feel I'm missing an editor on Windows that handles HTML/CSS and publishing (preferably to WordPress) better than PSpad. - HEX

    --
    Horror & SciFi Erotic Nudes
    1. Re:So what do I use on the Desktop? by CrashNBrn · · Score: 2

      CodeLobster PHP is the best that I've found. The editor itself is free, the devs charge a small fee if you want access to their plugins --- which include WordPress, Joomla, Drupal, among others.

      Some Features: code-highlighting, code-folding, auto-complete, tag-matching, regex search/replace.

      Default View is "code" but it also includes "Preview Mode" (WYSIWYG) and Inspector -- a mix between CodeView/Preview/FileView : personally I don't find Inspector all that useful, but the rest is decent.

      CLPHP can (as other editors I'm sure) quickly open a file with your browser of choice as well.

      The Open-Source Editors I've looked at for dealing with HTML/CSS/PHP are either plain buggy, not updated, missing significant features or just clearly don't do what they claim to at all. As well many of the best "text-editors" that are recommended for dealing with WebDevelopment don't do much more than code-highlighting - when it comes to the specifics of html/css/php et al.

      Adobe's Brackets (editor) looks interesting, but I haven't had time to mess around with it yet.

  19. The inline editor is awesome! by dazedsnowboarder · · Score: 2

    As an avid implementer of CKEditor, I've had several clients ask for the ability to edit content directly on a page. This new inline editor will make that possible. Can't wait for the release.

    1. Re:The inline editor is awesome! by Anonymous Coward · · Score: 0

      This new inline editor is nothing new if you structure your CMS properly. I use TinyMCE for the most part and it is not impossible to use it inline.

      Plus there are a handful of editors that do not require textarea's either, all you need to do is init the editor and point it at (almost any elements) id.

    2. Re:The inline editor is awesome! by Anonymous Coward · · Score: 0

      So, when you use tools like this, do you save it as raw HTML or do you use a JS library to transform it into some type of markdown?

    3. Re:The inline editor is awesome! by Anonymous Coward · · Score: 0

      This is still an epic fail for me. Until I can paste an image directly into the WYSIWYG, or even drag an image file into the document, it is of little value to me.

      I hate to say it, but OneNote and Word do a much better job in terms of WYSIWYG. And believe me, that was painful to say...

    4. Re:The inline editor is awesome! by Lennie · · Score: 1

      I think the reason why this does not yet exist is because the builders of websites which support it don't want their images in the middle of the text. Browsers which support HTML5 do support drag&drop so I wouldn't be surprised if it is possible al though I'm not yet sure how that would integrate (well).

      --
      New things are always on the horizon
  20. Re:Slashvertising. + Grammar Fail by Anonymous Coward · · Score: 2, Funny

    Never heard of CKEditor and I could care less....

    "could NOT care less". Please, if you're going to troll, do it properly.

  21. Louis CK has an editor? by Anonymous Coward · · Score: 0

    When did this happen?

    1. Re:Louis CK has an editor? by dbk25 · · Score: 1

      It happened when the editor's author, Frederico Caldeira Knabben, did not work so well as a product name in English.

    2. Re:Louis CK has an editor? by dbk25 · · Score: 1

      Um, I meant to say "his initials did not work so well...'

  22. Very nice tool by dbk25 · · Score: 1

    People where I work have been using CKEditor since before the name change to make it English-friendly. (That change made it much easier to describe to upper management.) It's very nice, and I'm looking forward to checking out the newest version.

    Still, I can't help but look at the latest trend to blocky monochrome icons and flash back to Mac 64 and Windows 2.

  23. CKEditor smells like Cowboy Neal by Dogtanian · · Score: 1

    When did this happen?

    Much as I appreciate your humorous intentional misunderstanding, some people *might* think you're being serious and get the wrong idea. So let's clear this up...

    "CKEditor" is the latest fragrance from Calvin Klein, the people who brought you "CKOne".

    There- I hope that corrects any misleading impression given.

    --
    "Slashdot - News and Chat Sites Deviant". (Click "homepage" link above for details).
  24. Image drag and drop? by Anonymous Coward · · Score: 0

    Anyone know if you can drag and drop an image into the text and have it "do the right thing"?

    1. Re:Image drag and drop? by snadrus · · Score: 1

      A quick test of the sample CKEditor 4 says no, it still visits your image in a "forward" like manner in Chrome (the browser first offering GMail attachment adds via drag-n-drop). The concept doesn't even work with inline editing since your editor disappears onBlur when you go get your image.

      --
      Science & open-source build trust from peer review. Learn systems you can trust.
  25. How do you handle saving the changes? by Anonymous Coward · · Score: 0

    Please excuse the n00b question here but without a textarea or even a form how do you save the changes to the server?

    The demo didn't seem to have a 'Save' button, if it did I guess it could trigger some javascript that could pseudo serialize the page (translating #IDs to _POST IDs and innerHTML to _POST values) and AJAX the content back to the server.

    Is there some major part of HTML5 I'm missing here? (I'm not trying to troll, this is an honest question)

    1. Re:How do you handle saving the changes? by Anonymous Coward · · Score: 0

      This is just a javascript function that changes a plain ol' text-area into something akin to a traditional document editor (such as word, or word perfect, etc). The inline function allows you to add tags to your normal divs that are switched into an edit box (possibly with some markup features like bold, italics, etc). When you click out, it just updates the div with the new content-it is the programmers just to either capture that exit and send it via ajax to the server or to have a button that allows you to save the entire model (again, by capturing the content in the various fields that were updated).

  26. I love CKEditor and CKFinder by Anonymous Coward · · Score: 0

    I used both CKEditor and CKFinder in most of my projects. Writing plug-ins to enhance the tool-set is a breeze. Very efficient way to allow your clients to edit their sites, add images, link to pages and create new pages of their own. There are even plug-ins to allow the user to paste in their Word Document, where in return it is formatted automatically for the web. Plugins for video, HTML 5 are also very useful. Anyway, I have been utilizing CKSource's products for about 4 to 5 years now and happy. Though, I wish they would of chose a better design, in my opinion.

  27. Lovely by TheCouchPotatoFamine · · Score: 1

    LOVELY! your work is going to be everywhere, shortly. HTML5 is the future, afterall. You guys rock!

    --
    CS majors know the time/space tradeoff, but they never get taught the 3rd, crucial, tradeoff of the set: comprehension!
  28. What does this do that Amaya doesn't? by Herve5 · · Score: 1

    This is a sincere question, by a naive end-user...
    http://www.w3.org/Amaya/
    open-source, and efficient even to me...

    --
    Herve S.
    1. Re:What does this do that Amaya doesn't? by Anonymous Coward · · Score: 1

      it runs in a browser

      amaya runs on the client

  29. English Check by Anonymous Coward · · Score: 0

    Renamed FCKeditor ---> CKeditor
    Check out our CKEditor-4-Skin winner.