vue2-ueditor-plus-editor

vue2-ueditor-plus-editor

Vue 2 wrapper for UEditorPlus.

It provides:

• UEditor: editor component
• URichTextPreview: preview component with code highlighting
• vue2-ueditor-plus copy-assets: CLI for copying static assets into your project

Install

Install both packages:

npm install vue2-ueditor-plus-editor ueditor-plus-assets

or:

pnpm add vue2-ueditor-plus-editor ueditor-plus-assets

Copy Assets

UEditorPlus still needs static assets such as ueditor.all.js, language files, dialogs, themes, and images.

Copy them into your project:

npx vue2-ueditor-plus copy-assets public/static/ueditor-plus

A common setup is to run it automatically after install:

{
  "scripts": {
    "ueditor:assets": "vue2-ueditor-plus copy-assets public/static/ueditor-plus",
    "postinstall": "vue2-ueditor-plus copy-assets public/static/ueditor-plus"
  }
}

If you use a different public path, keep base-url aligned with the copied directory.

Basic Usage

<template>
  <UEditor
    v-model="content"
    :height="360"
    base-url="/static/ueditor-plus/"
    :upload-url="uploadUrl"
  />
</template>

<script>
import { UEditor } from 'vue2-ueditor-plus-editor'

export default {
  components: {
    UEditor,
  },
  data() {
    return {
      content: '<p>Hello UEditorPlus</p>',
      uploadUrl: '/api/upload',
    }
  },
}
</script>

Rich Text Preview

<template>
  <div>
    <UEditor
      v-model="content"
      :height="560"
      base-url="/static/ueditor-plus/"
      :upload-url="uploadUrl"
    />
    <URichTextPreview :content="content" />
  </div>
</template>

<script>
import { UEditor, URichTextPreview } from 'vue2-ueditor-plus-editor'

export default {
  components: {
    UEditor,
    URichTextPreview,
  },
  data() {
    return {
      content: '',
      uploadUrl: '/api/upload',
    }
  },
}
</script>

Multi Image Features

The package includes two custom tools:

• dialogimg: single-row multi-image
• buttonimg: button multi-image

Enable them through toolbar configuration and keep multi-image-enabled turned on:

<template>
  <UEditor
    v-model="content"
    :height="560"
    base-url="/static/ueditor-plus/"
    :upload-url="uploadUrl"
    :multi-image-enabled="true"
    :config="editorConfig"
  />
</template>

<script>
import { UEditor } from 'vue2-ueditor-plus-editor'

export default {
  components: {
    UEditor,
  },
  data() {
    return {
      content: '',
      uploadUrl: '/api/upload',
      editorConfig: {
        allowDivTransToP: false,
        toolbars: [[
          'fullscreen',
          'source',
          '|',
          'bold',
          'italic',
          'underline',
          '|',
          'simpleupload',
          'insertimage',
          'dialogimg',
          'buttonimg',
          'insertvideo',
          'insertcode',
          '|',
          'searchreplace',
          'preview',
        ]],
      },
    }
  },
}
</script>

Built-in Behavior

The wrapper ships with a few defaults that solve common issues in admin systems:

• autoFloatEnabled: false Prevents the editor toolbar from becoming fixed while the page scrolls.
• catchRemoteImageEnable: false Keeps pasted remote image URLs intact instead of rewriting them through remote-image capture.
• Rich text preview supports code highlighting.
• Custom i18n is available for zh-cn, zh-tw, and en.

Demo App

This repository includes a Vue 2 demo app:

pnpm install
pnpm --filter demo-vue2 dev

Demo source:

• apps/demo-vue2/src/App.vue

The demo includes:

• basic editor usage
• rich text editing with preview
• email template editing
• multi-image toolbar actions

Local Publish Check

Before publishing, validate the package output:

cd packages/vue2-ueditor-plus
npm pack

If you also publish the assets package:

cd ../ueditor-plus-assets
npm pack

Notes

• This package targets Vue 2.
• Consumer projects must load the copied static assets through base-url.
• If the editor works locally but not in another project, check the copied UEditorPlus static resources first.