konva实现双击编辑富文本

发表于2022-06-29|更新于2026-02-24

|浏览量:

那一天我二十一岁，在我一生的黄金时代，我有好多奢望。我想爱，我想吃，我想在一瞬间变成天上半明半暗的云。——《黄金时代》

完整代码放到了：https://gitee.com/VampireAchao/simple-konva-html

主要是这个文件

https://gitee.com/VampireAchao/simple-konva-html/blob/master/richtext-dragable.html

思路来源：https://konvajs.org/docs/sandbox/Rich_Text.html

主要思路：

1.双击时创建(我这里是隐藏显示再定位)富文本dom节点

2.通过htmlToCanvas转换html为canvas

3.使用Konva.Image渲染

效果还是蛮不错的，能做polotno的类似案例

相关推荐

export default和module.exports

我期望理解，但是也慢慢地感受到了一种责任，给予比接受伟大，去爱比被爱伟大。 ——海明威我们在vue项目中创建两个js 在util.js中写入 123export default { ruben: 'ruben'} 在api.js中写入 123module.exports = { vampire: 'vampire'} 我们再来一个页面中使用两种方式引用 123456789101112131415<script>import util from '@/common/util.js';import api from '@/common/api.js'const util1 = require('@/common/util.js')const api1 = require('@/common/api.js')export default{ created(){ co...

我慢慢明白了我为什么不快乐，因为我总是期待一个结果。看一本书期待它让我变得深刻；吃饭、游泳期待它让我一斤斤瘦下来；发一条微信期待它被回复；对别人好期待被回待以好；写一个故事说一个心情期待被关注安慰；参加一个活动，期待换来充实丰富的经历。这些预设的期待如果实现了，我长舒一口气，如果没有实现呢，就自怨自艾。可是小时候也是同一个我，用一下午的时间看蚂蚁搬家，等石头开花。小时候不期待结果，小时候哭笑都不打折。——《允许自己虚度时光》 https://github.com/SeleniumHQ/selenium Selenium：让你的浏览器自动工作，解放双手的神器！你是否曾幻想过：打开电脑，一行代码敲下去，Chrome、Firefox、Safari……各路浏览器自动帮你完成所有重复操作，自己在旁边喝咖啡、刷剧、享受生活？这不是科幻，而是真实存在的“自动化世界”——Selenium，就是让这一切变得触手可及的开源王者！ Selenium是什么？一句话超酷简介 Automates browsers. That’s it!Selenium，就是让浏览器自己动起来的神器！不管你用什么语言，...

一寸光阴一寸金，寸金难买寸光阴。——《增广贤文》 https://github.com/davidroyer/vue2-editor Vue2Editor：基于 Vue.js 和 Quill 的轻量级文本编辑器在现代 Web 开发中，富文本编辑器是许多应用（如博客、评论系统和内容管理系统）中的关键组件。Vue2Editor 是一个基于 Vue.js 和 Quill 的开源富文本编辑器，提供了简洁易用的接口和强大的功能，适合 Vue 2.x 项目的开发者。什么是 Vue2Editor？Vue2Editor 是一个使用 Vue.js 和 Quill 构建的富文本编辑器，旨在为开发者提供一个轻量级、功能全面且易于集成的文本编辑解决方案。它基于 Quill.js 的强大功能，同时简化了在 Vue 项目中的集成过程。核心特点：基于 Vue 2.x：专为 Vue 2.x 项目设计。强大的 Quill.js 支持：继承了 Quill.js 的所有功能，包括格式化、工具栏自定义和扩展支持。易于集成：通过简单的 Vue 组件即可快速集成到项目中。 MIT 许可证：完全开源且免费。 ...

关于wx.getUserInfo获取到匿名数据的坑

生命的黎明是乐园，青春才是真正的天堂。——华兹华斯今天搞了很久，发现使用wx.getUserInfo获取到的用户昵称一直是：“微信用户”，并且头像也是默认的。。。然后官方文档里发现 https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html 打开后是这个页面然后我们看wx.getUserProfile的文档： wx.getUserProfile只能在页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用每次请求都会弹出授权窗口，用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo，详见用户信息接口调整说明。注意desc是必填我们配置好appid后调用wx.getUserProfile 代码如下 12345678910111213141516171819202122232425262728<template> <view style="width:1...

css渐变实现杂色

团结就是力量——毛泽东思路出处：https://css-tricks.com/making-static-noise-from-a-weird-css-gradient-bug/ 这是一个通过css渐变产生的锯齿BUG实现的噪点效果例如我们使用径向渐变画两个圆，这里用的径向渐变函数radial-gradient，其中第一个参数是距离中心点近的渐变样式，第二个是远一些的，每个参数中第一项是颜色，第二项是区域这里的：从中心点进行沿半径进行渐变 123456789101112131415<div class="box"></div><div class="box"></div><style> .box { display: inline-block; width: 300px; aspect-ratio: 1; margin: 10px; border: 2px solid red; background: radial-gradient(#000...

这是一个流行离开的世界，但是我们都不擅长告别。——《生活在别处》分享一个vue的UI库vuesax 官方文档：https://vuesax.com/ 它的样式还是很好看的给人一种简介的感觉 Git地址：https://github.com/lusaxweb/vuesax/

阿超

我的名字叫阿超年龄25岁家在北京市职业是软件开发每天最晚也会在八点前回家不抽烟酒浅尝辄止晚上十二点上床保证睡足八个小时睡前写一篇博客再做二十分钟俯卧撑暖身然后再睡觉基本能熟睡到天亮像婴儿一样不留下任何疲劳和压力就这样迎来第二天的早晨健康检查结果也显示我很正常我想说明我是一个不论何时都追求内心平稳的人不拘泥于胜负不纠结于烦恼不树立使我夜不能寐的敌人这就是我在这社会的生活态度

数据加载中