vue3使用富文本编辑器wangEditor-v5（未使用composition api写法）
效果
安装
安装核心库和其vue组件库
yarn add @wangeditor/editor
yarn add @wangeditor/editor-for-vue@next
使用v-model封装富文本组件editor.vue
<template><div class="editor-box"><Toolbar class="toolbar" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" ref="t" /><Editor class="editor" v-model="html" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" /></div>
</template>
<script>
import "@wangeditor/editor/dist/css/style.css"
import { Editor, Toolbar } from "@wangeditor/editor-for-vue"
import { DomEditor } from "@wangeditor/editor"
export default {components: { Editor, Toolbar },data() {return {editor: null,toolbarConfig: {// 不需要的工具栏选项，这里去除了emoji表情excludeKeys: ["emotion"],},editorConfig: {placeholder: "请输入内容...",// 这里可以用于自定义emoji表情MENU_CONF: {emotion: {// emotions: "
vue3使用富文本编辑器wangEditor-v5（未使用composition api写法）相关推荐
- 使用富文本编辑器wangEditor完成图片文件的上传
项目中一些特定的功能可能需要在页面中用到富文本编辑器来实现文件的输入上传等等,在这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存,这里wangEditor也可以参考wang ...
- vue中使用富文本编辑器wangEditor及踩坑
因为上传图片的问题使用过了各种富文本,最后发现还是这个比较好用.分享记录一下. 安装 npm install wangeditor --save 新建一个wangeditor.vue(组件),代码内容 ...
- Vue cli项目，使用富文本编辑器WangEditor，8小时摸爬滚打后，弃坑Tinymce、UEditor、Quill
一共尝试了 Tinymce.UEditor.Quill等好几种编辑器,最终觉得最满意的是 WangEditor. 1.Tinymce 开源项目ElementAdmin自带的例子,图片上传 竟然存的是 ...
- 前端使用富文本编辑器wangEditor
一.npm下载 终端输入 npm i wangeditor --save 二.代码 此处已经把富文本编辑器抽出为组件: 组件内容: <template lang="html" ...
- THINKPHP5.1使用富文本编辑器wangEditor
首先,本文中的代码在不使用AJAX的场景中. 我们需要知道几点: 0.wangEditor v3 默认只支持div方式显示出编辑器. 1.wangEditor 从v3版本开始不支持 textarea ...
- 在vue3中使用富文本编辑器WangEditor
yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --saveyarn add @wangeditor/editor-fo ...
- 【WangEditor】使用富文本编辑器 WangEditor 实现用户自定义图片大小（改js源码）
效果图 1.WangEditor本身提供的 "编辑图片" 功能,调整图片大小选项只能为30%,50%,100%. 2.修改 wangEditor.js 源码后,用户可以输入自定义大 ...
- 使用富文本编辑器wangEditor
wangEditor说明文档 使用步骤: 1.安装依赖 yarn add wangeditor --save 2.引入 import E from 'wangeditor' 3.指定容器并在mount ...
- vue3使用富文本编辑器vueQuill
npm install @vueup/vue-quill@alpha --save 在main.js中引入 import { createApp } from 'vue' import { Quill ...
最新文章
- cuda_opencv 矩阵相加
- 聊聊大厂面试官必问的 MySQL 锁机制
- 网络通信-1（InetAddress、UDP、TCP、DatagramPacket、DatagramSocket、UDP通信示例）
- screen 断开 screen -r 不能进入断开的会话
- 04 能够使用using和namespace引用和定义命名空间 1214
- docker源码编译 linux_oracle linux 6 docker 安装（包括编译git源码）
- 操作数据库为什么需要进行事务控制
- 【 Codeforces Round #395 (Div. 2) E】Timofey and remoduling【数学思维题 —— 等差/等比数列】
- php manual 下载,PHP - Manual手册 - Download下载
- 白话区块链～Pow，PoS，DPos
- linux 文件夹的大小,linux怎么查看一个文件夹的大小
- Java 结构化数据处理开源库 SPL
- 计算机硬盘按数据传输,同时让多个硬盘轻松同步数据传输
- Telemetry 标准日志接口如何提升运维效率？
- 力扣报错 error: ＜identifier＞ expected
- launch尺寸 包含iPhone X
- Java并发之魂——synchronized深度解析
- 虚拟环境中安装requirement安装包出现错误ERROR: Could not open requirements file: [Errno 2] No such file or director
- 关于三代基因测序，你所需要知道的都在这儿！
- IPhone触摸设计：拇指操作的“热区与死角”
热门文章