【创新实训个人记录】7周-基于HTML的文本组件的设计

已于 2022-05-26 15:06:45 修改
阅读量130 收藏
点赞数
分类专栏： LewzenCore-Text 文章标签： 前端 vue.js css3
于 2022-05-19 20:28:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Minori_wen/article/details/124870898
版权
本文档记录了一次创新实训中的工作，主要内容是基于HTML的文本组件设计。前端使用HTML代替SVG显示文本，支持纯文本、Markdown和LaTeX公式。编辑器组件负责显示和渲染，后端处理布局和MathML转换。讨论了文本坐标、布局实现方法以及一些疑问，明确了下一步的工作重点在于完成文本编辑器功能。
摘要由CSDN通过智能技术生成

上周会议小结

在上周的会议中讨论了文本的表示问题，最终决定修改SVG组件的定义，使用HTML表示，而非直接使用SVG。

本周工作

基于HTML的文本组件

前端通过HTML而非SVG显示文本

  • 基于HTML文本属性显示纯文本或者Markdown、基于MathML显示LaTex公式
  • SVG标签内的foreignObject

逻辑

当创建一个文本框时，核心生成一个对象，同时传入坐标

选中到某个文本框时，唤起文本编辑器组件

  • 若为纯文本或Markdown，直接实现对内容样式的修改

    文本编辑过程中，可以修改内容或样式

    • 为了实现即时的渲染，textStyle在前端实现

  • 若为LaTeX公式

    1. 可以实现在前端基于KaTeX渲染
    2. 或者将源代码发送到后端，后端解析得到MathML后返回

编辑完成后，将HTML发送到核心；核心嵌套到SVG，设置位置布局后返回到前端

若修改布局，将更新后的布局发送到后端，由后端进行修改后返回SVG

前端

定义一个vue的文本编辑器组件，用于显示和渲染文本

  • 解析并显示HTML
  • 提供修改接口

    • 修改文本内容

      纯文本内容、Markdown提供即时的渲染；LaTex公式

    • 修改文本样式

最低0.47元/天 解锁文章
lzh.M
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
asp实训报告摘要_个人网站实训报告---asp.NET 动态网站设计
weixin_39714849的博客
12-20 1116
个人网站实训报告---asp.NET 动态网站设计 网站开发技术实训报告 学生姓名 学 号 学 院 专 业 计算机应用技术计算机应用技术 题 目 asp.NET asp.NET 动态网站设计动态网站设计 个人网站个人网站 指导教师 2011 年 12 月 27 日 目次目次 1 引言 3 11 web 概述3 1.1.1 web 简介 .3 1.2 网站介绍 .3 2 需求分析 .3 21 技术可...
山东大学软件学院项目实训-创新实训-网络安全靶场实验平台（一）
番茄炒蛋不加蛋！的博客
03-06 5512
前言 一、项目介绍 二、项目框架 三、个人分工 四、本周任务完成情况 4.1 Vue安装 4.1.1node.js安装及配置 4.1.2安装vue及脚手架 4.1.3 运行Vue项目 4.2 Vue集成ElementUI 4.3 Vue学习 4.4 界面展示 参考资料 前言 本专栏文章是山东大学软件学院大三下项目实训课程的个人工作记录。 一、项目介绍 鉴于学院网安工科实验班缺少专门的实验平台用于教学和日常学习检验成果。本小组旨在搭建一个集渗透测试靶场、密码加解密、漏
（个人）AR电子书系统创新实训第二周（1）
yexianzi_的博客
05-16 272
本周任务 上周我已经初步接触了unity3d中的UI界面，这周我想学习一下unity中的交互组件并实现一个小的界面demo。这一部分先介绍一下unity中的交互组件。如有不正确的地方，欢迎指正。
Web程序设计基础头歌edu实训(2023TYUT)
qq_74521328的博客
12-21 2526
Web前端开发概述 第1关：Web前端开发相关的概念 1、所有的浏览器对同一个CSS样式的解析都相同，因此页面在不同浏览器下的显示效果完全一样。 错 2、URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符”。URL其实就是Web地址，俗称“网址”。 对 3、HTTP”是一种详细规定了浏览器和万维网服务器之间互相通信的规则。 对 4、下列选项中，（ ）不是Web浏览器 Linux 5、张同学正在家里通过拨号上网访问新浪主页，此时，他自己的计算机是（ ）。 浏览器
Java方向（SSM+SpringBoot）项目实训Day15-周测+总结
m0_43395110的博客
08-05 1718
Day15-周测+总结 周测1（7.26）周测2（8.2） Java方向（SSM+SpringBoot）项目实训 Day15（2020.8.15） 周测1（7.26） 1.String，StringBuffer，StringBuilder的区别？ 2.String str = “i” 与 String str = new String(“i”)一样吗？ 3.Java中IO流分为几种？ 4.Collection 和 Collections有什么区别？ 5.List、Set、Map之间的区别是什么？ 6.Has
贵师大-大数据实训项目-笔记
若兰幽竹
05-08 3104
我们要做什么： 目标：电商网站+电商网站后台管理系统+大数据分析+数据可视化 思路：按照数据的采集，数据的存储，数据分析处理，数据可视化 逻辑图： （*）注意：实训教室：6506 一、数据的采集 1、电商后台管理系统：Spring MVC就是后台管理系统 保证Spring MVC实训项目运行起来 ...
基于Spring Boot的个人博客系统的设计与实现 毕业设计-附源码271611
weixin_BYSJ1987的博客
11-07 1476
个人博客系统主要为用户提供博客资讯、博客资讯分类、博客分类、博客中心、数据分析等功能，用户通过Internet可以发表一些自已撰写的文章以和其他网友进行交流。博客系统主要实现了文章管理的数字化、信息化、智能化，是打破传统报刊、杂志发表文章方式的新尝试。 本系统的开发设计实现采用springboot技术，系统后台使用JavaScript的Mysql数据库，并通过使用Java技术访问。
暑期2022年java实训--计算器
weixin_63747167的博客
06-19 535
根据课本计算器实例，修改制成简易计算器
基于 Python 的电信领域电信领域设计与实现-毕业设计程序
小周学长
03-14 589
伴随着移动互联网技术、机器学习和深度学习技术的发展，以及数据资源的积累和并行计算能力的提升，自然语言处理的研究方法也发生了巨大的变化，已经在语音和图像的识别领域取得了显著的成果。随着机器学习方法突飞猛进的发展，特别是深度学习技术的蓬勃发展和广泛应用，研究者根据现实世界中巨大的应用需求，借助并充分运用了先进的机器学习方法，在机器翻译、话语对话系统、社会媒体挖掘、情感分析等任务中取得了突破性进展。SQLite，是一款轻型的数据库，是遵守ACID的关系型数据库管理系统，它包含在一个相对小的C库中。
大语言模型原理与工程实践：手把手教你训练 7B 大语言模型 自动化训练框架
程序员光剑
07-10 497
近年来，大语言模型（Large Language Models，LLMs）在自然语言处理领域取得了突破性进展。从GPT-3到ChatGPT，再到最新的GPT-4，这些模型展现出了惊人的语言理解和生成能力，引发了学术界和产业界的广泛关注。然而，训练如此庞大的模型不仅需要海量的数据和计算资源，还需要复杂的工程实践和优化技巧。本文将深入探讨大语言模型的原理，并以7B参数规模的模型为例，详细介绍如何构建一个自动化训练框架，使读者能够亲自动手训练自己的大语言模型。
基于STM32的酒驾监控系统设计与实现（OneNet云平台）
07-06 4721
基于STM32的酒驾监控系统，选择STM32作为主控芯片，使用电机和控制开关模拟汽车发送机的运行，使用酒精探测器监测驾驶员座位前方的酒精浓度，并通过LCD显示屏实时显示。当浓度超过阈值时，蜂鸣器报警，系统将当前GPS定位通过短信发送给家人，此时系统会切断车辆电源，汽车将无法启动，以保障行车安全； 同时，系统会将GPS信息，酒精采集浓度上传到OneNet云平台，通过地图形式展示车辆的位置，方便家人定位位置。
实训周笔记
weixin_67348669的博客
03-22 6073
主机信息收集技术—基础知识： 主要收集目标主机的相关信息，主要包括端口、服务、漏洞等信息。信息收集手段多样，可借助工具也多种多样。 端口扫描：Nmap 主机信息收集技术—Nmap： namp 192.168.1.1 namp -A –T4 -v 192.168.1.1 -A 开启操作系统识别和版本识别功能 -T 0-6档，设置扫描的快慢，0最慢，6最快； 级别越高，对网络带宽要求越高，另外扫描太快，容易被安全设备发现； 一般选择T4 -v 显示信息的级别,...
基于医疗报告生成的视觉-文本注意语义一致性模型的研究
3985面向医疗报告生成的视觉-文本注意语义一致性易周* 1、雷黄2、陶周3、华助赋4、令少41东南大学计算机科学与工程学院2北京航空航天大学人工智能研究院SKLSDE3南京理工大学计算机科学与技术学院4Inception ...
Vue2 中对数组进行操作时需要注意什么
最新发布
m0_73882020的博客
09-06 476
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 958
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
web开发
2301_76876837的博客
09-04 480
我们在访问的网站的时候，一般就是在浏览器的网址栏里输入，再敲个回车，我们就可以访问到我们想要的网站（比如京东）。这是为什么呢？我们访问的浏览器是一个程序，京东也是一个程序，只是京东在人家电脑上运行着，我们只是远程访问了人家的前端页面。我们根据下图来讲解一下web网站的工作流程：我们在浏览器输入我们想要查找的域名，回车（搜索）后，会到，前端服务器接受到请求后会把相对应的前端代码返回给浏览器，浏览器会自动解析前端代码（因为内置了解析引擎），展示出页面效果。前端代码里由一句代码会是访问。
Nginx部署前端Vue项目
不会代码的小林
09-03 1334
Nginx是一款轻量级的高性能Web服务器，可以用于静态文件的托管和反向代理等场景。现在，您可以在浏览器中访问http://example.com（请替换为您自己的域名），应该可以看到Vue应用程序正在运行。请将example.com替换为您自己的域名，将/var/www/my-project/dist替换为Vue项目的dist目录的实际路径。现在，我们需要配置Nginx来托管Vue项目的静态文件。接下来，我们可以使用Vue CLI创建一个新的Vue项目。在部署之前，我们需要先构建Vue项目。
浅析前端数据埋点监控：用户行为与性能分析的桥梁
dsgdauigfs的博客
09-03 1067
总的来说，前端埋点技术不仅是提升用户体验和产品运行效率的利器，更是实现数据驱动决策的重要工具。随着各类专业工具的出现，如腾讯有数、百度统计和微软Clarity，企业可以根据需求选择最适合的工具进行数据分析和优化，从而在竞争激烈的市场中保持领先地位。通过深入理解用户行为和性能数据，企业能够做出更明智的决策，推动业务持续发展，实现长期成功。通过本文的介绍，希望能够帮助前端开发者和产品团队更好地理解数据埋点的重要性，掌握实施数据埋点的方法，从而在实际工作中发挥其最大的价值。努力的小雨。
单片机c语言程序设计实训100例--基于pic+proteus仿真
09-09
单片机C语言程序设计实训100例是一套基于PIC单片机的C语言程序设计课程，通过Proteus仿真软件进行实验验证。这套教材主要包含了100个实例，涵盖了单片机C语言程序的各个方面，旨在让学生能够全面掌握单片机的编程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值