Merge pull request #94 from uasoft-indonesia/bugfix/text_editor

Bugfix/text editor
uasoft-indonesia · May 20, 2021 · 8dc8668 · 8dc8668
2 parents 65f75df + 3af7bdb
commit 8dc8668
Showing 1 changed file with 56 additions and 41 deletions.
diff --git a/src/resources/js/components/BadasoEditor.vue b/src/resources/js/components/BadasoEditor.vue
@@ -1,7 +1,12 @@
 <template>
   <vs-col :vs-lg="size" vs-xs="12" class="mb-3">
     <label v-if="label != ''" for="" class="vs-input--label">{{ label }}</label>
-    <editor id="tinymce" :value="value" @input="handleInput($event)" :init="init"></editor>
+    <editor
+      id="tinymce"
+      :value="value"
+      @input="handleInput($event)"
+      :init="init"
+    ></editor>
     <div v-if="additionalInfo" v-html="additionalInfo"></div>
     <div v-if="alert">
       <div v-if="$helper.isArray(alert)">
@@ -22,6 +27,15 @@
 <script>
 import tinymce from "tinymce";
 import TinyMCE from "@tinymce/tinymce-vue";
+
+import "tinymce/themes/silver/theme";
+import "tinymce/themes/mobile/theme";
+
+import "tinymce/icons/default/icons";
+import "tinymce/skins/ui/oxide/skin.min.css";
+import "tinymce/skins/ui/oxide/content.min.css";
+// import 'tinymce/skins/content/default/content.css'
+
 import "tinymce/plugins/advlist";
 import "tinymce/plugins/anchor";
 import "tinymce/plugins/contextmenu";
@@ -66,72 +80,73 @@ import "tinymce/plugins/charmap";
 import "tinymce/plugins/code";
 import "tinymce/plugins/codesample";
 import "tinymce/plugins/colorpicker";
+import "tinymce/plugins/emoticons/js/emojis";
 
 export default {
   name: "BadasoEditor",
   components: {
-    "editor": TinyMCE,
+    editor: TinyMCE,
   },
   data() {
     return {
       init: {
         height: 500,
         plugins: [
-          'lists advlist',
-          'image imagetools',
-          'link autolink',
-          'table',
-          'charmap',
-          'searchreplace visualblocks code fullscreen',
-          'print preview anchor insertdatetime media',
-          'help codesample hr pagebreak nonbreaking toc textpattern noneditable ',
-          'importcss',
-          'directionality',
-          'visualchars',
-          'emoticons',
-          'autosave'
+          "lists advlist",
+          "image imagetools",
+          "link autolink",
+          "table",
+          "charmap",
+          "searchreplace visualblocks code fullscreen",
+          "print preview anchor insertdatetime media",
+          "help codesample hr pagebreak nonbreaking toc textpattern noneditable ",
+          "importcss",
+          "directionality",
+          "visualchars",
+          "emoticons",
+          "autosave",
         ],
         toolbar: [
-          'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect',
-          'alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | preview save print | insertfile image media template link anchor codesample | ltr rtl',
+          "undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect",
+          "alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | preview save print | insertfile image media template link anchor codesample | ltr rtl",
         ],
         menubar: true,
         convert_urls: false,
         images_upload_handler: (blobInfo, success, failure) => {
           const blob = blobInfo.blob();
           const filename = blobInfo.filename();
-          const base64 = 'data:' + blob.type + ';base64,' + blobInfo.base64();
+          const base64 = "data:" + blob.type + ";base64," + blobInfo.base64();
           let files = [
             {
               name: filename,
               base64: base64,
-              file: File
-            }
+              file: File,
+            },
           ];
 
           this.$openLoader();
           this.$api.badasoFile
-          .upload(files)
-          .then((response) => {
-            this.$closeLoader();
-            if (this.$helper.isValidHttpUrl(response[0])) {
-              success(response[0]);
-            } else {
-              success('/storage/' + response[0]);
-            }
-          })
-          .catch((error) => {
-            failure(error);
-            this.$closeLoader();
-            this.$vs.notify({
-              title: this.$t("alert.danger"),
-              text: error.message,
-              color: "danger",
+            .upload(files)
+            .then((response) => {
+              this.$closeLoader();
+              if (this.$helper.isValidHttpUrl(response[0])) {
+                success(response[0]);
+              } else {
+                success("/storage/" + response[0]);
+              }
+            })
+            .catch((error) => {
+              failure(error);
+              this.$closeLoader();
+              this.$vs.notify({
+                title: this.$t("alert.danger"),
+                text: error.message,
+                color: "danger",
+              });
             });
-          });
-        }
-      }
-    }
+        },
+      },
+    };
   },
   props: {
     size: {
@@ -171,4 +186,4 @@ export default {
 .tox-tinymce-aux {
   z-index: 50000 !important;
 }
-</style>
+</style>