安装富文本组件

安装vue-ueditor-wrap@3.x:

vue-ueditor-wrap@3.x:一个"包装"了 UEditor 的 Vue 组件,支持通过 v-model 来绑定富文本编辑器的内容,让 UEditor 的使用简单到像 Input 框一样。省去了初始化 UEditor、手动调用 getContent,setContent 等繁琐的步骤。

javascript 复制代码
// vue-ueditor-wrap v3 仅支持 Vue 3
npm i vue-ueditor-wrap@3.x -S
// or
yarn add vue-ueditor-wrap@3.x

下载 UEditorPlus

下载 仓库 的dist文件夹,并放到public下,重命名为UEditorPlus

在main.js注册组件

javascript 复制代码
// main.js
import { createApp } from 'vue';
import VueUeditorWrap from 'vue-ueditor-wrap';
import App from './App.vue';

createApp(App).use(VueUeditorWrap).mount('#app');

最后使用v-model:

javascript 复制代码
<template>
  <div class="content">
    <vue-ueditor-wrap v-model="content" editor-id="editor" :config="editorConfig"
      :editorDependencies="['ueditor.config.js', 'ueditor.all.js']" style="height:500px;" />
  </div>
</template>
<script setup>
import { ref } from 'vue';
let content = ref('<p>Hello UEditorPlus</p>')
let editorConfig = {
  serverUrl: '后端服务,下面后端的上传接口',
  // 配置UEditorPlus的惊天资源
  UEDITOR_HOME_URL: '/UEditorPlus/'
}
</script>

原创作者:吴小糖

创作时间:2023.11.4

相关推荐
前端小巷子5 分钟前
跨域问题解决方案:开发代理
前端·javascript·面试
JohnYan5 分钟前
Bun技术评估 - 07 S3
javascript·后端·bun
Mintopia6 分钟前
Three.js 材质与灯光:一场像素级的光影华尔兹
前端·javascript·three.js
天涯学馆7 分钟前
JavaScript 跨域、事件循环、性能优化面试题解析教程
前端·javascript·面试
源码站~19 分钟前
基于Flask+Vue的豆瓣音乐分析与推荐系统
vue.js·python·flask·毕业设计·毕设·校园·豆瓣音乐
江城开朗的豌豆23 分钟前
路由守卫通关秘籍:这些钩子函数让你的页面跳转稳如老狗!
前端·javascript·vue.js
加减法原则26 分钟前
Vue 模板引用(ref)全面指南:从基础到高级应用
vue.js
sunbyte32 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
快起来别睡了34 分钟前
Vue 响应式系统与 `computed` 属性详解:小白也能学会的完整指南
vue.js
柚子81635 分钟前
告别FLIP动画:View Transition API带来的革命性变革
前端·javascript