安装富文本组件

news/2024/10/30 21:50:24/

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

原创作者:吴小糖

创作时间:2023.11.4


http://www.ppmy.cn/news/1195305.html

相关文章

NEFU数字图像处理(5)图像压缩编码

一、概述 1.1简介 图像压缩编码的过程是在图像存储或传输之前进行&#xff0c;然后再由压缩后的图像数据&#xff08;编码数据&#xff09;恢复出原始图像或者是原始图像的近似图像 无损压缩&#xff1a;在压缩过程中没有信息损失&#xff0c;可由编码数据完全恢复出原始图像有…

洒洒水阿萨阿萨

1. 多表查询 多表查询(也叫关联查询, 联结查询): 可以用于检索涉及到多个表的数据. 使用关联查询, 可以将两张或多张表中的数据通过某种关系联系在一起, 从而生成需要的结果集.前提条件: 这些一起查询的表之间它们之间一定是有关联关系.# 先熟悉一下三张表: -- 1. 员工表(11个…

Vue3.0 VCA语法糖 <script setup> :VCA模式

简介&#xff1a; <script setup> 是在单文件组件(SFC)中使用组合式 API 的编译时语法糖。相比于普通的<script>语法&#xff0c;它具有更多优势&#xff1a; 更少更简洁的代码&#xff0c;不需要使用 return{} 暴露变量和方法了&#xff0c;使用组件时不需要主动…

Windows10安装Anaconda与Pytorch的记录

这是一篇关于安装Anaconda和Pytorch的记录与复盘&#xff0c;写的原因是我电脑恢复系统之后东西全没了&#xff0c;再装Pytorch的时候一脸懵逼忘了怎么弄了&#xff0c;写篇记录以备我下一次安装。 1、Anaconda的安装 1.1、Anaconda安装包下载 下载链接: Free Download | An…

Spring事务的传播机制

一、什么是Spring 事务的传播机制 传播机制解决了被事务修饰的方法互相调用时&#xff0c;到底是创建两个不同的事务&#xff0c;还是共用同一个事务的问题。 二、七种传播机制 首先介绍两个术语&#xff1a;挂起&#xff0c;嵌套和加入。 挂起&#xff1a;将当前正在执行的…

android webview 打开腾讯文档不跳转到申请权限界面显示ERR_UNKNOWN_URL_SCHEME

webview 只识别https和http开头的地址 webview调用setWebViewClient方法&#xff0c;重写shouldOverrideUrlLoading方法&#xff0c;返回return super.shouldOverrideUrlLoading(view, url);就可以跳转到申请权限界面了&#xff0c;要登录QQ去申请权限的时候报错&#xff0c;因…

[python 刷题] 2866 Beautiful Towers II

[python 刷题] 2866 Beautiful Towers II 题目如下&#xff1a; You are given a 0-indexed array maxHeights of n integers. You are tasked with building n towers in the coordinate line. The ith tower is built at coordinate i and has a height of heights[i]. A co…

常见的单token登录方案

现在主流的单token方案为jwttoken和redis token 常用的跟jwt token集成框架有shrio、spring security、aop切面。redis也能跟这三者集成。跟redis相比&#xff0c;jwt token比较难注销&#xff0c;得等到有效期过了才行&#xff0c;实际根据项目需求来就行。 简单介绍如下&am…