实战 vue3 使用百度编辑器ueditor

前言

在开发项目由于需求vue自带对编辑器不能满足使用,所以改为百度编辑器,但是在网上搜索发现都讲得非常乱,所以写一篇使用流程的文章


提示:以下是本篇文章正文内容,下面案例可供参考

一、下载ueditor编辑器

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

二、使用步骤

1.引入库

代码如下(示例):

复制代码
# vue-ueditor-wrap v3 仅支持 Vue 3
 npm i vue-ueditor-wrap@3.x -S

2. 下载 UEditor

代码如下(示例):

UEditor 并不支持通过 npm 的方式来安装,vue-ueditor-wrap 也只是一个 Vue 组件,组件本身并不是 UEditor 的 Vue 版

下载文件在顶部

3. 注册组件

代码如下(示例):

复制代码
// main.js import { createApp } from 'vue';
import VueUeditorWrap from 'vue-ueditor-wrap'; 
import App from './App.vue';
createApp(App).use(VueUeditorWrap).mount('#app');

4. v-model 绑定数据

代码如下(示例):

复制代码
<vue-ueditor-wrap 
 v-model="msg" 
 :config="editorConfig"
 editor-id="editor-demo-01">
</vue-ueditor-wrap>

import { ref } from 'vue';

export default {
  setup() {
    const msg = ref('<h2>Hello World!</h2>');
    return {
      msg,
    };
  },
  created() {
    // 更多 UEditor 配置,参考 http://fex.baidu.com/ueditor/#start-config
    this.editorConfig = {
      UEDITOR_HOME_URL: '/UEditor/', // 访问 UEditor 静态资源的根路径,可参考常 https://haochuan9421.github.io/vue-ueditor-wrap/#/faq
      serverUrl: '', // 服务端接口,
      //1 如果想要编辑器自带的上传图片视频功能需要后端配合
      //2 自定义上传图片视频这样后台只需要提供一个接口
    };
  },
};

总结

至此你已经可以在页面中看到一个初始化之后的 UEditor 了,并且它已经成功和数据绑定了!

api配置可以参考以下网站

UEditorPlus 配置文档 | UEditorPlus 使用文档

相关推荐
TOSUN同星4 分钟前
干货分享 | TSMaster DBC编辑器操作指南:功能详解+实战示例
数据库·oracle·编辑器·汽车·软件工程
用户3802258598246 分钟前
vue3源码解析:依赖收集
前端·vue.js
wzyoung34 分钟前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js
LIN-JUN-WEI1 小时前
[ESP32]VSCODE+ESP-IDF环境搭建及blink例程尝试(win10 win11均配置成功)
c语言·开发语言·ide·vscode·单片机·学习·编辑器
枣把儿2 小时前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
paopaokaka_luck2 小时前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
一大树3 小时前
Vue3祖孙组件通信方法总结
前端·vue.js
coder_zhx3 小时前
Vue3自定义编程式弹窗
前端·vue.js
独立开阀者_FwtCoder3 小时前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者3 小时前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源