feat(server): mimic frontend CSS in ckeditor editor (#616)

ia-toki · Mar 17, 2024 · 0095ae2 · 0095ae2
1 parent 1ddbd63
commit 0095ae2
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 27 deletions.
diff --git a/...pp/src/main/resources/assets/css/main.css → .../src/main/resources/assets/css/main-2.css b/...pp/src/main/resources/assets/css/main.css → .../src/main/resources/assets/css/main-2.css
@@ -227,6 +227,7 @@ input[type="text"], input[type="password"], textarea {
 .content-text {
   font-size: 15px;
   line-height: 1.5;
+  color: #1c2127;
  }
 
 .content-text.scrollable {
@@ -241,7 +242,7 @@ input[type="text"], input[type="password"], textarea {
 
 .content-text table, .content-text th, .content-text td {
   border-collapse: collapse;
-  border: 1px solid black;
+  border: 1px solid #1c2127;
 }
 
 .content-text th, .content-text td {
@@ -251,7 +252,7 @@ input[type="text"], input[type="password"], textarea {
 .content-text th {
   font-family: var(--accent-font);
   font-weight: bold;
-  background-color: #EEEEEE;
+  background-color: #eeeeee;
 }
 
 .content-text em {
@@ -270,6 +271,11 @@ input[type="text"], input[type="password"], textarea {
   font-size: 14px !important;
 }
 
+.content-text pre, .content-text code {
+  color: #1c2127;
+  background-color: #f5f5f5;
+}
+
 .content-text ol.breadcrumb li {
   margin-left: 0;
 }
@@ -317,6 +323,11 @@ input[type="text"], input[type="password"], textarea {
   font-size: 17px !important;
 }
 
+textarea.cke_source {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace !important;
+  color: #1c2127;
+}
+
 th {
   font-family: var(--accent-font);
   font-weight: bold;

diff --git a/...els-backends/judgels-server-app/src/main/resources/judgels/michael/resource/ckeditor-2.js b/...els-backends/judgels-server-app/src/main/resources/judgels/michael/resource/ckeditor-2.js
@@ -0,0 +1,87 @@
+document.addEventListener('DOMContentLoaded', function() {
+  CKEDITOR.config.toolbar = [
+    ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'],
+    ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote'],
+    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
+    ['Image', 'Link', 'Table'],
+    ['Styles', 'Format'],
+    ['Source', '-', 'Preview']
+  ];
+  CKEDITOR.config.allowedContent = {
+    $1: {
+      // Use the ability to specify elements as an object.
+      elements: CKEDITOR.dtd,
+      attributes: true,
+      styles: true,
+      classes: true
+    }
+  };
+  CKEDITOR.config.height = 600;
+  CKEDITOR.config.extraAllowedContent = 'iframe embed';
+  CKEDITOR.config.disallowedContent = 'script; *[on*]';
+  CKEDITOR.config.removePlugins = 'exportpdf';
+  CKEDITOR.addCss(`
+    .cke_editable {
+      font-size: 14px;
+      color: #1c2127;
+    }
+
+    h3 {
+      font-family: 'Roboto', sans-serif;
+      font-size: 17px;
+      font-weight: bold;
+      margin-top: 20px;
+      margin-bottom: 10px;
+    }
+
+    h4 {
+      font-family: 'Roboto', sans-serif;
+      font-size: 15px;
+      font-weight: bold;
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+
+    pre {
+      padding: 9.5px;
+      margin: 0 0 10px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
+
+    pre, code {
+      background-color: #f5f5f5;
+    }
+
+    code {
+      padding: 2px 4px;
+      border-radius: 4px;
+      font-size: 90%;
+    }
+
+    ul, ol {
+      padding-left: 25px;
+    }
+
+    table {
+      border-collapse: collapse;
+    }
+
+    th {
+      font-weight: bold;
+      background-color: #eeeeee;
+      text-align: left;
+    }
+
+    th, td {
+      padding: 5px;
+    }
+
+    blockquote {
+      padding: 10px 20px;
+      margin: 0 0 20px;
+      border-left: 5px solid #eee;
+      font-style: normal;
+    }
+  `);
+}, false);
diff --git a/judgels-backends/judgels-server-app/src/main/resources/judgels/michael/resource/ckeditor.ftl b/judgels-backends/judgels-server-app/src/main/resources/judgels/michael/resource/ckeditor.ftl
@@ -1,2 +1,2 @@
 <script src="/webjars/ckeditor/full/ckeditor.js"></script>
-<script><#include "ckeditor.js"></script>
+<script><#include "ckeditor-2.js"></script>
diff --git a/judgels-backends/judgels-server-app/src/main/resources/judgels/michael/resource/ckeditor.js b/judgels-backends/judgels-server-app/src/main/resources/judgels/michael/resource/ckeditor.js
diff --git a/...ckends/judgels-server-app/src/main/resources/judgels/michael/template/base/baseLayout.ftl b/...ckends/judgels-server-app/src/main/resources/judgels/michael/template/base/baseLayout.ftl
@@ -9,7 +9,7 @@
       <link rel="stylesheet" href="/webjars/open-sans/css/open-sans.min.css">
       <link rel="stylesheet" href="/webjars/roboto-fontface/css/roboto/roboto-fontface.css">
       <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css">
-      <link rel="stylesheet" href="/assets/css/main.css">
+      <link rel="stylesheet" href="/assets/css/main-2.css">
       <link rel="shortcut icon" type="image/ico" href="/assets/images/favicon.ico">
       <script src="/webjars/jquery/jquery.min.js"></script>
       <script src="/webjars/bootstrap/js/bootstrap.min.js"></script>