editor
文章平均质量分 64
很甜的西瓜
技术交流,技术研究。做自己想做的,做好自己想做的.
展开
-
一个在线的NodeJS环境和终端运行界面
StackBlitz 经典编辑器、Codeflow、官方 SvelteKit 教程和 Cloudflare Wrangler 工作人员等。最常见的用例包括生产级 IDE、编程教程、下一代文档、人工智能应用程序或员工入职平台。,右边放一个iframe预览。这是不是就是一个在线的vscode了.想体验自己去搜索。以前需要云虚拟机来执行用户代码的应用程序,在 WebContainers 中可以完全在客户端运行。根据官方文档可以轻松搭建一个在线可以运行NODE的环境。比如在左边创建一个文件树,中间放一个。原创 2024-04-02 19:44:50 · 800 阅读 · 0 评论 -
实现简单纯Canvas文本输入框,新手适用
最重要的是保证canvas的字体样式要与元素的字体样式一样,这样才能利用textarea的兴标和选中区体系。一、最简单可能是用dom渲染一个input,覆盖在图形上面进行文本编辑,编辑完再把内容更新到图形.这样简单,但是缺点也明显,就是它不是真正绘制在canvas上面,没有层级。下面看一下效果,因为也是花了二三个小时,弄了一个比较简单的,输入选中,光标指定位置生入,性能也是可以,输入响应很快。技术细节有一个地方,我是这样做的。选中区的文本颜色和背景要高亮,如果做文本计算的话,那有点麻烦,而且性能也不好/。原创 2023-08-16 21:18:05 · 1782 阅读 · 0 评论 -
开发图形编辑器
一般开发这种需求,首先要了解几个概念性的东西,才能更好的熟练使用这些框架。节点 (就是每个图形),有矩形、图形,或者自义定图形,像jsplumb它是通过svg和dom结合渲染端点 (图形上面的锚点)一般情况都固定图形的上下左右连接线 (从起始端点连接到结束端点的线).线有很多种、直线、贝塞尔、折线.另外还有一些其它图形方面可能用到的图形渲染框架.g6、jsplumb、fabric、...原创 2019-11-29 16:00:01 · 993 阅读 · 0 评论 -
搭建代码编辑器
ACE ,Code Mirror, monaco 三款代码编辑器,整体引用都差不多,monaco 是微软出品vscode也是采用的这个.它的智能提示会很方便,如果在nodejs环境下可以添加其它 type.d.ts 文件可以直接智能提示.下面我是用vue搭的,有三种不同的模式,初始化直接设置就会自动加载,但是编辑器的资源需要你自己事先引入到页面中<!DOCTYPE html>...原创 2019-07-11 19:25:32 · 963 阅读 · 1 评论