安装富文本组件

简介: 安装富文本组件

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

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

// 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注册组件

// 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:

<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>


相关文章
|
6月前
Flutter 组件(二)文本 与 输入框组件
Flutter 组件(二)文本 与 输入框组件
448 0
uniapp显示富文本
uniapp显示富文本
111 0
|
存储 JavaScript 前端开发
【前端系列】- 富文本组件(mavon-editor)
mavon-editor是一款基于vue的markdown编辑器,可以用来做文本的编辑,比如是某种业务需要发送公告、个人博客等,都可以用到,操作也十分简单。
4022 0
【前端系列】- 富文本组件(mavon-editor)
|
6月前
|
JavaScript
Vue在Element UI下使用富文本框插件quill-editor(我个人不推荐用这个复杂的富文本插件)
Vue在Element UI下使用富文本框插件quill-editor(我个人不推荐用这个复杂的富文本插件)
|
1月前
|
前端开发 小程序
扩展uview复选组件库支持自定义图片+自定义内容
扩展uview复选组件库支持自定义图片+自定义内容
82 6
|
1月前
扩展uview表单组件标题文本支持两端对齐
扩展uview表单组件标题文本支持两端对齐
83 2
|
1月前
|
JavaScript
extjs表格行拖动插件
extjs表格行拖动插件
40 3
|
4月前
|
JavaScript 前端开发
vue 富文本编辑器 quill (含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等)
vue 富文本编辑器 quill (含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等)
223 0
|
前端开发 程序员
前端反卷计划-组件库-03-组件样式
前端反卷计划-组件库-03-组件样式
|
JavaScript
vue项目实现预览pdf功能(解决动态文字无法显示的问题)
最近,因为公司项目需要预览pdf的功能,开始的时候找了市面上的一些pdf插件,都能用,但是,后面因为pdf变成了需要根据内容进行变化的,然后,就出现了需要动态生成的文字不显示了。换了好多好多的插件,都无法显示,直接无语了。 (pdf-vue3,pdf.js,vue3-pdfjs,vue-pdf-embed等插件无法显示动态文字)
763 0
下一篇
无影云桌面