[套路] 浏览器引入Vue.js场景-WangEditor富文本编辑器的使用 (永久免费)

系列文章目录

  1. [套路] el-table 多选属性实现单选效果
  2. [套路] 基于服务内存实现的中文拼音混合查询
  3. [套路] Bypass滑块验证码

目录

  • 系列文章目录
  • 前言
  • 一、实现
    • 1.1 场景
    • 1.2 Window对象简介
    • 1.3 引入WangEditor
    • 1.4 页面配置


前言

公司使用freemarker的老旧SpringBootWeb后台项目, 前两年通过浏览器引入js的方式使用Vue简单升级了下, 方便迭代功能. 近期一个很简单的功能需要使用富文本编辑器, 但发现项目中已有编辑器js没有用例, 并且十分老旧, 故尝试引入WangEditor. 查阅其文档过程中, 发现要么是单纯使用WangEditor的javaScript环境集成, 要么是通过正式Vue结构项目, 使用npm引入依赖的方式集成, 对于我面临的这种“混搭”场景还真找不到介绍的.

由于项目场景特殊, 查了查, 查到有且仅有一篇还需要花¥才能看的博客提到了如何解决, 我穷b看不起看不起. 写几年后端, 前端一直是能用就行的水平, 查到那篇博客时我还以为是个很难的问题, 以至于都要知识付费了. 自己东查西查研究了下, 很简单就解决了.

以下仅针对浏览器引入的方式, Vue页面使用WangEditor的场景做说明, 类似插件也可以通过尝试类似思路去使用. 写前端水平有限, CR别太狠哈 😃

[套路]系列意在提供一个功能基本实现套路的系列文档, 查就完了.


一、实现

1.1 场景

通过浏览器引入并使用Vue

<script src="/vue/babel.min.js"></script>
<script src="/vue/vue.js"></script>
<script src="/vue/vue-resource.min.js"></script>
<script src="/vue/index.js"></script>
<script type="text/babel">
	let vm = new Vue({
	});
</script>

1.2 Window对象简介

没怎么写过前端的可以简单看下

浏览器对象模型 (BOM)
浏览器对象模型(Browser Object Model (BOM))尚无正式标准。

由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。

Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一

1.3 引入WangEditor

是否需要下载到本地引入看各自实际需求, 我这就偷个懒

  • 引入WangEditor的js和css
  • 引入组件渲染的div, 这段和官方文档一样操作
  • 文档中JS方式使用 window.获取到编辑器对象
    const { createEditor, createToolbar } = window.wangEditor
    

基本页面结构

<header>
<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
</header>
<body>
<div id="data-form">
	<!--省略其他不相关的代码-->
	<div id="editor—wrapper">
        <div id="toolbar-container"><!-- 工具栏 --></div>
        <div id="editor-container" @click="editorAreaClicked"><!-- 编辑器 --></div>
    </div>
    <!--省略其他不相关的代码-->
</div>
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script src="/vue/babel.min.js"></script>
<script src="/vue/vue.js"></script>
<script src="/vue/vue-resource.min.js"></script>
<script src="/vue/index.js"></script>
<script type="text/babel">
	let vm = new Vue({
		// 配置稍后说明
	});
</script>
</body>
<style type="text/css">
#editor—wrapper {
    border: 1px solid #ccc;
    z-index: 100; /* 按需定义 */
}

#toolbar-container {
    border-bottom: 1px solid #ccc;
}

#editor-container {
    /*height: 500px;*/
    min-height: 500px;
    background-color: #fff;
}
</style>

1.4 页面配置

1.3 可见WangEditor对象是通过window对象获取的, 巧了么这不是, Vue对象也是window对象的一个成员变量.

在这里插入图片描述


JavaScript

以下示例中仅对 链接, 上传图片作出配置, 并去除了视频相关的菜单

  • editor toolbar对象不能配置在data块中, 本身这俩对象也不是需要动态数据绑定的. 直接作为自定义option元素配置即可
  • window对象可以通过data块配置获取, 从而获取到wangEditor对象.

其余的配置功能使用逻辑即可完全参考官方文档

let vm = new Vue({
	el: '#data-form',
	editor: null, // this.$options.editor 获取
	toolbar: null, // this.$options.toolbar 获取
    data() {
	    return {
	     	window: window, // 这样就可以在Vue环境下获取到window对象了
	     	richContent: null,
	    	editorConfig: {
            	pasteIgnoreImg: true,
                showLinkImg: false,
                placeholder: '请输入迭代描述内容...',
                MENU_CONF: [],
            },
            toolbarConfig: {
                // 不提供上传视频功能
                excludeKeys: ['insertVideo', 'uploadVideo', 'group-video']
            },
		}
	},
	methods: {
		init() {
			this.preInitRichEditor();
			this.initRichEditor();
        },
		preInitRichEditor() {
       		let that = this;
            this.editorConfig.onChange = (editor) => {
            	// 这样就可以通过编辑器的事件给data里的数据绑定值
                that.richContent = editor.getHtml();
            }
            this.editorConfig.customPaste = (editor, clipboardEvent) => {
                const html = clipboardEvent.clipboardData.getData('text/html') // 获取粘贴的 html
                const text = clipboardEvent.clipboardData.getData('text/plain') // 获取粘贴的纯文本
                if (html) {
                    editor.setHtml(html)
                }
                if (text) {
                    editor.insertText(text)
                }
                if (html || text || image) {
                    return false;
                }
                // 继续执行默认的粘贴行为
                return true
            }
			// 自定义上传文件配置好后, 用户粘贴图片时会自动调用上传, 无需对图片做额外的自定义粘贴处理
            this.editorConfig.MENU_CONF['uploadImage'] = {
                server: '/file/v2/upload',
                fieldName: 'files',
                maxFileSize: 5 * 1024 * 1024,
                maxNumberOfFiles: 20,
                timeout: 5 * 1000,
                withCredentials: true,
                meta: {
                    type: '4',
                },
                headers: {
                    Accept: 'application/json',
                },
                allowedFileTypes: ['image/*'],
                onBeforeUpload: (file) => {
                    console.log("before image upload", file);
                    return file;
                },
                onProgress: (progress) => {
                    // progress 是 0-100 的数字
                    console.log('progress', progress)
                },
                onSuccess: (file, res) => {
                    console.log("on uploading images succeed", file, res)
                },
                onFailed: (file, res) => {
                    console.log("on uploading images failed", file, res)
                },
                onError: (file, err, res) => {
                    console.log("on uploading images errors ocurred", file, err, res)
                    that.alertUser(false, '文件上传失败', file.name + '上传失败');
                },
                customInsert: (res, insertFn) => {
                    console.log("customInsert", res);
                    // 从 res 中找到 url alt href ,然后插入图片
                    insertFn(res.data[0], '', '');
                },
            }

            const checkLink = (url) => {
                if (!url) {
                    return
                }
                if (url.indexOf('http') !== 0) {
                    return '链接必须以 http/https 开头'
                }
                return true
            };
            const parseLink = (url) => {
                if (url.indexOf('http') !== 0) {
                    return `http://` + url
                }
                return url
            };
            this.editorConfig.MENU_CONF['insertLink'] = {
                checkLink: checkLink,
                parseLinkUrl: parseLink,
            }
            this.editorConfig.MENU_CONF['editLink'] = {
                checkLink: checkLink, // 也支持 async 函数
                parseLinkUrl: parseLink, // 也支持 async 函数
            }
        },

        initRichEditor() {
            const E = this.window.wangEditor;
            this.$options.editor = E.createEditor({
                selector: '#editor-container',
                html: '<p></br></p>',
                config: this.editorConfig,
                mode: 'default', // or 'simple' or default
            })
            this.$options.editor.focus(true);
            let editor = this.$options.editor

            this.$options.toolbar = E.createToolbar({
                editor,
                selector: '#toolbar-container',
                config: this.toolbarConfig,
                mode: 'default', // or 'simple'
            })
        },
	}
});

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

RPG Maker MV 踩坑九 场景和窗口问题

RPG Maker MV 踩坑九 场景和窗口问题 启言场景窗口场景和窗口问题战斗场景 启言 在RPG Maker MV中使用的语言是JavaScript作为脚本语言&#xff0c;在HTML中的Canvas画布上进行绘制图像及交互行为。 在游戏中能够感知到的最大的容器是场景,往下就是各种用于菜单操作的窗口&…

通过nginx配置文件服务器(浏览器访问下载)

配置服务器端文件下载和展示(Nginx) nginx.conf文件中增加配置&#xff0c;然后浏览器里访问ip:port回车即可 server { listen port; server_name 服务端ip; # 指定文件下载目录的路径 location / { # 使用root指令来设置文件的根目录 # Nginx会在该目录下寻找相对于loca…

洛谷B3626 跳跃机器人

#先看题目 题目描述 地上有一排格子&#xff0c;共 n 个位置。机器猫站在第一个格子上&#xff0c;需要取第n 个格子里的东西。 机器猫当然不愿意自己跑过去&#xff0c;所以机器猫从口袋里掏出了一个机器人&#xff01;这个机器人的行动遵循下面的规则&#xff1a; 初始时…

基于SpringBoot的大学生租房系统

开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea 系统展示 系统功能模块 系统首页界面图 用户…

有什么可以下载网页视频的浏览器插件 浏览器如何下载网页视频 网页视频怎么下载到本地 网页视频下载软件 IDM下载

在视频网站上看电影追剧&#xff0c;已经成为了大众生活中必不可少的一部分。为了保护自家视频的版权&#xff0c;很多平台都禁止用户下载会员视频。其实只要掌握了正确的方法&#xff0c;一样可以将会员视频下载到本地保存。那么有关有什么可以下载网页视频的浏览器&#xff0…

第十届蓝桥杯大赛个人赛省赛(软件类)真题- CC++ 研究生组-质数

17569 #include<stdio.h> #include<math.h> const int N 500000;//注意范围设大一点&#xff0c;还是有很多合数滴~ int f[N] {0}, p[N]; int main(){int num 1;for(int i 2; ; i){if(!f[i]){p[num] i;if(num 2020) break;for(int j i * i; j < N; j i…

Token的详解

Token的详解 文章目录 Token的详解前言:简介:使用token&#xff1a; 前言: 为什么会用到Token&#xff0c;因为cookie和session一些自身的缺点&#xff0c;限制了一些功能的实现&#xff0c;比如&#xff1a; cookie&#xff1a;优点是节省服务器空间&#xff0c;缺点不安全。…

数据结构面试常见问题之- Hashing - Hard Version

&#x1f600;前言 在解决哈希问题中的逆向情形时&#xff0c;我们面临着一种特殊挑战&#xff1a;已知散列函数和冲突解决策略的结果&#xff0c;需要推断输入元素的顺序。这种问题要求我们深入理解哈希函数的工作原理以及冲突处理的方式&#xff0c;并通过逆向思维来还原出元…

day43 动态规划part5

1049. 最后一块石头的重量 II 中等 提示 有一堆石头&#xff0c;用整数数组 stones 表示。其中 stones[i] 表示第 i 块石头的重量。 每一回合&#xff0c;从中选出任意两块石头&#xff0c;然后将它们一起粉碎。假设石头的重量分别为 x 和 y&#xff0c;且 x < y。那么粉碎…

坚韧不拔,直至胜利的彼岸

当晨曦的第一缕光线透过夜幕的阴霾&#xff0c;希望与挑战并肩而来。在这个世界的每个角落&#xff0c;无数的个体都在经历着各自的斗争、失败、再斗争&#xff0c;直至最终的胜利。这是一个古老而永恒的循环&#xff0c;是成长的必经之路&#xff0c;它讲述着坚韧不拔的精神如…

【LeetCode】升级打怪之路 Day 26:回溯算法 — 集合划分问题

今日题目&#xff1a; 698. 划分为k个相等的子集 | LeetCode473. 火柴拼正方形 | LeetCode 参考文章&#xff1a; 经典回溯算法&#xff1a;集合划分问题 目录 LC 698. 划分为k个相等的子集 【classic&#xff0c;有难度】数据预处理&#xff1a;计算 target基本回溯优化 1&…

Zero-Change Object Transmission for Distributed Big Data Analytics——论文泛读

ATC 2022 Paper 问题 分布式大数据分析在很大程度上依赖于Java和Scala等高级语言的可靠性和多功能性。然而&#xff0c;这些高级语言也为数据传输制造了障碍。要在Java虚拟机&#xff08;JVM&#xff09;之间传输数据&#xff0c;发送方应将对象转换为字节数组&#xff08;序…

校验注解@Length提示Length.class 类文件具有错误的版本 55.0, 应为 52.0

你们好&#xff0c;我是金金金。 场景 我正在学习参数校验&#xff0c;启动项目时报错如下 实体类 依赖版本 报错信息 排查 看报错信息提示类文件具有错误的版本 55.0, 应为 52.0&#xff0c;猜测可能是版本的问题。 可以确实就是版本的关系了&#xff0c;8.0版本的只能在jd…

2024年基于springboot+vue的10个最新选题推荐

前言 &#x1f497;博主介绍&#xff1a;✌专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f447;&#x1f3fb; 精彩专栏 推荐订阅&#x1f447;&#x1f3fb; 2024年Java精品实战案例《100套》 &#x1f345;文末获取源码联系&#x1f345; &#x1f31f…

VMware Fusion Pro 13:一站式虚拟化解决方案,满足多样化需求

VMware Fusion Pro 13是一款功能强大的虚拟机软件&#xff0c;专为Mac操作系统设计。它支持在Mac电脑上创建和管理多个虚拟计算机&#xff0c;允许用户在不同操作系统中进行软件测试、开发和部署&#xff0c;如Windows、Linux等。该软件采用了最新的虚拟化技术&#xff0c;能够…

逻辑 | 逻辑先修营

学习到更新日期逻辑先修营-3常见逻辑连词及逻辑表达2024-3-23 1.形式逻辑基础1 2.形式逻辑基础2 3.常见逻辑连词及逻辑表述 4.OR相关考点 5.AND相关考点 6.逻辑箭头基本考点1 7.逻辑箭头基本考点2 8.代入逻辑推理事实真1 9.代入逻辑推理事实真2 10.形式逻辑四大基本考点…

VUE3 Day12pinia

属性在解构时需要用到storeToRefs语法&#xff0c;而方法则不需要 官方文档&#xff1a;https://prazdevs.github.io/pinia-plugin-persistedstate/zh/ 如果不配将使用pinia的默认配置

用Kimichat学习王庆法老师关于Sora的文章

目录 一 引言:二 提示词方面:三 与Kimi的聊天记录我:假如你是一名大模型方面的专家,提取一下这篇文章的核心观点,用三列表格的形式,https://mp.weixin.qq.com/s/Y-vmxmPu4_-tHaeP35hDJg我:上述文章的一、Spacetime Latent Patches 潜变量时空碎片, 建构视觉语言系统部分…

设计模式及其在项目、框架中的应用

设计模式的作用&#xff1a; 1、类之间关系图&#xff0c;明确的角色及其关系、作用&#xff1b; 2、符合开闭原则&#xff0c;职责明确&#xff0c;并且开放的拓展点可以有效应对后期的变化。 &#xff08;一&#xff09;、责任链模式 适用场景&#xff1a; 在一个流程中&…

ArmSoM-Sige RK3588开发板产品简介

让我们在 5 分钟内了解 Sige7。 简介​ ArmSoM-Sige7采用Rockchip RK3588新一代旗舰级八核64位处理器&#xff0c;主频高达2.4GHz&#xff0c;6 TOPS算力NPU&#xff0c;最大可配32GB大内存。支持8K视频编解码&#xff0c;拥有丰富的接口&#xff0c;支持双2.5G网口、WiFi6 &…