当前位置：首页 > article >正文

【前端】Vue中使用CKeditor作为富文本编辑器

article 2025/9/17 10:19:55

官网https://ckeditor.com/
此处记录一下我在使用的时候具体初始化的代码。

<template><div><textarea :id="id"></textarea></div>
</template><script>
export default {name: 'CkEditor',data: function () {return {id: parseInt(Math.random() * 10000).toString(),ckeditor: null,};},// 初始化mounted: function () {const self = this;let CKEDITOR = window.CKEDITOR;let ckeditor = window.CKEDITOR.replace(self.id, {height: 500,language: 'en',allowedContent: true,pasteFilter: null,toolbar: [{name: 'code',items: ['Source'],},{name: 'basicstyles',items: ['Styles','-','Bold','Italic','Strike','Underline','TextColor','BGColor','Font','FontSize',],},{name: 'styles',items: ['RemoveFormat'],},{name: 'insert',items: ['Table', 'SpecialChar', 'HorizontalRule'],},'/',{name: 'paragraph',items: ['Format','NumberedList','BulletedList','-','Indent','Outdent','-','JustifyLeft','JustifyCenter','JustifyRight','lineheight',],},{name: 'links',items: ['Link','Unlink','-','Subscribe','Unsubscribe','HtmlTemplate',],},{name: 'document',items: ['Undo', 'Redo'],},],});// 处理图片copy、pasteckeditor.on('paste', async (evt) => {if (evt.data.dataTransfer.getFilesCount() > 0) {evt.data.dataValue = '';if (evt.data.dataTransfer.getFilesCount()) {let file = evt.data.dataTransfer.getFile(0);const reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => {self.ckeditor.insertHtml(`<img src="${reader.result}"/>`);};reader.onerror = (error) => {console.error(error);};}}});// 处理tabckeditor.on('key', function (event) {let keycode = event.data.keyCode;if (keycode === 9) {event.cancel();ckeditor.execCommand('indent');}});// 监听内容变更事件ckeditor.on('instanceReady', () => {self.ckeditor = ckeditor;}); ckeditor.on('change', function () {console.log(self.ckeditor.getData());});setTimeout(() => {// 回显this.insertDiv(`<html>请输入文本</html>`,);}, 5000);},methods: {// 触发insertDiv(data) {this.ckeditor.insertHtml(data);},},
};
</script>

开发的时候遇到新的问题：HTML串无法由后端直接解析得到，于是在触发insertDiv函数之前补充了一段【word文档->xml->Base64->HTML串】的处理

<template><div><h1>XML 转 Base64 转 HTML</h1><textarea v-model="xmlInput" placeholder="输入XML"></textarea><button @click="convertXmlToBase64">Convert XML to Base64</button><div v-if="base64Output"><h2>Base64 为:</h2><textarea v-model="base64Output" readonly></textarea><button @click="convertBase64ToHtml">Convert Base64 to HTML</button></div><div v-if="htmlOutput"><h2>HTML 为:</h2><div style="color: #fff" v-html="htmlOutput"></div></div></div>
</template><script>
import axios from 'axios';export default {name: 'CkEditor',data() {return {xmlInput: '',base64Output: '',htmlOutput: ''};},methods: {init() {const formData = new FormData();formData.append('filePath', 后端文件路由);axios({url: 后端生成word对应XML的API,method: 'POST',headers: {'Content-Type': 'application/json','token': 用户token,},data: formData,}).then((res) => {this.xmlInput = res.data;this.convertXmlToBase64();});},// 将 XML 转换为 Base64convertXmlToBase64() {if (this.xmlInput) {const xmlText = this.xmlInput;const base64 = btoa(encodeURIComponent(xmlText));this.base64Output = base64;} else {alert('Please enter some XML first.');}},// 将 Base64 转换为 HTMLconvertBase64ToHtml() {if (this.base64Output) {const decodedXml = decodeURIComponent(atob(this.base64Output));const parser = new DOMParser();const xmlDoc = parser.parseFromString(decodedXml, 'text/xml');this.htmlOutput = xmlDoc.documentElement.outerHTML; // 直接使用 outerHTML 保留格式} else {alert('Please convert XML to Base64 first.');}}}
};
</script><style>
textarea {width: 100%;height: 100px;
}
</style>

最后成功实现每个word文件都能转成富文本，让用户能在网页上编辑和保存文档。

【前端】Vue中使用CKeditor作为富文本编辑器

官网https://ckeditor.com/ 此处记录一下我在使用的时候具体初始化的代码。 <template><div><textarea :id"id"></textarea></div> </template><script> export default {name: CkEditor,data: function () {return {id:…...

编程日记 2025/7/7 5:48:06

CSS篇-6

1. 如果将<html>元素的font-size设置为10rem，那么当用户调整或拖曳浏览器窗口时，其文本大小会受到影响吗？ 不会受到影响。rem单位是相对于根元素（即<html>元素）的font-size计算的。一旦<html>的fon…...

编程日记 2025/7/11 1:43:41

【计算机系统结构】习题2

目录 1.有一条静态多功能流水线由5段组成，加法用1、2、4、5段，乘法用1、3、5段，第3段时间为，其余各段为，且流水线的输出可直接返回输入端或暂存器，若计算，试计算吞吐量、加速比、效率 2.有一动…...

编程日记 2025/9/13 4:21:10

用户资产化视角下开源AI智能名片链动2+1模式S2B2C商城小程序的应用研究

摘要：在数字化时代，平台流量用户尚未完全转化为企业的数字资产，唯有将其沉淀至私域流量池并实现可控、随时触达，方能成为企业重要的数字资产。本文从用户资产化视角出发，探讨开源AI智能名片链动21模式S2B2C商城小程序在…...

编程日记 2025/9/16 8:46:41

day023-面试题总结

文章目录 1. 运维基础面试题1.1 物理机没有正常启动，进入紧急模式，你的排查思路是什么1.2 系统优化什么1.3 印象比较深刻的故障1.4 在现场环境网络方面有遇到什么问题吗1.5 kylin操作系统部署服务遇到过哪些问题？1.6 单独做项目一般几台服务器…...

编程日记 2025/7/7 23:15:39

机器学习实验七--SVM垃圾邮件分类器

SVM垃圾邮件分类器一、什么是SVM二、实例：垃圾邮件分类器1.实验要求2.原理解释2.1 数据预处理流程2.2 特征提取方法2.3 SVM分类器 3.代码实现4.实验结果5.实验总结一、什么是SVM 支持向量机(Support Vector Machine, SVM)是一种监督学习算法，主要用于…...

编程日记 2025/9/6 1:59:33

C++23 std::fstreams基础回顾

文章目录引言1.1 std::fstreams概述1.2 std::fstreams的主要功能和常用操作 2. 独占模式 (P2467R1) 的详细介绍2.1 独占模式的定义和背景2.2 独占模式的作用和优势 3. C23 std::fstreams支持独占模式 (P2467R1) 的具体实现方式3.1 代码示例3.2 实现步骤解释 4. 使用该特性可能…...

编程日记 2025/9/16 9:04:59

Git初识Git安装

目录 1. Git初识 1.1 提出问题 1.2 如何解决--版本控制器 1.3 注意事项 2 Git安装 2.1 Centos 2.2 Ubuntu 2.3 Windows 1. Git初识 1.1 提出问题不知道你工作或学习时，有没有遇到这样的情况：我们在编写各种文档时，为了防止文档丢失…...

编程日记 2025/9/6 3:41:16

使用Redisson实现分布式锁发现的【订阅超时】Subscribe timeout: (7500ms)

背景使用 redisson 实现分布式锁，出现的异常： org.redisson.client.RedisTimeoutException: Subscribe timeout: (7500ms). Increase ‘subscriptionsPerConnection’ and/or ‘subscriptionConnectionPoolSize’ parameters 从异常信息读的出来一些东…...

编程日记 2025/9/6 3:33:16

数据分析的方法总结

数据分析的方法总结一.通用性方法总结 16种常用的数据分析方法汇总-CSDN博客人人都应该掌握的9种数据分析方法_五九种数据类型-CSDN博客 9种最常用数据分析方法，解决90%分析难题_数据分析经典算法与案例-CSDN博客二.行业特殊性方法总结数据分析20大基本分…...

编程日记 2025/8/11 22:44:03

如何使用 poetry 创建虚拟环境，VSCode 如何激活使用 Poetry 虚拟环境（VSCode如何配置 Poetry 虚拟环境）

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 使用 Poetry 创建和激活虚拟环境 📒🧪 创建项目并初始化 Poetry🔧 配置虚拟环境创建位置✅ 指定Python版本📦 安装依赖并创建虚拟环境🚀 激活虚拟环境📒 在 VSCode 中配置 Poetry 虚拟环境 📒🧭 方法一：使用 V…...

编程日记 2025/9/12 10:59:57

每天掌握一个Linux命令 - ps

Linux 命令工具 ps 与 pstree 详解一、ps 工具概述 ps（Process Status）是 Linux 系统中用于查看当前进程状态的核心工具，可显示进程的 PID、用户、CPU 占用率、内存使用量、启动时间、命令行参数等信息。应用场景：监控系统性…...

编程日记 2025/8/4 19:02:46

牛客小白月赛117

前言：solveABCF相对简单，D题思路简单但是实现麻烦，F题郭老师神力b(￣▽￣)。 A. 好字符串题目大意：给定字符串s，里面的字母必须大小写同时出现。【解题】：没什么好说的&#xff0…...

编程日记 2025/9/7 7:29:40

浅谈 Linux 文件覆盖机制

引言：文件覆盖的本质文件覆盖是 Linux 文件系统中常见的操作，指将源文件内容写入目标路径，导致目标文件原有内容被替换或新文件被创建。覆盖操作通常通过命令行工具（如 mv、cp）或系统调用（如 open() 以写…...

编程日记 2025/7/8 12:56:58

美化显示GDB调试的数据结构

笔者在前面的博文记一次pdf转Word的技术经历中有使用到mupdf库，该库是使用C语言写的一个操作PDF文件的库，同时提供了Python接口，Java接口和JavaScript接口。在使用该库时，如果想要更高的性能，使用C语言接口是不二的选…...

编程日记 2025/9/12 10:56:52

一篇学习CSS的笔记

一、简介 Cascading Style Sheets简称CSS，中文翻译为层叠样式表。当HTML被发明出来初期，不同的浏览器提供了各种各样的样式语言给用户控制网页的效果，HTML包含的显示属性并不是很多。但是随着各种使用者对HTML的需求，HTML添加了大…...

编程日记 2025/9/12 10:53:33

Rust 学习笔记：自定义构建和发布配置

Rust 学习笔记：自定义构建和发布配置 Rust 学习笔记：自定义构建和发布配置发布配置文件自定义 profile 的选项 Rust 学习笔记：自定义构建和发布配置发布配置文件在 Rust 中，发布配置文件是预定义的和可定制的概要文件&#xf…...

编程日记 2025/7/8 22:00:09

StarRocks x Iceberg：云原生湖仓分析技术揭秘与最佳实践

导读： 本文将深入探讨基于 StarRocks 和 Iceberg 构建的云原生湖仓分析技术，详细解析两者结合如何实现高效的查询性能优化。内容涵盖 StarRocks Lakehouse 架构、与 Iceberg 的性能协同、最佳实践应用以及未来的发展规划，为您提供全面的技术解…...

编程日记 2025/9/12 10:52:54

笔试笔记（运维）

（数据库，SQL） limit1 随机返回其中一个聚合函数不可以嵌套使用【^】这个里面的数据任何形式组合都没有 sql常用语句顺序：from-->where-->group by-->having-->select-->order by-->limit 只要其中一个表存在匹…...

编程日记 2025/9/7 7:29:24

JVM——云原生时代JVM的演进之路

引入在风云变幻的技术世界里，JVM（Java Virtual Machine）作为 Java 语言的基石，长久以来承载着无数开发者构建软件系统的梦想。从 20 世纪 90 年代 Java 的诞生，到如今云原生时代的大幕拉开，JVM 经历了岁月…...

编程日记 2025/7/5 18:43:48

使用langchain实现五种分块策略：语义分块、父文档分块、递归分块、特殊格式、固定长度分块

文章目录分块策略详解1. 固定长度拆分（简单粗暴）2. 递归字符拆分（智能切割）3. 特殊格式拆分（定向打击）Markdown分块 4. 语义分割（更智能切割）基于Embedding的语义分块基于模型的端到…...

编程日记 2025/9/12 10:59:23

【项目记录】登录认证（下）

1 过滤器 Filter 刚才通过浏览器的开发者工具，可以看到在后续的请求当中，都会在请求头中携带JWT令牌到服务端，而服务端需要统一拦截所有的请求，从而判断是否携带的有合法的JWT令牌。那怎么样来统一拦截到所有的请求校验令牌的有…...

编程日记 2025/9/7 7:29:16

Debian上安装PostgreSQL的故障和排除

命令如下： apt install postgresql#可能是apt信息错误，报错 E: Failed to fetch http://deb.debian.org/debian/pool/main/p/postgresql-15/postgresql-client-15_15.12-0%2bdeb12u2_amd64.deb 404 Not Found [IP: 146.75.46.132 80] E: Failed to f…...

编程日记 2025/9/10 21:39:14

linux文件管理（补充）

1、查看文件命令 1.1 cat 用于连接文件并打印到标准输出设备上，它的主要作用是用于查看和连接文件。用法： cat 参数文件名参数： -n：显示行号，会在输出的每一行前加上行号。 -b：显示行号，…...

编程日记 2025/9/10 10:22:03

Python训练营---Day42

DAY 42 Grad-CAM与Hook函数知识点回顾回调函数lambda函数hook函数的模块钩子和张量钩子Grad-CAM的示例作业：理解下今天的代码即可 1、回调函数回调函数（Callback Function）是一种特殊的函数，它作为参数传递给另一个函数&#…...

编程日记 2025/9/7 7:29:06

基于空天地一体化网络的通信系统matlab性能分析

目录 1.引言 2.算法仿真效果演示 3.数据集格式或算法参数简介 4.MATLAB核心程序 5.算法涉及理论知识概要 5.1 QPSK调制原理 5.2 空天地一体化网络信道模型 5.3 空天地一体化网络信道特性 6.参考文献 7.完整算法代码文件获得 1.引言空天地一体化网络是一种将卫星通信…...

编程日记 2025/9/7 7:29:01

c++ opencv 形态学操作腐蚀和膨胀

https://www.jb51.net/article/247894.htm(上图图片来自这个博客) https://codec.wang/docs/opencv/basic/erode-and-dilate（上图图片参考博客） cv::Mat kernel cv::getStructuringElement(cv::MORPH_RECT, cv::Size(3, 3)); cv::erode(src, dst, kern…...

编程日记 2025/9/12 10:50:56

Axure组件即拖即用：横向拖动菜单（支持左右拖动选中交互）

亲爱的小伙伴，在您浏览之前，请关注一下，在此深表感谢！如有帮助请订阅专栏！免费哦！ Axure横向菜单拖不动？一拖就乱？你缺的是这个"防手残"组件！ 💢…...

编程日记 2025/8/19 3:11:41

Hadoop MapReduce：大数据处理利器

Hadoop 的 MapReduce 是一种用于处理大规模数据集的分布式计算框架，基于“分而治之”思想设计。以下从核心概念、工作流程、代码结构、优缺点和应用场景等方面详细讲解： 一、MapReduce 核心概念核心思想： Map&#xff0…...

编程日记 2025/7/9 17:23:30

RabbitMQ-Go 性能分析

更多个人笔记见： github个人笔记仓库 gitee 个人笔记仓库个人学习，学习过程中还会不断补充～ （后续会更新在github和 gitee上） 文章目录对比功能没有rabbitMQ有rabbitMQwrk 测试分析链接： 项目连接,完整…...

编程日记 2025/8/9 0:29:24

相关文章：