Use an custom theme for mediumjs and translate tooltips

css/medium.scss

@@ -0,0 +1,125 @@
+// theme settings
+$medium-editor-bgcolor: #000;
+$medium-editor-button-size: 20px;
+$medium-editor-button-active-text-color: #fff;
+$medium-editor-hover-color: $medium-editor-bgcolor;
+$medium-editor-link-color: #fff;
+$medium-editor-border-radius: 8px;
+$medium-editor-placeholder-color: #f8f5f3;
+
+// theme rules
+.medium-toolbar-arrow-under:after {
+    border-color: $medium-editor-bgcolor transparent transparent transparent;
+    top: $medium-editor-button-size;
+}
+
+.medium-toolbar-arrow-over:before {
+    border-color: transparent transparent $medium-editor-bgcolor transparent;
+}
+
+.medium-editor-toolbar {
+    background-color: $medium-editor-bgcolor;
+    border: none;
+    border-radius: $medium-editor-border-radius;
+
+    li {
+        button {
+            background-color: transparent;
+            border: none;
+            box-sizing: border-box;
+            color: $medium-editor-link-color;
+            height: $medium-editor-button-size;
+            min-width: $medium-editor-button-size;
+            padding: 5px 12px;
+            opacity: 0.6;
+            transition: background-color .2s ease-in, color .2s ease-in;
+            &:hover {
+                background-color: $medium-editor-hover-color;
+                color: $medium-editor-button-active-text-color;
+                opacity: 1.0;
+            }
+        }
+
+        .medium-editor-button-first {
+            border-bottom-left-radius: $medium-editor-border-radius;
+            border-top-left-radius: $medium-editor-border-radius;
+            //padding-left: 24px;
+        }
+
+        .medium-editor-button-last {
+            border-bottom-right-radius: $medium-editor-border-radius;
+            border-right: none;
+            border-top-right-radius: $medium-editor-border-radius;
+            //padding-right: 24px
+        }
+
+        .medium-editor-button-active {
+            background-color: $medium-editor-hover-color;
+            color: $medium-editor-button-active-text-color;
+            opacity: 1.0;
+        }
+    }
+}
+
+.medium-editor-toolbar-form {
+    background: $medium-editor-bgcolor;
+    border-radius: $medium-editor-border-radius;
+    color: $medium-editor-link-color;
+    overflow: hidden;
+
+    .medium-editor-toolbar-input {
+        background: $medium-editor-bgcolor;
+        box-sizing: border-box;
+        color: $medium-editor-link-color;
+        height: $medium-editor-button-size;
+        padding-left: 16px;
+        width: 220px;
+
+        &::-webkit-input-placeholder {
+           color: $medium-editor-placeholder-color;
+           color: rgba($medium-editor-placeholder-color, .8);
+        }
+        &:-moz-placeholder { /* Firefox 18- */
+           color: $medium-editor-placeholder-color;
+           color: rgba($medium-editor-placeholder-color, .8);
+        }
+        &::-moz-placeholder {  /* Firefox 19+ */
+           color: $medium-editor-placeholder-color;
+           color: rgba($medium-editor-placeholder-color, .8);
+        }
+        &:-ms-input-placeholder {
+           color: $medium-editor-placeholder-color;
+           color: rgba($medium-editor-placeholder-color, .8);
+        }
+    }
+
+    a {
+        color: $medium-editor-link-color;
+        transform: translateY(2px);
+    }
+
+    .medium-editor-toolbar-close {
+      margin-right: 16px;
+    }
+}
+
+.medium-editor-toolbar-anchor-preview {
+    background: $medium-editor-bgcolor;
+    border-radius: $medium-editor-border-radius;
+    padding: 5px 12px;
+}
+
+.medium-editor-anchor-preview {
+  a {
+    color: $medium-editor-link-color;
+    text-decoration: none;
+    margin: 5px;
+    font-size: small;
+  }
+}
+
+.medium-editor-toolbar-actions {
+  li, button {
+    border-radius: $medium-editor-border-radius;
+  }
+}

js/script.js

@@ -243,19 +243,20 @@ View.prototype = {
         // Create medium div editor.
         var autolist = new AutoList();
         var editor = new MediumEditor(modalcontent, {
-            targetBlank: true,
             toolbar: {
                 buttons: [
-                    'bold',
+                    { name: 'bold', aria: t('quicknotes', 'Bold') },
-                    'italic',
+                    { name: 'italic', aria: t('quicknotes', 'Italic') },
-                    'underline',
+                    { name: 'underline', aria: t('quicknotes', 'Underline') },
-                    'strikethrough',
+                    { name: 'strikethrough', aria: t('quicknotes', 'Strikethrough') },
-                    'unorderedlist','orderedlist',
+                    { name: 'unorderedlist', aria: t('quicknotes', 'Bulleted list') },
-                    'quote',
+                    { name: 'orderedlist', aria: t('quicknotes', 'Numbered list') },
-                    'removeFormat'
+                    { name: 'quote', aria: t('quicknotes', 'Blockquote') },
+                    { name: 'removeFormat', aria: t('quicknotes', 'Clean format') }
                ]
             },
             autoLink: true,
+            targetBlank: true,
             paste: {
                 forcePlainText: false,
                 cleanPastedHTML: false

templates/main.php

@@ -4,11 +4,11 @@ script('quicknotes', 'templates');
 vendor_script('quicknotes', 'isotope.pkgd');
 vendor_script('quicknotes', 'medium-editor');
 vendor_style('quicknotes', 'medium-editor');
-vendor_style('quicknotes', 'beagle');
 vendor_script('quicknotes', 'autolist');
 script('quicknotes', 'qn-dialogs');
 script('quicknotes', 'script');
 style('quicknotes', 'style');
+style('quicknotes', 'medium');
 ?>
 
 	<div id="app-navigation">