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的类似案例

相关推荐

谁若想在困厄时得到援助，就应在平日待人以宽——萨迪分享一个获取文件信息的js库MediaInfo.js 代码仓库： https://github.com/buzz/mediainfo.js 代码如下： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...

vue封装axios请求工具类

以勇气面对人生的巨大悲恸，用耐心对待生活的小小哀伤。——雨果首先安装 12345678# axioscnpm i --save axios# 格式化参数插件cnpm i -- save qs# 对象合并插件cnpm i -- save lodash# cookie操作cnpm i -- save vue-cookie 然后我们自己封装一个请求组件首先创建文件然后放入我们的代码。。。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132import ...

正如自然忌讳真空一样，人类是讨厌平等的。——《我是猫》首先按照官方文档创建项目： 1npm init vite hello-vue3 -- --template vue # 或 yarn create vite hello-vue3 --template vue 然后我们安装jsx插件：https://github.com/vuejs/babel-plugin-jsx 1npm install @vue/babel-plugin-jsx -D 然后配置vite.config.js 123456789101112import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import vuejsx from "@vue/babel-plugin-jsx"// https://vitejs.dev/config/export default defineConfig({ plugins: [vue(),...

没有意义的事物是最美丽的。——《新名字的故事》昨天分享了vuera 今天再分享一个同类型库veaury，属于是vuera的新版库中文文档：https://github.com/devilwjp/veaury/blob/master/README_zhcn.md 什么是Veaury?Veaury 是基于React和Vue3的工具库，主要用于React和Vue在一个项目中公共使用的场景，主要运用在项目迁移、技术栈融合的开发模式、跨技术栈使用第三方组件的场景。重要功能 🌞 支持 Vue3 🌈 支持 Context - 同一个应用中出现的vue组件和react组件的context是共享的. 💗 支持跨框架的hooks调用 - 可以在react组件中使用vue的hooks，获取到vue组件或者应用的上下文数据，比如vue-router、vuex，也可以在vue组件中使用react的hooks，获取到react组件或者应用的上下文数据，比如react-router、provide、context等

图片预览放大js插件

分享一个非常简单的图片预览插件viewer 首先引入js和css viewer.js:下载链接 jquery1.11.3.js:下载链接 jquery-viewer.min.js:下载链接 viewer.css:下载链接然后引入 123456789<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="{路径}/viewer.css" rel="external nofollow" rel="external nofollow"> <script src="...

我当然不会试图摘月，我要月亮奔我而来。——奥黛丽赫本 https://github.com/mozilla/readability 最近发现了一款由 Mozilla 开发的开源工具 Readability.js，这是一个专注于网页内容提取的库，它能够快速解析网页中的正文内容，过滤掉广告、导航栏等干扰信息。Firefox 的“阅读模式”正是基于 Readability.js 实现的。这款工具对于需要优化网页阅读体验、自动提取文章内容的开发者来说非常实用。什么是 Readability.jsReadability.js 是 Mozilla 为了提升用户网页阅读体验而开发的一个工具，能够将网页上的主要内容提取出来并生成清爽的 HTML 片段。它非常适合集成到浏览器扩展、阅读器应用、内容聚合平台等项目中。安装和使用1. 安装在 Node.js 环境中可以通过 npm 直接安装： 1npm install @mozilla/readability 2. 基本使用要使用 Readability.js 提取网页内容，只需传入一个 DOM 文档对象并调用 parse() 方法： 1...

阿超

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

数据加载中