From 0b8d60e36c4827cfb3cf1a3bb1235c7be020d986 Mon Sep 17 00:00:00 2001 From: yiqiang Date: Tue, 20 Sep 2022 16:51:48 +0800 Subject: [PATCH] paste support insert image Signed-off-by: yiqiang --- .../src/main/ets/components/NoteContent.ets | 33 ++++++++++++++++- .../main/ets/components/NoteContentComp.ets | 36 +++++++++++++++++-- .../components/NoteContentCompPortrait.ets | 33 ++++++++++++++++- .../src/main/resources/rawfile/rich_editor.js | 23 ++++++++++++ .../ets/default/baseUtil/OperationUtils.ets | 27 ++++++++++++++ product/phone/src/main/module.json5 | 3 ++ product/tablet/src/main/module.json5 | 3 ++ 7 files changed, 154 insertions(+), 4 deletions(-) diff --git a/common/component/src/main/ets/components/NoteContent.ets b/common/component/src/main/ets/components/NoteContent.ets index 1a005fe..a60fe1e 100644 --- a/common/component/src/main/ets/components/NoteContent.ets +++ b/common/component/src/main/ets/components/NoteContent.ets @@ -17,6 +17,7 @@ import DateUtil from '@ohos/utils/src/main/ets/default/baseUtil/DateUtil' import RdbStoreUtil from '@ohos/utils/src/main/ets/default/baseUtil/RdbStoreUtil' import FolderData from '@ohos/utils/src/main/ets/default/model/databaseModel/FolderData' import NoteData from '@ohos/utils/src/main/ets/default/model/databaseModel/NoteData' +import { atob, btoa } from 'js-base64' import { TableName, NoteTableColumn, SysDefFolderUuid, Favorite, Delete } from '@ohos/utils/src/main/ets/default/model/databaseModel/EnumData' import StyleConstants from '@ohos/utils/src/main/ets/default/constants/StyleConstants' @@ -78,6 +79,32 @@ export struct NoteContent { LogUtil.info(TAG, 'continueNote content', continueNote) AppStorage.SetOrCreate('ContinueNote', continueNote) LogUtil.info(TAG, 'callbackScheduledSave, set continue note success') + }, + callbackPasteImage: (html) => { + if (html) { + LogUtil.info(TAG, 'paste info' + html) + let realHtml = "" + let base64regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/ + if (html && html.indexOf("base64") > 0) { + LogUtil.info(TAG, " getSrcFromHtml, src[1] : " + html) + let imgData = html.split(',')[1]; + let imgType = 'png' + if (html.indexOf("jpeg") > 0){ + imgType = 'jpg' + } else if (html.indexOf("gif") > 0) { + imgType = 'gif' + } + if (base64regex.test(imgData)) { + imgData = atob(imgData) + } + let filePath = OperationUtils.saveImage(imgData, imgType) + realHtml = "file://" + filePath + } + LogUtil.info(TAG, 'paste info11' + realHtml) + this.controllerShow.runJavaScript({ script: "javascript:RICH_EDITOR.insertImageHtml('" + realHtml + "')" }) + } else { + LogUtil.info(TAG, 'paste info22223') + } } } @@ -97,7 +124,7 @@ export struct NoteContent { .javaScriptProxy({ object: this.noteContent, name: "callBackToApp", // html--> name.method - methodList: ["callbackhtml", "callbackScheduledSave"], + methodList: ["callbackhtml", "callbackScheduledSave", "callbackPasteImage"], controller:this.controllerShow }) .onPageEnd((e) => { @@ -109,6 +136,10 @@ export struct NoteContent { } }) .zoomAccess(false) + .imageAccess(true) + .onlineImageAccess(true) + .fileAccess(true) + .domStorageAccess(true) .height('70%') .width('100%') } diff --git a/common/component/src/main/ets/components/NoteContentComp.ets b/common/component/src/main/ets/components/NoteContentComp.ets index d0ab475..76f186b 100644 --- a/common/component/src/main/ets/components/NoteContentComp.ets +++ b/common/component/src/main/ets/components/NoteContentComp.ets @@ -24,7 +24,7 @@ import { EditContentDialog, DeleteDialog, EditTitleDialog } from './CusDialogCom import FolderUtil from '@ohos/utils/src/main/ets/default/baseUtil/FolderUtil' import NoteUtil from '@ohos/utils/src/main/ets/default/baseUtil/NoteUtil' import prompt from '@system.prompt' -import featureAbility from '@ohos.ability.featureAbility' +import { atob, btoa } from 'js-base64' import { LogUtil } from '@ohos/utils/src/main/ets/default/baseUtil/LogUtil' import OperationUtils from '@ohos/utils/src/main/ets/default/baseUtil/OperationUtils' import mediaquery from '@ohos.mediaquery' @@ -107,6 +107,34 @@ export struct NoteContentComp { LogUtil.info(TAG, 'callbackScheduledSave, set continue note success') }, + callbackPasteImage: (html) => { + if (html) { + LogUtil.info(TAG, 'paste info' + html) + let realHtml = "" + let base64regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/ + if (html && html.indexOf("base64") > 0) { + LogUtil.info(TAG, " getSrcFromHtml, src[1] : " + html) + let imgData = html.split(',')[1]; + let imgType = 'png' + if (html.indexOf("jpeg") > 0){ + imgType = 'jpg' + } else if (html.indexOf("gif") > 0) { + imgType = 'gif' + } + if (base64regex.test(imgData)) { + imgData = atob(imgData) + } + let filePath = OperationUtils.saveImage(imgData, imgType) + realHtml = "file://" + filePath + } + LogUtil.info(TAG, 'paste info11-' + realHtml) + this.controllerShow.runJavaScript({ script: "javascript:RICH_EDITOR.insertImageHtml('" + realHtml + "')" }) + LogUtil.info(TAG, 'paste info11--' + realHtml) + } else { + LogUtil.info(TAG, 'paste info22225') + } + }, + callbackGetSize: (size) => { if (size) { AppStorage.Set('inSetValue', parseInt(size.slice(0, -2)) - 12) @@ -133,7 +161,7 @@ export struct NoteContentComp { .javaScriptProxy({ object: this.noteContent, name: "callBackToApp", // html--> name.method - methodList: ["callbackhtml", "callbackhtmlSave", "callbackScheduledSave", "callbackGetSize"], + methodList: ["callbackhtml", "callbackhtmlSave", "callbackScheduledSave", "callbackGetSize", "callbackPasteImage"], controller:this.controllerShow }) .onPageEnd((e) => { @@ -148,6 +176,10 @@ export struct NoteContentComp { this.controllerShow.runJavaScript({ script: "RICH_EDITOR.setInputEnabled(false)" }) } }) + .imageAccess(true) + .onlineImageAccess(true) + .fileAccess(true) + .domStorageAccess(true) .zoomAccess(false) .height('88%') .width('100%') diff --git a/common/component/src/main/ets/components/NoteContentCompPortrait.ets b/common/component/src/main/ets/components/NoteContentCompPortrait.ets index 9edc0b5..ca3ca38 100644 --- a/common/component/src/main/ets/components/NoteContentCompPortrait.ets +++ b/common/component/src/main/ets/components/NoteContentCompPortrait.ets @@ -17,6 +17,7 @@ import DateUtil from '@ohos/utils/src/main/ets/default/baseUtil/DateUtil' import RdbStoreUtil from '@ohos/utils/src/main/ets/default/baseUtil/RdbStoreUtil' import FolderData from '@ohos/utils/src/main/ets/default/model/databaseModel/FolderData' import NoteData from '@ohos/utils/src/main/ets/default/model/databaseModel/NoteData' +import { atob, btoa } from 'js-base64' import { TableName, NoteTableColumn, SysDefFolderUuid, Favorite, Delete } from '@ohos/utils/src/main/ets/default/model/databaseModel/EnumData' import StyleConstants from '@ohos/utils/src/main/ets/default/constants/StyleConstants' @@ -84,6 +85,32 @@ export struct NoteContentCompPortrait { let continueNote: string = JSON.stringify(this.selectedNoteData.toNoteObject()) AppStorage.SetOrCreate('ContinueNote', continueNote) LogUtil.info(TAG, 'callbackScheduledSave, set continue note success') + }, + callbackPasteImage: (html) => { + if (html) { + LogUtil.info(TAG, 'paste info' + html) + let realHtml = "" + let base64regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/ + if (html && html.indexOf("base64") > 0) { + LogUtil.info(TAG, " getSrcFromHtml, src[1] : " + html) + let imgData = html.split(',')[1]; + let imgType = 'png' + if (html.indexOf("jpeg") > 0){ + imgType = 'jpg' + } else if (html.indexOf("gif") > 0) { + imgType = 'gif' + } + if (base64regex.test(imgData)) { + imgData = atob(imgData) + } + let filePath = OperationUtils.saveImage(imgData, imgType) + realHtml = "file://" + filePath + } + LogUtil.info(TAG, 'paste info11' + realHtml) + this.controllerShow.runJavaScript({ script: "javascript:RICH_EDITOR.insertImageHtml('" + realHtml + "')" }) + } else { + LogUtil.info(TAG, 'paste info22224') + } } } @@ -102,7 +129,7 @@ export struct NoteContentCompPortrait { .javaScriptProxy({ object: this.noteContent, name: "callBackToApp", // html--> name.method - methodList: ["callbackhtml", "callbackScheduledSave"], + methodList: ["callbackhtml", "callbackScheduledSave", "callbackPasteImage"], controller:this.controllerShow }) .onPageEnd((e) => { @@ -111,6 +138,10 @@ export struct NoteContentCompPortrait { script: "RICH_EDITOR.setHtml('" + this.selectedNoteData.content_text + "')" }) }) + .imageAccess(true) + .onlineImageAccess(true) + .fileAccess(true) + .domStorageAccess(true) .zoomAccess(false) .height('100%') .width('100%') diff --git a/common/resources/src/main/resources/rawfile/rich_editor.js b/common/resources/src/main/resources/rawfile/rich_editor.js index b19e7c2..404a143 100644 --- a/common/resources/src/main/resources/rawfile/rich_editor.js +++ b/common/resources/src/main/resources/rawfile/rich_editor.js @@ -373,9 +373,32 @@ function scheduledSaveContent() { console.info('scheduledSaveContent end'); } +document.body.addEventListener('paste', (event) => { + let length = event.clipboardData.items.length; + if (length > 0) { + let file = event.clipboardData.items[0].getAsFile(); + const reader = new FileReader(); + reader.onloadend = () => { + callBackToApp.callbackPasteImage(reader.result); + } + reader.readAsDataURL(file); + event.preventDefault(); + } +}); + RICH_EDITOR.getFontSizes = function () { document.execCommand('fontSize', false, null); var fontElements = window.getSelection().anchorNode.parentNode; var getSize = fontElements.style.fontSize; var str = callBackToApp.callbackGetSize(getSize); +}; + +RICH_EDITOR.insertImageHtml = function (contents) { + let selection = window.getSelection(); + if (!selection.rangeCount) + return false; + selection.deleteFromDocument(); + let img = document.createElement('img'); + img.src = contents; + selection.getRangeAt(0).insertNode(img); }; \ No newline at end of file diff --git a/common/utils/src/main/ets/default/baseUtil/OperationUtils.ets b/common/utils/src/main/ets/default/baseUtil/OperationUtils.ets index 99ff038..b55b4a3 100644 --- a/common/utils/src/main/ets/default/baseUtil/OperationUtils.ets +++ b/common/utils/src/main/ets/default/baseUtil/OperationUtils.ets @@ -57,6 +57,33 @@ export class OperationUtils { return imagePath.toString() } + saveImage(imageData: string, imageType: string): string { + try { + var context = globalThis.noteContext + // 1、获取本地路径 + var dir = context.filesDir + // 2、生成本地文件名 + var time = new Date().getTime() + var imagePath = dir + "/" + time.toString() + "_note" + "." + imageType + let fd = fileio.openSync(imagePath, 0o100 | 0o2, 0o666) + let arrayBuffer = new ArrayBuffer(imageData.length) + let ia = new Uint8Array(arrayBuffer) + for(let i = 0; i < imageData.length; i++) { + ia[i] = imageData.charCodeAt(i) + } + + // 3、把image数据写入本地图片文件中 + fileio.writeSync(fd, ia.buffer) + + } catch (error) { + LogUtil.info(TAG, "create error: " + error); + return; + } + LogUtil.debug(TAG, 'save image end'); + + return imagePath.toString() + } + getIdByUri(uri:string): number { let srcIndex = uri.lastIndexOf('/'); let srcEnd = uri.length; diff --git a/product/phone/src/main/module.json5 b/product/phone/src/main/module.json5 index b2038c6..d81f793 100644 --- a/product/phone/src/main/module.json5 +++ b/product/phone/src/main/module.json5 @@ -24,6 +24,9 @@ "phone", ], "requestPermissions": [ + { + "name": "ohos.permission.INTERNET" + }, { "name": "ohos.permission.READ_MEDIA", "reason": "$string:read_media_permission" diff --git a/product/tablet/src/main/module.json5 b/product/tablet/src/main/module.json5 index 54c3fbb..1a6c0d7 100644 --- a/product/tablet/src/main/module.json5 +++ b/product/tablet/src/main/module.json5 @@ -24,6 +24,9 @@ "tablet" ], "requestPermissions": [ + { + "name": "ohos.permission.INTERNET" + }, { "name": "ohos.permission.READ_MEDIA", "reason": "$string:read_media_permission" -- Gitee