WYSIWYG WordPress comments?

The comments field on this here blog feels Very Nineties, what with making you type in HTML by hand, like an animal. Is there some plugin that isn't a massive security hole that gives you a bold/italic/link toolbar and such?

This is hard to search for, as the WordPress plugin space is polluted with rentiers and data brokers who want to help you move your comments off of your computer and onto theirs.

If you're going to suggest TinyMCE, you probably shouldn't. All I know about it is that URLs with that name in them are frequent targets of botnet probes here, and that strongly suggests that it does not have a security track record that one would consider stellar.

I see that at some point in the past decade or two, HTML got a contenteditable attribute that you can tack onto any old element, which I find honestly shocking! And that page contains "Example: A simple but complete rich text editor" in 152 lines of code. Should I just use that? It seems to work kind of poorly on iOS, but it does work... And here's another one.

I'd rather just install something that build my own out of constituent parts, though. Unless that would be insecure, or have a list of frameworks and package managers as long as my arm (as is the fashion these days).

Note that I am talking about editing comments, not posts (the thing that you are typing into right now, not the thing that I am typing into right now.)


Update: I got it working with Trix. It was a lot more work than I would have hoped! It seems like a very good editor (and they did the cross-platform work, which is no small feat) but the documentation is nearly nonexistent. Take a look at trixcomments.js to see the brain surgery I had to do on it just to get it to allow you to embed an IMG or YouTube video.

Also, here's a fun one: it uses embedded SVG icons for the buttons, which is cool, but they are black-on-transparent. Guess how you turn such an SVG into green-on-transparent in CSS. Because I asked the question, you already have the sinking feeling that it's not the "color" property. Nope, it is:

    "filter: invert(68%) sepia(36%) saturate(6175%) hue-rotate(79deg) brightness(115%) contrast(128%)"

Anyway, let me know if you notice any problems.


Update 2: I packaged this up into a WordPress plugin, "WYSIWYG Comments Trix", so now you can use it too.


Previously, previously, previously.

Tags: , , ,

58 Responses:

  1. 2

    It's been a while since I looked at it, but in my experience using contenteditable by itself is a road to madness. It's kind of implemented everywhere, but not uniformly or reliably.

  2. Mr January says:
    1

    Use some sort of limited markdown. Wysiwyg is a nightmare. Start with the trac markdown, that's limited and effective.

    • jwz says:
      6

      Using markdown would upgrade my comments from vintage-1994 to like vintage-1998. Nobody gives a shit about that.

      • Aaron says:

        Using contenteditable puts you at vintage-2005 at best, and nothing I've heard in the decade or so since I last dealt with it makes me think implementation will be less hellish now than it was then. Maybe more so! I wouldn't, but hey, good luck if you do - and here's hoping you don't need it!

      • 3

        > from vintage-1994 to like vintage-1998

        Don't think of it like that, think of it like "I'll be using something that's stood the test of time."

        Kids these days know markdown because it's in current Big Tech tools. Markdown is a great example of "simple AF, covers 95% of the use cases and that's Good Enough."

        • Michal says:
          1

          I agree 100%. In my opinion, even if there's a WYSIWYG option, there should always be a switch to markdown available.

    • Mr. roctober says:
      16

      I don't know why you'd knock 1998, The web achieved its perfect form in 1998.

  3. shem says:
    19

    Why allow HTML or even markdown in comments? Plain prose + urls are enough. They're comments on an idea, not your debut novel.

  4. Matthew says:

    Quick search found this tutorial. No idea if it's of any use.
    https://webdeasy.de/en/wysiwyg-editor-wordpress-comments/

    But surely this is a "solved problem", a useful answer must be out there and locatable with Google.

    Oh, I like hand coding html. :)

    • jwz says:
      13

      Fun fact, I also know how to operate a search engine.

      "I just typed the same search that you did, and here's something that I have never tried" remains one of my favorite responses of all time.*

      * Not actually a favorite.

    • jwz says:
      16

      And not only did I already see that, that's the one I linked to in my post. The link you did not click.

  5. juttipat says:

    oh. Modern Times are coming.
    And in some 10 years you're changing from green to....?

    /sarc off

    I'm very satisfied with the looks.
    Don't mind, it's your home, but I'd prefer a readable blog

    • jwz says:
      2

      Wow, a joke about the color scheme. How so very clever of you. Really breaking new ground here.

      • juttipat says:
        5

        sorry, i am not a native english speaker.
        the point of the post was to praise the existing order.

  6. familial says:
    15

    I like the comments as they are. Typing HTML (like an animal) feels like a bare minimal barrier for the type of comments you'd want, and the live preview works well.

    I would avoid contenteditable. I used it in a project, but it was so fiddly even for my simple case that I had to replace it.

    • 6

      I'm also a fan of the comments system as it is now; I've had so many bad experiences as a commenter at sites that use more "featureful" comments sections (stares hard at Disqus) that I've come to really appreciate that a simple system like this just works. Taking a quick glance at the site list of places where I comment these days, I think Ars Technica is the only site besides this one where the comments system doesn't drive me a little bit nuts.

      • CSL3 says:
        4

        I knew it was just a matter of time before someone mentioned the Nazi-magnet/stalker-enabling shit show that is Disqus.

        Like FB, Amazon, and countless other companies, Disqus is horrible to the point that everyone who works for them can be considered an enabler.

  7. Carlos says:

    I don't mind the current, primitive markup allowed, with one minor exception. I frequently use asterisks around something expecting boldface, but that gives italics here, unlike most other places I use them. And half the time I then try _this_ or /this/ before I remember, oh ya, it's the -b- tag...

    I'd be happy with pretty much any replacement, as long as it didn't force the use of point-n-click buttons for every markup operation. I've seen/used a few that supported something markdown-like or reformattedtext-like in addition to providing a menu/button bar for point-n-click folks (think: Slack message box, but not proprietary), but I'm afraid I've never been on the implementing-use side of them, so I can't offer useful opinions.

    C.

  8. Elusis says:
    16

    what with making you type in HTML by hand, like an animal.

    I assumed that was a feature, not a bug.

    • phuzz says:
      4

      I also thought it was: "You must be this technically literate to comment", but I'm probably being old fashioned.

      • Jon says:
        2

        Requiring a level of technical literacy might have some value here on jwz.org (depending on the topic being discussed), but I suspect this is mostly about making it easier to comment on the DNA Lounge website. That sort of thing doesn't really work when you're trying to market to the general public.

        • Jon says:
          2

          Which, come to think of it, is probably what drove the recent addition of the "thumbs up" button.

          • jwz says:
            19

            What drove that was getting periodic comments saying (in text) "I wish I could like this comment." Figured I might as well add the busybox.

      • jwz says:
        7

        I think Adafruit still does the thing where before posting a comment you have to decode the stripes on a resistor.

      • Elusis says:
        1

        Thank you for stating my point in a less oblique fashion.

  9. Jeff says:
    1

    I had this very same question a year ago. And a year before that. And a year before that. The answer is always the same. Either condemn your users to writing markup themselves, or enlist a plugin which invariably phones home and does the unspeakable whatever.

  10. 2

    How long ago did you add the auto-updating Comment Preview? I remember wanting same, and now there it is.

    Aside from that, maybe automatically turn URLs into links without requiring an href tag?

    As for contentEditable, I have a bookmark that turns it on for someone else's website so I can screengrab a fake. Not gonna use it on my own site.

  11. saxmaniac says:
    3

    100% of web WYSIWYG editors are garbage that actively discourage thoughtful commenting. All of them, I repeat all of them, inject so much code to every single keystroke you can’t actually type without it lagging.

    Good luck if you try to do anything so much as move the cursor around to edit something out of order. After a few of these forsaken unexpected jumps, titfuck locks up and you can’t insert any new text. If you’re on a mobile device, the entire webpage will randomly scroll or reload, completely losing your in progress.

    I have a rule for these awful “text” “widgets”: type it into notepad and then paste.

  12. I read OP and got through the whole comment thread without really noticing the "WYSIWYG" bit in the title, until I got to @saxmaniac's comment. Which is totally correct, rich editors in web pages always suck. Better a plain text edit and a toolbar to help insert markup.

  13. Not Frank says:

    I was about to recommend CKEditor, but it looks like the WordPress integration went unsupported years ago now. Perhaps it wasn't official from either project. Also, it looks like getting a non-prepackaged copy of the open source version requires consultation with npm.

  14. jwz says:
    3
    Look ma, no HTML! See the update up top.
    • thielges says:
      Looks like the problem with the img tag is that the http: is being converted to https: which the target server does not support.   Not sure whether that is a problem with the text box widget or an implicit condemnation of websites that don’t support Encrypted access.  

      Here’s the string pasted into the embed box: http://thielges.com/bart/m3b2/album/landscapes/slides/liquidated_frontier.JPG

      And here’s the result: … and sorry about experimenting on the wrong thread before.  

    • David Hoover says:
      Hrm, looks like bulleted lists don't work:
      • foo
      • bar
      • baz
      But numbered ones do?
      1. foo
      2. bar
      3. baz
      And it's unfortunate the toolbar gets squished into a horizontal scrolling region (noticed since nested replying loses a lot of horizontal space on my phone) but the things you don't realize are scrolled off screen are the things you care least about.

      But otherwise, hooray, so much nicer than pecking angle brackets into a phone!

  15. 1

    Sincere thanks for sharing trix-jwz.js. That might let me excise TinyMCE from my current half-finished project and replace it with Trix.

    • jwz says:
      1
      Hope it helps! I probably should package up the WordPress side of things into a plugin, but that would mean users and bug reports...
  16. CSL3 says:

    Bit disappointing to not have comment preview anymore, but let's look at how embeds do:
    <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ucxMGRm5PiM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

  17. prefetch says:

    Hmm - having the email field auto-querying gravatar.com on update is less than desirable.

    • jwz says:

      Why?

      Every WordPress-based blocg has always done that, you just couldn't see it before.

      • prefetch says:

        (teary-eyed salute) But this one doesn't have to.

        Hell, there's a big ol' opt-in button sitting right next to it. CDNing the images is an appreciated touch (but no doubt in place for a different reason).

        Though analytics.js is coming live from the mother ship, so what's one more to the list?

        • jwz says:
          1

          The way it normally works in every WordPress configuration is that every avatar image goes through gravatar.com, even when it's returning the default "no image" image. That means that gravatar.com is getting a webbug on every page load from every viewer.  Gravatar is owned by WordPress, so both of us are already trusting them to a significant degree. Their privacy policy says they don't monetize that info.

          It was like that here for a decade, and you didn't complain before, and neither did anybody else.

          Recently I changed it so that instead of the gravatars being fetched at each page load, I just fetch them once, when the comment is posted, and I serve them from my local copy (via a CDN). So that reduces gravatar's potential surveillance from "every page view" to "once, for the comment-poster only". It's also faster because it means that all of those "unknown" icons are cached under the same URL, instead of being unique URLs that happen to return identical PNG data. Side effect: your gravatar image here is frozen at what it was at the time of your last post, even if you change it later. That's probably a feature, not a bug.

          (Also, Gravatar doesn't get your email address, just an MD5 hash of it.)

          If your proposal is "your blog should not have the ability to display avatars", the answer is "no".

          If you don't have analytics.js blocked already as a matter of course, why are you even concerned about this.

          • prefetch says:

            Gravatar and analytics have been blacklisted here since they came to light (hence the CDN appreciation - hey, look - faces!); this is more a "be the change you want to see" hand-wave, prompted by the 'set' button appearing. But it's a nice implementation to be sure, a lot less gross than the default.

            Privacy policies: only as good as the current version, only as good as the current owner. And of little interest to third-party sellers.

            • jwz says:

              But what I want to see is people's avatars on their comments. So that's what I did. And Gravatar is the only practical way to accomplish that.

              Feel free to say "but you shouldn't want that" all you like.

              I used to use a WordPress plugin called "Postmatic Social Commenting" that would allow you to authenticate via Facebook, Google, Twitter or any OpenID provider, and that would send back an avatar and email address to use on the comment, but that plugin stopped working many years ago. And OpenID, which is the one of those providers that might interest you, seems to have joined the dustbin of history.

  18. Eric TF Bat says:

    Interesting! But can it handle... paste???

    This is written in Microsoft Word.

    The above had superscript, subscript, background colours and a bunch of other formatting stuff.  All of it was stripped out by pasting it in here, leaving just the random link, bold and italic.  I strongly feel that this is the Right Thing.  Bravo, Trix!

    Gravatar is a lot quicker too, I think.  Can't remember if it even worked before.

    Look - nothing is ever going to be perfect, but this is bloody good.

  19. JohnB says:
    filter: invert(68%) sepia(36%) saturate(6175%) hue-rotate(79deg) brightness(115%) contrast(128%)
    Glad you got it working. I don't know CSS or SVG but that makes perfect sense to me. I've spent too much time recently rewriting the HSL code in my app.
  20. Adolf Osborne says:
    1

    <blink>but does it blink?</blink>

  • Previously