安装富文本组件

简介: 安装富文本组件

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


相关文章
|
8月前
Flutter 组件(二)文本 与 输入框组件
Flutter 组件(二)文本 与 输入框组件
521 0
uniapp显示富文本
uniapp显示富文本
121 0
|
存储 JavaScript 前端开发
【前端系列】- 富文本组件(mavon-editor)
mavon-editor是一款基于vue的markdown编辑器,可以用来做文本的编辑,比如是某种业务需要发送公告、个人博客等,都可以用到,操作也十分简单。
4113 0
【前端系列】- 富文本组件(mavon-editor)
|
3月前
|
前端开发 小程序
扩展uview复选组件库支持自定义图片+自定义内容
扩展uview复选组件库支持自定义图片+自定义内容
112 6
|
3月前
扩展uview表单组件标题文本支持两端对齐
扩展uview表单组件标题文本支持两端对齐
114 2
|
3月前
|
JavaScript
extjs表格行拖动插件
extjs表格行拖动插件
44 3
|
6月前
|
JavaScript 前端开发
vue 富文本编辑器 quill (含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等)
vue 富文本编辑器 quill (含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等)
359 0
|
JavaScript
vue项目实现预览pdf功能(解决动态文字无法显示的问题)
最近,因为公司项目需要预览pdf的功能,开始的时候找了市面上的一些pdf插件,都能用,但是,后面因为pdf变成了需要根据内容进行变化的,然后,就出现了需要动态生成的文字不显示了。换了好多好多的插件,都无法显示,直接无语了。 (pdf-vue3,pdf.js,vue3-pdfjs,vue-pdf-embed等插件无法显示动态文字)
811 0
|
数据可视化 JavaScript 前端开发
ElementUI实现表格内嵌进度条功能
ElementUI实现表格内嵌进度条功能
508 1
|
JavaScript
vue 里使用 antv g6 实现脑图左右布局、文本超出隐藏处理、自定义边、自定义节点、自定义事件功能
vue 里使用 antv g6 实现脑图左右布局、文本超出隐藏处理、自定义边、自定义节点、自定义事件功能
2333 0
vue 里使用 antv g6 实现脑图左右布局、文本超出隐藏处理、自定义边、自定义节点、自定义事件功能