百度富文本编辑器配置(vue3)

简介: 百度富文本编辑器配置(vue3)

今天分享一下我做的项目里面的一个百度富文本的配置问题,安装配置流程以及如何解决的


1.首先是安装组件

# vue-ueditor-wrap v3 仅支持 Vue 3
npm i vue-ueditor-wrap@3.x -S
# or
yarn add vue-ueditor-wrap@3.x


2. 下载 UEditor

UEditor 并不支持通过 npm 的方式来安装,vue-ueditor-wrap 也只是一个 Vue 组件,组件本身并不是 UEditor 的 Vue 版。了解 UEditor 基本使用,请参考 UEditor 官网

编码方式\语言 PHP NET JSP ASP
utf8 下载 下载 下载 下载
gbk 下载 下载 下载 下载


说明:不同语言的 UEditor,前端部分,并无区别,只是包含了对应语言的 服务端 示例代码。UEditor 官方并没有提供 Node.js 版的示例代码,有需求的同学可以参考 此处。


将解压的文件夹重命名为 UEditor 并移动到你项目的静态资源目录下,比如下面是一个由 Vue CLI(v3+)创建的项目,静态资源目录就是 public。


注意! pubilc 内不要多层嵌套文件 不然会找不到所在的资源,可能会出现如下报错


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>
const editorConfig = reactive({
  // 编辑器不自动被内容撑高
  autoHeightEnabled: false,
  // 初始容器高度
  initialFrameHeight: 400,
  // 初始容器宽度
  initialFrameWidth: '100%',
  UEDITOR_HOME_URL: '/UEditor/', // 访问 UEditor 静态资源的根路径,可参考常见问题1
  serverUrl: '/pc/pc/Fileimg/uderto', // 服务端接⼝
  uploadUrl: '/pc/pc/Fileimg/uderto' + '/kjyl-server-doctor/doctor/file/uploadFile',
  // enableAutoSave: true, // 开启从草稿箱恢复功能需要⼿动设置固定的 editorId,否则组件会默认随机⼀个,如果页⾯刷新,下次渲染的时候 editorId 会重新随机,// 服务端接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
});

这样就可以实现啦

相关文章
|
XML 前端开发 JavaScript
前端图形学实战: 从零实现编辑器的图层管理面板和实时缩略图(vue3 + vite版)
前端图形学实战: 从零实现编辑器的图层管理面板和实时缩略图(vue3 + vite版)
192 0
|
7月前
|
Dart 搜索推荐 IDE
Windows下Zed编辑器配置Dart环境
本文介绍了Dart编程语言及其主要框架Flutter的优势,并推荐使用轻量级编辑器Zed进行Dart开发。详细步骤包括Dart环境的安装与配置,Zed编辑器的安装与个性化设置,以及如何在Zed中编写并运行Dart的HelloWorld程序。通过自定义任务实现Dart文件的快速运行,提高了开发效率。
|
9月前
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
|
10月前
Vue3项目引入 vue-quill 编辑器组件并封装使用
本文介绍了如何在Vue3项目中引入并封装使用`vue-quill`富文本编辑器组件,包括安装配置、父页面实现、子组件设计以及使用方法和效果展示。
2098 0
Vue3项目引入 vue-quill 编辑器组件并封装使用
|
11月前
|
JSON JavaScript 数据格式
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
|
11月前
|
网络协议 Linux 开发工具
配置Linux固定IP地址,为什么要固定IP,因为他是通DHCP服务获取的,DHCP服务每次重启都会重新获取一次ip,VMware编辑中有一个虚拟网络编辑器
配置Linux固定IP地址,为什么要固定IP,因为他是通DHCP服务获取的,DHCP服务每次重启都会重新获取一次ip,VMware编辑中有一个虚拟网络编辑器
文本---富文本编辑器------Vue3使用富文本编辑器,Quill,全局样式和组件和样式的写法
文本---富文本编辑器------Vue3使用富文本编辑器,Quill,全局样式和组件和样式的写法
|
前端开发 数据可视化 API
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
677 0
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
|
Unix Shell Linux
在 Linux 上把 Vim 配置为默认编辑器
在 Linux 上把 Vim 配置为默认编辑器
168 0
|
前端开发 JavaScript CDN
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(一)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
392 0
下一篇
oss创建bucket