Hướng dẫn cài và sử dụng TinyMCE Vue component cho editor nuxt js

Các đặc điểm chính của TinyMCE Vue component:

1. Tích hợp dễ dàng: Giúp bạn dễ dàng thêm trình soạn thảo vào ứng dụng Vue mà không cần viết quá nhiều mã.

2. Tùy chỉnh: Cho phép cấu hình các tính năng của TinyMCE như thanh công cụ, kiểu văn bản, và nhiều tùy chọn khác.

3. Sự kiện: Cung cấp các sự kiện để theo dõi hành động của người dùng, như khi nội dung thay đổi.

4. Hỗ trợ đa ngôn ngữ: TinyMCE có thể hỗ trợ nhiều ngôn ngữ và định dạng văn bản khác nhau.

Bước 1: Tạo Dự Án Nuxt.js Mới

Nếu bạn chưa có dự án Nuxt.js, bạn có thể tạo một dự án mới :

Chú ý: Có 2 cách để tạo dự án Nuxtjs đó là:

• npm
• yarn

Đối với yarn chạy lệnh sau :

yarn create nuxt-app <project-name>

Còn đối với npm thì  tạo dự án bằng cách sử dụng npx:

npx create-nuxt-app servbay-nuxt-app

Bước 2: Cài Đặt Thư Viện TinyMCE Vue component

Mở terminal và chạy lệnh sau để cài đặt TinyMCE vue component:

Đối với yarn chạy lệnh sau:

yarn add @tinymce/tinymce-vue

Còn với npm thì chạy lệnh :

npm i @tinymce/tinymce-vue

Bước 3: Tạo component cho TinyMCE Vue

Chúng ta sẽ tạo component cho TinyMCE Vue trong file Tinymce.vue: 

<template>
  <editor
    ref="editor"
    v-model="content"
    api-key="eyuz91tplckkd5h1nt0pl0se6v27jed5r325526sq41v6mov"
    :init="{
      height: 500,
      menubar: false,
      plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table paste code help wordcount',
        'codesample',
        'blockquote',
        'image',
        'link',
      ],
      codesample_languages: [
        { text: 'JavaScript', value: 'javascript' },
        { text: 'HTML/XML', value: 'markup' },
        { text: 'CSS', value: 'css' },
        { text: 'PHP', value: 'php' },
        { text: 'Python', value: 'python' },
        { text: 'Java', value: 'java' },
        { text: 'C', value: 'c' },
        { text: 'C++', value: 'cpp' },
      ],
      toolbar:
        'undo redo | formatselect | bold italic backcolor | \
          alignleft aligncenter alignright alignjustify | \
          bullist numlist outdent indent | removeformat | link | image | code | codesample | blockquote | help',
      image_title: true,
      automatic_uploads: true,
      file_picker_types: 'image',
      setup: (editor) => {
        editor.on('Change', () => {
          this.$emit('input', editor.getContent())
        })
      },
      file_picker_callback: filePickerCallback,
    }"
  />
</template>

<script>
import Editor from '@tinymce/tinymce-vue';

export default {
  components: {
    editor: Editor
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      content: this.value
    };
  },
  watch: {
    value (newVal) {
      if (newVal !== this.content) {
        this.content = newVal;
      }
    },
    content (newVal) {
      if (newVal !== this.value) {
        this.$emit('input', newVal);
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      if (!this.$refs.editor || !this.$refs.editor.editorUpload) {
        console.error('Editor is not initialized yet.');
      }
    });
  },
  methods: {
    filePickerCallback (cb, value, meta) {
      const input = document.createElement('input');
      input.setAttribute('type', 'file');
      input.setAttribute('accept', 'image/*');

      input.addEventListener('change', (e) => {
        const file = e.target.files[0];
        const reader = new FileReader();

        reader.addEventListener('load', () => {
          const id = 'blobid' + new Date().getTime();
          const blobCache = this.$refs.editor.editor.editorUpload.blobCache;
          const base64 = reader.result.split(',')[1];
          const blobInfo = blobCache.create(id, file, base64);
          blobCache.add(blobInfo);

          cb(blobInfo.blobUri(), { title: file.name });
        });

        reader.readAsDataURL(file);
      });

      input.click();
    }
  }
};
</script>

Bước 4: Gọi ra và sử dụng

Giả sử bạn có một component cha gọi là App.vue. Bạn có thể gọi component TinyMceEditor như sau:

<template>
  <div id="app">
    <h1>Trình Soạn Thảo TinyMCE</h1>
    <TinyMceEditor />
  </div>
</template>

<script>
import TinyMceEditor from './components/TinyMceEditor.vue'

export default {
  components: {
    TinyMceEditor
  }
}
</script>

<style>
/* Thêm các kiểu tùy chỉnh cho ứng dụng ở đây nếu cần */
</style>

Bước 5: Chạy project của bạn

Cuối cùng, bạn có thể chạy project Nuxt.js của mình bằng lệnh:

npm run dev

hoặc

yarn dev

Lợi ích:

• Trải nghiệm người dùng tốt: Cung cấp giao diện dễ sử dụng cho người dùng cuối.
• Tính năng phong phú: Nhiều tính năng hỗ trợ soạn thảo văn bản nâng cao.
• Tương thích: Hoạt động tốt với các framework và nền tảng khác nhau.

Hy vọng thông tin này giúp bạn hiểu rõ hơn về TinyMCE Vue component!