ldc-op-insta/resources/ts/bo/components/CkEditorComponent.vue

<template>
  <div>
    <div ref="wordCounter" />
    <div ref="ckeditor" />
    <input
      :id="internalId"
      class="form-control"
      type="hidden"
      :name="name"
      :value="internalText"
      :required="internalRequired"
    >
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import trans from "./../../modules/trans";
import "./../../../js/vendor/ckeditor";
// import { CKUploadAdaptater } from "../../bo/CkUploadAdaptater";

export default defineComponent({
  emits: ["input"],
  mixins: [trans],
  beforeMount() {
    if (!this.$attrs.json) {
      throw new Error("this component requires json");
    }
  },
  mounted() {
    const json = String(this.$attrs.json ?? "{}"),
          data = JSON.parse(json);
    this.name = data.name;
    this.internalText = data.text ? String(data.text) : "";
    this.internalId = data.id ? data.id : "";
    this.internalRequired = Boolean(data.required);
    this.makeSuperBuild();
  },
  data(): {
    name: string;
    internalText: string;
    internalId: string;
    internalRequired: boolean;
    // @ts-ignore
    editor: ClassicEditor | null;
    words: number;
    chars: number;
  } {
    return {
      name: "",
      internalText: "",
      internalId: "",
      internalRequired: false,
      editor: null,
      words: 0,
      chars: 0,
    };
  },
  watch: {
    dbtext() {
      if (this.internalText != this.dbtext) {
        this.internalText = this.dbtext;
        if (this.editor) {
          this.editor.setData(this.internalText);
        }
      }
    },
  },
  methods: {
    makeSuperBuild() {
      const self = this,
            ckeditor = this.$refs.ckeditor as HTMLElement,
            wordCounter = this.$refs.wordCounter as HTMLElement;
      // @ts-ignore
      ClassicEditor.create(ckeditor, {
        extraPlugins: [
          // // @ts-ignore
          // (editor) => {
          //   editor.plugins.get("FileRepository").createUploadAdapter = (
          //     // @ts-ignore
          //     loader
          //   ) => {
          //     // Configure the URL to the upload script in your back-end here!
          //     return new CKUploadAdaptater(loader);
          //   };
          // },
        ],
        wordCount: {
          container: wordCounter,
          // @ts-ignore
          onUpdate: (stats) => {
            this.chars = stats.characters;
            this.words = stats.words;
          },
        },
        mediaEmbed: {
          previewsInData: false,
          removeProviders: [
            "instagram",
            "twitter",
            "googleMaps",
            "flickr",
            "facebook",
            "dailymotion",
            "spotify",
          ],
        },
        toolbar: {
          items: [
            "heading",
            "|",
            "bold",
            "italic",
            "underline",
            "link",
            "bulletedList",
            "numberedList",
            "|",
            "outdent",
            "indent",
            "alignment",
            "|",
            "undo",
            "redo",
            "|",
            "blockQuote",
            "|",
            // "insertTable",
            // "tableColumn",
            // "tableRow",
            // "mergeTableCells",
            "|",
            // "fontColor",
            // "fontFamily",
            "fontSize",
            "horizontalLine",
            "|",
            "removeFormat",
            "|",
            "sourceEditing",
          ],
        },
        // table: {
        //   contentToolbar: [
        //     "tableColumn",
        //     "tableRow",
        //     "mergeTableCells",
        //     "tableProperties",
        //     "tableCellProperties",
        //     "toggleTableCaption",
        //   ],
        // },
        language: "fr",
      })
        // @ts-ignore
        .then((editor: ClassicEditor) => {
          self.editor = editor;
          editor.setData(this.internalText);
          editor.model.document.on("change:data", () => {
            // * Keep track of internal editor
            let data = editor.getData();
            self.internalText = data;
            self.$emit("input", data);
          });
        })
        // @ts-ignore
        .catch((error) => {
          console.error("Oops, something went wrong!");
          console.error(
            "Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:"
          );
          console.warn("Build id: x0tjc6omqq4d-iydt761tuj51");
          console.error(error);
        });
    },
  },
});
</script>

<style lang="scss">
@import url("./../../../js/vendor/ckeditor/build/styles.css");
.ck-rounded-corners {
  border-radius: 0 0 0.375rem 0.375rem !important;
}
.ck-word-count {
  background-color: #fafafa;
  border: 1px solid #c4c4c4;
  border-bottom: 0px;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  color: initial;
  display: flex;
  flex-direction: row;
  justify-content: space-around !important;
}
.ck-content {
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.ck-focused {
  border-color: #86b7fe !important;
  box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%) !important;
  outline: 0 !important;
}
</style>