Problem/Motivation

Over at #1911884: Enable CKEditor in the Standard install profile, we enabled CKEditor for the "Basic HTML" text format (the successor of the "Filtered HTML" for authenticated users, the closed down variant "Restricted HTML").

We agreed there that we should also enable CKEditor for the "Full HTML" text format. (It's deferred to this issue because the question of which buttons should be enabled when in principle all HTML tags are allowed — as is the case for the "Full HTML" format is a tricky one, likely to lead to bikeshedding.)

Proposed resolution

  1. Enable CKEditor by default for the "Full HTML" text format.
  2. In its CKEditor configuration, enable additional buttons that are most commonly used. E.g. the Strikethrough, Superscript, Remove Formatting and Table buttons.
  3. Ensure that CKEditor's configuration allows the <script> tag unless a FILTER_TYPE_HTML_RESTRICTOR-type filter is used that disallows that tag (see relevant parts of #1911884: Enable CKEditor in the Standard install profile for more info about that).

Remaining tasks

  1. Get concensus on which buttons to enable.
  2. Ensure that the <script> tag is not removed by CKEditor.

User interface changes

CKEditor enabled by default for the "Full HTML" text format.

API changes

None.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Wim Leers’s picture

Status: Active » Needs review
FileSize
859 bytes

A very rough initial patch, that only implements points 1 & 2 of the proposed resolution (i.e. does not yet deal with CKEditor stripping <script> tags by default).

Wim Leers’s picture

Point 3 is too big to solve here, so I created a separate issue for that: #1936392: Configure CKEditor's "Advanced Content Filter" (ACF) to match Drupal's text filters settings. Patch ready there.

That means this patch is also feature-complete, besides the necessary dose of bikeshedding on which buttons should be allowed :)

yoroy’s picture

What *is* the full list anyway?
Maybe it helps to build consensus around the absolute no-go's first.

Wim Leers’s picture

Good question!

The full list can be viewed in all its glory over at http://ckeditor.com/demo#full.

This is the corresponding toolbar configuration:

[ { "groups" : [ "mode",
        "document",
        "doctools"
      ],
    "items" : [ "Source",
        "-",
        "NewPage",
        "Preview",
        "Print",
        "-",
        "Templates"
      ],
    "name" : "document"
  },
  { "groups" : [ "clipboard",
        "undo"
      ],
    "items" : [ "Cut",
        "Copy",
        "Paste",
        "PasteText",
        "PasteFromWord",
        "-",
        "Undo",
        "Redo"
      ],
    "name" : "clipboard"
  },
  { "groups" : [ "find",
        "selection",
        "spellchecker"
      ],
    "items" : [ "Find",
        "Replace",
        "-",
        "SelectAll",
        "-",
        "Scayt"
      ],
    "name" : "editing"
  },
  { "items" : [ "Form",
        "Checkbox",
        "Radio",
        "TextField",
        "Textarea",
        "Select",
        "Button",
        "ImageButton",
        "HiddenField"
      ],
    "name" : "forms"
  },
  "/",
  { "groups" : [ "basicstyles",
        "cleanup"
      ],
    "items" : [ "Bold",
        "Italic",
        "Underline",
        "Strike",
        "Subscript",
        "Superscript",
        "-",
        "RemoveFormat"
      ],
    "name" : "basicstyles"
  },
  { "groups" : [ "list",
        "indent",
        "blocks",
        "align"
      ],
    "items" : [ "NumberedList",
        "BulletedList",
        "-",
        "Outdent",
        "Indent",
        "-",
        "Blockquote",
        "CreateDiv",
        "-",
        "JustifyLeft",
        "JustifyCenter",
        "JustifyRight",
        "JustifyBlock"
      ],
    "name" : "paragraph"
  },
  { "items" : [ "Link",
        "Unlink",
        "Anchor"
      ],
    "name" : "links"
  },
  { "items" : [ "Image",
        "Flash",
        "Table",
        "HorizontalRule",
        "SpecialChar",
        "Smiley",
        "PageBreak",
        "Iframe"
      ],
    "name" : "insert"
  },
  "/",
  { "items" : [ "Styles",
        "Format",
        "Font",
        "FontSize"
      ],
    "name" : "styles"
  },
  { "items" : [ "TextColor",
        "BGColor"
      ],
    "name" : "colors"
  },
  { "items" : [ "Maximize",
        "ShowBlocks"
      ],
    "name" : "tools"
  },
  { "items" : [ "-" ],
    "name" : "others"
  },
  { "items" : [ "About" ],
    "name" : "about"
  }
]

Anything in the "forms" group is an obvious no-go. In the "insert" group, I'd say "Flash", "Smiley", "PageBreak" and "Iframe" should be non-default. In the "document" group, everything except for "Source" is definitely a very bad fit for Drupal. And finally, in the "paragraph" group, the "CreateDiv" button should be non-default.

Bojhan’s picture

Agreed with WimLeers his assumption there, I am also not sure about text color?

Wim Leers’s picture

Oh, yes, Text Color is also out of the question!

Bojhan’s picture

[ { "groups" : [ "mode",
        "document",
        "doctools"
      ],
    "items" : [ "Source",
        "-",
        "NewPage",
        "Preview",
        "Print",
        "-",
        "Templates"
      ],
    "name" : "document"
  },
  { "groups" : [ "clipboard",
        "undo"
      ],
    "items" : [ "Cut",
        "Copy",
        "Paste",
        "PasteText",
        "PasteFromWord",
        "-",
        "Undo",
        "Redo"
      ],
    "name" : "clipboard"
  },
  { "groups" : [ "find",
        "selection",
        "spellchecker"
      ],
    "items" : [ "Find",
        "Replace",
        "-",
        "SelectAll",
        "-",
        "Scayt"
      ],
    "name" : "editing"
  },
  "/",
  { "groups" : [ "basicstyles",
        "cleanup"
      ],
    "items" : [ "Bold",
        "Italic",
        "Underline",
        "Strike",
        "Subscript",
        "Superscript",
        "-",
        "RemoveFormat"
      ],
    "name" : "basicstyles"
  },
  { "groups" : [ "list",
        "indent",
        "blocks",
        "align"
      ],
    "items" : [ "NumberedList",
        "BulletedList",
        "-",
        "Outdent",
        "Indent",
        "-",
        "Blockquote",
        "-",
        "JustifyLeft",
        "JustifyCenter",
        "JustifyRight",
        "JustifyBlock"
      ],
    "name" : "paragraph"
  },
  { "items" : [ "Link",
        "Unlink",
        "Anchor"
      ],
    "name" : "links"
  },
  { "items" : [ "Image",
        "Table",
        "HorizontalRule",
        "SpecialChar",
      ],
    "name" : "insert"
  },
  "/",
  { "items" : [ "Styles",
        "Format",
      ],
    "name" : "styles"
  },
  { "items" : [ "Maximize",
        "ShowBlocks"
      ],
    "name" : "tools"
  },
  { "items" : [ "-" ],
    "name" : "others"
  },
  { "items" : [ "About" ],
    "name" : "about"
  }
]

What about this? I think we should avoid elements that introduce relatively random elements into the website. We want to avoid that "content managers" turn to all kinds of weird tools to get things done, rather than consult their developers. Tools that have a high potential for abuse, but also the things that are not a right fit for a CMS.

wwalc’s picture

I'm going to add a bit different point of view, maybe someone else will agree. Sometimes Drupal is used by people that have very little knowledge about web standards. They still have a lot of things to learn, but in the meantime they'll be looking for various "uncool" features like e.g. TextColor / BGColor.

I'd say that when Drupal 8 comes out, the group of less advanced users may even enlarge, also because in general the whole installation process will be less complicated.

So to keep them happy, leaving these kind of buttons as an option in Full HTML might be the way to go, even if we all would not use these two buttons when creating a website. Not because I'm particular fan of them, but just because I'd say if it can save a part of users a headache with doing funny things like replacing CKEditor in order to get some buttons, then it might be worth of it.

It may be just a bit weird for a less advanced user that it is technically possible to enter anything in source mode, but there are no buttons to do it without messing up source code.

Wim Leers’s picture

Implemented Bojhan's suggestion of #7, literally as he posted it (same order, same grouping, same rows). The only modifications are

  1. omissions, because they're not part of our CKEditor build: NewPage, Preview, Print and Templates; Find, Replace, SelectAll and Scayt.
  2. omissions, because the buttons are not yet available and under discussion at #1907418: Make CKEditor's alignment + underline buttons available (but not enabled by default): Underline, JustifyLeft, JustifyCenter, JustifyRight, JustifyBlock

I also had to add the "About" button to the list of buttons provided, that was simply forgotten in the previous issue and is not contentious.

It looks like this:
ckeditor-full-html-initial.png


#8: I see your point, but I personally think that's a bridge too far. It's in the same alley as #1907418: Make CKEditor's alignment + underline buttons available (but not enabled by default). If we want to provide those buttons at all, we should discuss that in a new issue. If you can enumerate the full list of buttons that you would like to see available that are currently missing, then I'll create the issue.

Wim Leers’s picture

Points of criticism I have for the patch in #9:

  1. Having the "Styles" button without configured styles doesn't make any sense. We can't provide styles either, because they have to be present in the user's theme. Hence, that button should be disabled by default.
  2. The big gaps of whitespace on the first and last rows are… annoying. We should reduce it to two rows.

Hence, I propose this instead:
ckeditor-full-html-initial-proposal-10.png

Bojhan’s picture

I agree, we shouldn't have any useless buttons :). I agree that this should really be two rows - the proposed button order for that seems fine.

Wim Leers’s picture

As per #11, attached patch implements what the screenshot in #10 depicts.

quicksketch’s picture

I also had to add the "About" button to the list of buttons provided, that was simply forgotten in the previous issue and is not contentious.

Heh, here's quicksketch to be contentious. ;)

The about button doesn't have anything to do with Full HTML as it doesn't add any new tags (it just displays the CKEditor version). In the long run, my hope for the about button was that we would use the same approach as Github and Confluence and use the "about" button (really just the "?" icon) to bring up useful help such as the keyboard shortcuts for all of the available buttons. Although I'm not sure how to accomplish this piece, I'd also like to move the filter tips to the help dialog when CKEditor is enabled so we can reduce the cruft on the page below textareas. So basically I think at this point we shouldn't add the About button for two reasons: it doesn't add/require any tags and I'd like to use it for something more extensive in the future (and enable it in the default toolbar).

Wim Leers’s picture

#13: Fair enough :) I was just trying to be nice to the CKEditor guys by having the only button that identifies the WYSIWYG editor in there.

Besides that very minor aspect: +1 or -1 for the proposal?

quicksketch’s picture

Hm hm. There are a lot of buttons here that actually don't have to do with HTML tags. copy/cut/paste (both normal and from word), undo/redo, symbols, remove formatting.

Some make sense (remove formatting) since you're more likely to need them if doing a lot of formatting. I'm not sure about adding other things that aren't related tags at all just to make the editor appear more powerful. But then you end up in a situation where you have a very uncomfortable number of buttons that don't really work on either 1 or 2 lines (it's like only 1.5 lines).

This might be too much psychological theorizing, but I'd like to avoid giving end-users multiple reasons to always use Full HTML over Basic HTML. If a user wants copy/paste or undo/redo buttons, we should try to encourage them to add the buttons they need to Basic HTML rather than simply granting Full HTML to all users.

I do really like removing auto-p and auto-a from Full HTML. Those have always been an inconvenience for my use of Full HTML (which is typically for small HTML snippets rather than actual content).

quicksketch’s picture

FileSize
30.55 KB

If we take this policy its full length and only add buttons that add tags to the Full HTML editor, then you end up with this:

Toolbars

Really "remove formatting" shouldn't be in there either for full compliance.

Wim Leers’s picture

So you are proposing to omit:

  • cut/copy/paste/paste as plain text/paste from word -> agreed, I think they're just noise. "Full HTML" implies admin, admin of a website implies knowing shortcuts for these. As for the 3 flavors of pasting: that should just work well out of the box.
  • undo/redo -> agreed: I tested it manually and those also work just fine with the standard shortcuts for them
  • maximize/show blocks -> disagreed: I think these can be highly useful. Why do you want to remove them?
  • outdent/indent -> agreed.
  • anchor -> agreed: very rarely this is used.
  • special char -> not sure: this can actually be very helpful. Though I guess most sites don't need this. So: agreed.

I also like your ordering much better :)

So what about this (identical to yours, with the addition of show blocks and maximize):
ckeditor-full-html-proposal-17.png

quicksketch’s picture

Looks good to me. Show invisibles is definitely more likely to be helpful on Full HTML since that's when invisibles are likely to occur. Why is Full Screen more helpful for Full HTML than Basic HTML? Should it be added in both places?

Wim Leers’s picture

"Full Screen" would indeed also be helpful on Basic HTML. I'm fine with adding it there too.

Bojhan’s picture

I think that nate's reduction in #16 was a little drastic, i think switching between basic html and full html should be a noticeable difference. However it seems WimLeers his proposal actually finds the right balance.

I would definitely defer adding "Full screen mode" to a followup. Basic HTML will be shown in many many places where adding even just one more button, adds significant clutter. Although its a good feature, I have rarely seen users actually using this (although this might be due to the usability test setting, where going into "zen" mode is not really part of the flow). However I think its usefulness is disputable on forms, where there is not one "centric body" and there are loads of textareas, in that case you would want to do better signalling of which field you went into zen mode for. So with all those considerations in mind, deferring it to a follow up would be a better strategy I think.

Wim Leers’s picture

We've got consensus for everything except for the "Full Screen" button. Let's defer that to a follow-up issue then. Removed it.

RTBC? :)

Bojhan’s picture

Status: Needs review » Reviewed & tested by the community

Lets do this!

quicksketch’s picture

I'm happy to see auto-p and auto-a removed from Full HTML. I'm still a bit skeptical because my particular usage of Full HTML rarely would require a WYSIWYG. However I think it's easier to remove settings (or add a new empty text format) than it is to set up an editor, and if I were a new user to Drupal I would expect "Full HTML" to be a WYSIWYG like "Basic HTML"... just more of it (like this patch adds). So +1 from me too.

webchick’s picture

Status: Reviewed & tested by the community » Fixed

Woohoo! :)

Committed and pushed to 8.x. Thanks!

quicksketch’s picture

This issue kind of heightens the importance of #1936392: Configure CKEditor's "Advanced Content Filter" (ACF) to match Drupal's text filters settings, since things like <script> and <style> are being stripped out on the Full HTML format. Any Full HTML existing content that uses these tags will immediately be mangled by CKEditor upon edit now.

Wim Leers’s picture

Indeed, #25 is spot-on.

And in reply to #23: you can of course just enable source mode in the wysiwyg editor when it bothers you :)

Wim Leers’s picture

Issue tags: -sprint

.

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary: View changes

Updated issue summary.