Issue #2027181 by Wim Leers, seutje, Bojhan: Use a CKEditor Widget to create a...

Issue #2027181 by Wim Leers, seutje, Bojhan: Use a CKEditor Widget to create a stellar UX for captioning and aligning images.

core/themes/bartik/css/ckeditor-iframe.css

+/**
+ * @file
+ * Approximate Bartik's style in CKEditor instances on the Drupal back-end.
+ */
+
+/* -------------- Captions -------------- */
+
+.caption > * {
+  background: #F3F3F3;
+  padding: 0.5ex;
+  border: 1px solid #CCC;
+}
+
+.caption > figcaption {
+  border: 1px solid #CCC;
+  border-top: none;
+  padding-top: 0.5ex;
+  font-size: small;
+  text-align: center;
+}
+
+/* Override Bartik's default blockquote and pre styles when captioned. */
+.caption-pre > pre,
+.caption-blockquote > blockquote {
+  margin: 0;
+}
+.caption-blockquote > figcaption::before {
+  content: "— ";
+}
+.caption-blockquote > figcaption {
+  text-align: left;
+}
+[dir="rtl"] .caption-blockquote > figcaption {
+  text-align: right;
+}