Vue3 – Tinymce is a rich text editor based on [email protected] + [email protected] encapsulation.

why

There was a functional requirement for rich text editing when developing the console project, packaged as a component for easy use.

Personally developing a perfect set of rich text editors is difficult and time-consuming, and I found the Tinymce Editor background and features in the plug-in selection to be very powerful, and the documentation is clear. Wrapping components based on Tinymce is a good choice.

This component is clear and easy to understand and can be modified for use in the VUe2 version. Looking forward to your Star, please refer to issues 👏

Some examples are

Example 1: Classic Settings

Example 2: Similar to digging rich text Editor Settings

The component characteristics

Out of the box

The CDN resources of [email protected] version are loaded in the component on demand without additional import. Use V-if to render components as necessary.

Attribute script-src to customize tinymce static resources. Absolute paths and network addresses are supported.

Expand picture uploading

This component extends the image upload part of the inserted image, rewriting setting.images_upload_handler, inserting image data successfully into the backfill editor, and associating the image in the toolbar and plugins.

{
  // Enable the function of uploading pictures expanded by the component. The 'upload' option appears in the pop-up box of the picture button in the toolbar
  custom_images_upload: true.// Reuse image upload API address
  images_upload_url: 'your_upload_api_url... '.// Upload success callback function, return image address. The default response. The location
  custom_images_upload_callback: response= > response.url,
  // Upload API extra parameters. Image default file
  custom_images_upload_param: { id: 'xxxx01'.age: 18}}Copy the code

Quick learning

Access to the component

Go to the Vue3Tinymce repository to get the Packages /Vue3Tinymce component files and Copy them for use in your project. For setting options, refer to the official Tinymce document

NPM import is also provided here: NPM install @jsdawn/vue3-tinymce and then introduced in Vue

import Vue3Tinymce from '@jsdawn/vue3-tinymce';
Copy the code

Used in VUE

<template> <vue3-tinymce v-model="state.content" :setting="state.setting" /> </template> <script setup> import { reactive } from 'vue'; Import Vue3Tinymce from 'your-path/Vue3Tinymce'; const state = reactive({ content: 'hello vue3-tinymce! ', // editor configuration item setting: {height: 400 // Editor height}}); </script>Copy the code

Component attributes

The name of the type describe
modelValue String Bind value/contentv-modelIn the form of
setting Object Set item, use officialTinymce Settings
setup Function Callback when the editor is set, callback parameter Editor instance, where editor events are added to TinyMCE
script-src Function The customtinymceStatic resources that support absolute paths and network addresses. Built-in on-demand loading[email protected]
@change Function The editor listenschange input undo redoIs triggered, and the callback parameter is editor Content
@init Function Trigger after editor initialization is complete, callback parametereditorThe instance

Use the sample

Click to go to use examples

Reprint statement: please indicate the author, mark the original link, if you have questions, send to [email protected]