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

TinyMCE Vue component là một thành phần (component) dùng để tích hợp trình soạn thảo văn bản TinyMCE vào ứng dụng Vue.js. TinyMCE là một trình soạn thảo WYSIWYG (What You See Is What You Get), cho phép người dùng tạo và chỉnh sửa nội dung văn bản một cách trực quan.

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!