vue使用wangEditor

news2024/11/26 9:32:22

vue版本2.0;editor5.1.23版本;editor-for-vue:1.0.2版本
在这里插入图片描述
api文档入口
效果图
在这里插入图片描述
安装步骤入口

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue --save

代码

<template>
  <div>
    <div style="border: 1px solid #ccc">
      <toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <editor
        style="height: 500px; overflow-y: hidden"
        v-model="html"
        :defaultConfig="defaultEditorConfig"
        :mode="mode"
        @onCreated="onCreated"
      />
    </div>
    <div>
      <a-button type="primary" @click="htmlContent"> 请点我 </a-button>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
const toolbarConfig = {};
toolbarConfig.excludeKeys = [
  "todo", //待办
  "emotion", //表情
  "insertLink", //超链接
  "insertVideo", //表情
  "group-video", //视频
  "codeBlock", //代码块
  "divider", //分割线
];
const defaultEditorConfig = {
  // JS 语法
  MENU_CONF: {},
  // 其他属性...
};
// 修改 uploadImage 菜单配置
defaultEditorConfig.MENU_CONF["uploadImage"] = {
  server: "后端提供的上传图片接口",
  fieldName: "file",
  //【注意】不需要修改的不用写,wangEditor 会去 merge 当前其他配置
};
export default Vue.extend({
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      html: "<p>hello</p>",
      toolbarConfig: toolbarConfig,
      defaultEditorConfig: defaultEditorConfig,
      mode: "default", // or 'simple'
    };
  },
  methods: {
    //编辑器创建完毕时的回调函数。
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ,否则会报错
      console.log(this.editor);
    },
    htmlContent() {
      console.log(this.html);
    },
  },
  mounted() {
    // 模拟 ajax 请求,异步渲染编辑器
    setTimeout(() => {
      this.html = "<p>模拟 Ajax 异步设置内容 HTML</p>";
    }, 1500);
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时,及时销毁编辑器
  },
});
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

后端提供的上传图片接口响应格式需要按照wangEditor的来
在这里插入图片描述
excludeKeys可以排除掉某些不想要的菜单,其他都保留
放在defaultConfig事件里

 	<toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
const toolbarConfig = {};
toolbarConfig.excludeKeys = [
  "todo", //待办
  "emotion", //表情
  "insertLink", //超链接
  "insertVideo", //表情
  "group-video", //视频
  "codeBlock", //代码块
  "divider", //分割线
];
data() {
    return {
      toolbarConfig: toolbarConfig,
    };
  },

toolbarConfig.excludeKeys里面的key去哪里看?文档上面我是没有找到 哎
我是先打开官网上面的demo示例,再打开控制台然后在console下面输入toolbar找到的
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/980133.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

字体排版小白也能Get!4个超简单技巧让你的文字焕然一新

文字排版设计不仅是指为Web或APP的界面选择正确的字体&#xff0c;排版中的文本层次结构、字体比例、空白、颜色对比和其他视觉效果也有助于传递品牌的特定信息。优秀的文字排版设计需要传达清晰有效的信息&#xff0c;始终把内容的可读性放在首位去考虑和权衡。今天就带大家梳…

自动化测试系列 —— UI自动化测试

UI 测试是一种测试类型&#xff0c;也称为用户界面测试&#xff0c;通过该测试&#xff0c;我们检查应用程序的界面是否工作正常或是否存在任何妨碍用户行为且不符合书面规格的 BUG。了解用户将如何在用户和网站之间进行交互以执行 UI 测试至关重要&#xff0c;通过执行 UI 测试…

装饰器模式:让你的对象变得更强大

在日常开发中&#xff0c;当需要给一个现有类添加附加职责&#xff0c;而又不能采用生成子类的方法进行扩充时。例如&#xff0c;该类被隐藏或者该类是终极类或者采用继承方式会产生大量的子类。这时候&#xff0c;我们该怎么办呢&#xff1f;我们可以使用装饰器器模式来解决这…

Xilinx ZYNQ 7000学习笔记三(小结)

1 启动模式&#xff1a; ZYNQ 7000的启动模式由外部引脚决定的&#xff0c;5个模式引脚MIO[6:2]用于配置NAND flash、并行NOR flash、Serial NOR (Quad-SPI)、SD flash以及JTAG 一共5种启动模式。具体而言就是复位时&#xff0c;zynq-7000 SOC对下述引脚进行连续3个时钟周期采…

从Overleaf提交到arxiv

1.文件结构注意避坑&#xff01;&#xff01;&#xff01; 前期在overleaf写论文时&#xff0c;为了使文件结构目录清晰&#xff0c;分别建了section, image等子文件夹&#xff0c;即 >project>image-XXx.pdf-xxx.pdf>sections-abstract.tex-method.tex>main.tex…

ProcessWindowFunction 结合自定义触发器的陷阱

背景&#xff1a; flink中常见的需求如下&#xff1a;统计某个页面一天内的点击率,每10秒输出一次&#xff0c;我们如果采用ProcessWindowFunction 结合自定义触发器如何实现呢&#xff1f;如果这样实现问题是什么呢&#xff1f; ProcessWindowFunction 结合自定义触发器实现…

基于YOLOv8模型的安全背心目标检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要&#xff1a;基于YOLOv8模型的安全背心目标检测系统可用于日常生活中检测与定位安全背心目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目标检测算法训…

Zabbix 利用 Grafana 进行图形展示

安装插件 配置数据源 导入模版 查看 1.安装 wget https://mirrors.tuna.tsinghua.edu.cn/grafana/yum/rpm/Packages/grafana-10.0.0-1.x86_64.rpm [rootrocky8 apps]# yum install grafana-10.0.0-1.x86_64.rpm [rootrocky8 apps]# systemctl start grafana-server.service …

Mac 手动安装 sshpass

1. 下载安装包 https://sourceforge.net/projects/sshpass/ 解压并进入到安装包目录 tar -zxvf sshpass-xx.xx.tar.gz cd sshpass-xx.xx2. 检验环境&#xff0c;编译源码安装 ./configuremake&&make install3. 检测安装是否成功 ▶ sshpass Usage: sshpass [-f|-…

freertos之资源管理

中断屏蔽 屏蔽中断函数 在任务中使用 taskENTER_CRITICA()/taskEXIT_CRITICAL() 在中断中使用 taskENTER_CRITICAL_FROM_ISR()/taskEXIT_CRITICAL_FROM_ISR() 功能介绍 使用上述函数&#xff0c;进入临界中断&#xff0c;任务不会切换&#xff0c;且中断优先级处于con…

邮件钓鱼的防守策略

一、攻击背景 在历年的实战攻防演练中&#xff0c;人的漏洞是网络安全最大的脆弱点&#xff0c;而钓鱼攻击就是从内部攻破堡垒至关重要的手段。攻击者通过伪装成可信来源发送虚假邮件&#xff0c;诱导接收者点击恶意链接、提供敏感信息或执行恶意附件&#xff0c;从而获取机密…

python解压gz包

import gzipdef un_gz(file_name):# 获取文件的名称&#xff0c;去掉后缀名f_name file_name.replace(".gz", "")# 开始解压g_file gzip.GzipFile(file_name)#读取解压后的文件&#xff0c;并写入去掉后缀名的同名文件&#xff08;即得到解压后的文件&am…

聊聊操作系统中 进程 and 线程中哪些事??

操作系统&#xff08;英语&#xff1a;Operating System&#xff0c;缩写&#xff1a;OS&#xff09;是一组主管并控制计算机操作、运用和运行硬件、软件资源和提供公共服务来组织用户交互的相互关联的系统软件程序。根据运行的环境&#xff0c;操作系统可以分为桌面操作系统&a…

java 身份证号码验证

需要编号文件 编号文件部分内容如下 11:北京市 1101:市辖区 110101:东城区 110102:西城区 110105:朝阳区 110106:丰台区 110107:石景山区 110108:海淀区 ...... 编号文件内容比较多 csdn点击 下载地址 java代码如下 import java.io.*; import java.text.ParseException; im…

Win10怎么设置默认看图软件?Win10设置自带看图软件为默认程序操作方法

大小&#xff1a;4.19 GB类别&#xff1a;雨林木风系统 Win10怎么设置默认看图软件&#xff1f;有用户在使用电脑去浏览图片内容的时候&#xff0c;总是使用第三方的看图软件自动打开&#xff0c;不使用系统自带的看图软件来开启图片。那么怎么设置系统自带的看图软件为默认程序…

【嵌入式软件C编程】主函数free子函数malloc地址的两种方式以及注意事项

本文档主要记录嵌入式C语言在子函数中应用malloc函数的方式&#xff0c;在实际项目中内存管理特别重要 一般在主函数中&#xff08;main&#xff09;使用malloc函数&#xff0c;然后在通过free函数进行释放内存&#xff0c;但有时候如果必须在子函数长调用malloc函数该怎样进行…

[HDCTF 2023]YamiYami

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言涉及知识点解题详细过程session伪造反弹shell 前言 从暑假末尾一直搁置&#xff0c;当时卡在反弹shell搞得离flag就差一步。不过最近一两天学习完反弹shell的知…

面试算法-数据结构二

大厂算法面试 1&#xff09; 图论 2&#xff09; 大数据 3&#xff09;动态规划 优秀的算法往往取决于你采取那种数据结构 高级数据结构 1&#xff09;优先队列 2&#xff09;图 3&#xff09;前缀树 4&#xff09;线段树 5&#xff09;树状数组 在分析问题的时候&a…

OB Cloud 初体验

文章来源&#xff1a;韩锋频道 韩锋 数据库行业资深从业者&#xff0c;著有《SQL 优化最佳实践》、《数据库高效优化》等数据库相关著作。 OceanBase&#xff08;下文简称OB&#xff09; 作为国内一款优秀的分布式数据库&#xff0c;这些年来发展很快&#xff0c;在金融、电商…

UDP协议结构及其注意事项

UDP报文结构 UDP报文结构主要是由两个部分组成的&#xff1a;UDP头部和数据部分。 UDP头部 源端口号&#xff1a;16位字段&#xff0c;指示数据发送方的端口号。目的端口号&#xff1a;16位字段&#xff0c;指示数据接收方端口号。UDP报文长度&#xff1a;16位字段&#xff0…