ldc-gen-game-web/resources/js/components/ckEditorComponent.vue

<template>
  <div>
    <div class="wordCounter">
      <span class="words"
        ><u>Mots</u>&nbsp;:&nbsp;<b>{{ words }}</b></span
      >
      <span class="chars"
        ><u>Caractères</u>&nbsp;:&nbsp;<b>{{ chars }}</b></span
      >
    </div>
    <div ref="ckeditor"></div>
    <input
      :id="internalId"
      class="form-control"
      type="hidden"
      :name="name"
      :value="internalText"
      :required="internalRequired"
    />
  </div>
</template>

<script>
import "../vendor/ckeditor/build/ckeditor";
// import { CKUploadAdaptater } from '../../back/CkUploadAdaptater'

export default {
  props: ["id", "required", "name", "dbtext"],
  mounted() {
    this.internalText = this.dbtext;
    this.internalId = this.id ? this.id : "";
    this.internalRequired = this.required ? this.required : false;
    this.makeSuperBuild();
  },
  data() {
    return {
      internalText: "",
      internalId: "",
      internalRequired: false,
      editor: null,
      words: 0,
      chars: 0,
      emitTimer: null,
    };
  },
  watch: {
    dbtext() {
      if (this.internalText != this.dbtext) {
        this.internalText = this.dbtext;
        if (this.editor) {
          this.editor.setData(this.internalText);
        }
      }
    },
  },
  methods: {
    makeSuperBuild() {
      let self = this;

      ClassicEditor.create(self.$refs.ckeditor, {
        // extraPlugins: [(editor) => {
        //     editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
        //         // Configure the URL to the upload script in your back-end here!
        //         return new CKUploadAdaptater(loader);
        //     }
        // }],
        wordCount: {
          onUpdate: (stats) => {
            this.chars = stats.characters;
            this.words = stats.words;
          },
        },
        link: {
          // Automatically add target="_blank" and rel="noopener noreferrer" to all external links.
          addTargetToExternalLinks: true,

          // Let the users control the "download" attribute of each link.
          decorators: [
            {
              mode: "manual",
              label: "Ouvrir dans un nouvel onglet",
              attributes: {
                target: "_blank",
                rel: "noopener noreferrer",
              },
            },
          ],
        },
        typing: {
          transformations: {
            extra: [
              { from: ":)", to: "😊" },
              { from: ":-P", to: "😛" },
              { from: "8-)", to: "😎" },
              { from: ";-)", to: "😉" },
              { from: ":-D", to: "😄" },
              { from: ":twisted:", to: "😈" },
              { from: ":mrgreen:", to: "😁" },
              { from: ":lol:", to: "😆" },
              { from: ":roll:", to: "🙄" },
              { from: ":-?", to: "😕" },
              { from: ":cry:", to: "😢" },
              { from: ":-o", to: "😮" },
              { from: ":evil:", to: "😡" },
              { from: ":-|", to: "😐" },
              { from: ":oops:", to: "😳" },
              { from: ":-x", to: "😠" },
              { from: "8-O", to: "😲" },
              { from: ":-(", to: "😧" },
              { from: ":arrow:", to: "➡" },
              { from: ":idea:", to: "💡" },
            ],
          },
        },
        mediaEmbed: {
          previewsInData: false,
          removeProviders: [
            "instagram",
            "twitter",
            "googleMaps",
            "flickr",
            "facebook",
            "dailymotion",
            "spotify",
            "youtube",
          ],
          // see https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-media-embed/src/mediaembedediting.js
          providers: [
            {
              // display local videos in oembed tags
              name: "localVideo",
              url: /^(\/(?:content|storage)\/.*)/,
              html: (match) => {
                let path = match[1];

                return (
                  '<video controls allowfullscreen style="max-width: 90%; margin: 0 auto; display: block;">' +
                  `<source src="${path}" type="video/mp4">` +
                  `<p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici <a href="${path}">un lien pour télécharger la vidéo</a>.</p>` +
                  "</video>"
                );
              },
            },
          ],
        },
        toolbar: {
          items: [
            "bold",
            "italic",
            "underline",
            "|",
            "removeFormat",
            "|",
            "undo",
            "redo",
          ],
        },
        table: {
          contentToolbar: [
            "tableColumn",
            "tableRow",
            "mergeTableCells",
            "tableProperties",
            "tableCellProperties",
            "toggleTableCaption",
          ],

          // Configuration of the TableProperties plugin.
          tableProperties: {
            // ...
          },

          // Configuration of the TableCellProperties plugin.
          tableCellProperties: {
            // ...
          },
        },
        language: "fr",
        image: {
          toolbar: [
            "imageTextAlternative",
            "imageStyle:inline",
            "imageStyle:block",
            "imageStyle:side",
            "linkImage",
          ],
        },
        // video: {
        //     resizeUnit: 'px',
        //     // Configure the available video resize options.
        //     resizeOptions: [
        //         {
        //             name: 'videoResize:original',
        //             value: null,
        //             label: 'Original',
        //             icon: 'original'
        //         },
        //         {
        //             name: 'videoResize:50',
        //             value: 50,
        //             label: '50',
        //             icon: 'medium'
        //         },
        //         {
        //             name: 'videoResize:75',
        //             value: '75',
        //             label: '75',
        //             icon: 'large'
        //         }
        //     ]
        // }
      })
        .then((editor) => {
          editor.setData(this.internalText);
          self.editor = editor;
          editor.model.document.on("change:data", () => {
            // * Keep track of internal editor
            let data = editor.getData();
            self.$set(self, "internalText", data);
            self.$emit("input", data);
          });
        })
        .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">
.wordCounter {
  color: initial;
  border: 1px solid rgb(196, 196, 196);
  border-bottom: 0;
  background-color: #fafafa;
  position: relative;
  .words {
    position: relative;
    left: 2rem;
  }
  .chars {
    position: absolute;
    left: 9rem;
  }
}
</style>