ldc-loue/resources/ts/components/bo/CkEditorBoComponent.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/build/ckeditor";
import { CKUploadAdaptater } from "../../back/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) => {
            // @ts-ignore
            editor.plugins.get("FileRepository").createUploadAdapter = (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",
            "|",
            "insertImage",
            "mediaEmbed",
            "blockQuote",
            "|",
            "insertTable",
            "tableColumn",
            "tableRow",
            "mergeTableCells",
            "|",
            "fontColor",
            "fontFamily",
            "fontSize",
            "horizontalLine",
            "|",
            "removeFormat",
            "|",
            "undo",
            "redo",
            "|",
            "sourceEditing",
          ],
        },
        table: {
          contentToolbar: [
            "tableColumn",
            "tableRow",
            "mergeTableCells",
            "tableProperties",
            "tableCellProperties",
            "toggleTableCaption",
          ],
        },
        language: "fr",
        image: {
          toolbar: [
            "imageTextAlternative",
            "imageStyle:inline",
            "imageStyle:block",
            "imageStyle:side",
            "linkImage",
          ],
        },
      })
        // @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-word-count {
  display: flex;
  flex-direction: column;
  color: initial;
  border: 1px solid rgb(196, 196, 196);
  border-bottom: 0;
  background-color: #fafafa;
  position: relative;
  .ck-word-count__words {
    position: relative;
    left: 2rem;
  }
  .ck-word-count__characters {
    position: absolute;
    left: 9rem;
  }
}
</style>