質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

461閲覧

electronでEditor.jsを使いたい

kou123

総合スコア2

Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/05/25 13:40

実現したいこと

electronで作成しているメモアプリにてEditor.jsのリッチテキストエディタを使用したい。
オフライン環境のデスクトップアプリなのでCDNの使用は避けたい。

前提

electronでオフラインで動かすメモアプリを作っています。
npmでインストールしたリッチテキストエディタ(https://editorjs.io/)をrequireする際にエラーが起きてしまう。
セキュリティの問題上 、main.jsのontextIsolationはtrue,のまま実行したい。

発生している問題・エラーメッセージ

VM4 sandbox_bundle:2 Unable to load preload script: /Users/node-js/memo-app/preload.js VM4 sandbox_bundle:2 Error: module not found: @editorjs/editorjs at preloadRequire (VM4 sandbox_bundle:2:82057) at <anonymous>:4:18 at runPreloadScript (VM4 sandbox_bundle:2:82809) at VM4 sandbox_bundle:2:83068 at VM4 sandbox_bundle:2:83223 at _electron_webpack_init (VM4 sandbox_bundle:2:83227) at VM4 sandbox_bundle:2:83350 index.html:12 Uncaught TypeError: Cannot read properties of undefined (reading 'EditorJS') at index.html:12:37

該当のソースコード

index.html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Memo App</title> 6 </head> 7 <body> 8 <!-- エディターを表示するためのdiv要素 --> 9 <div id="editor"></div> 10 <script> 11 // Editor.jsを初期化する 12 const editor = new window.ipc.EditorJS({ 13 holder: 'editor', // エディターを表示する要素のid 14 }); 15 </script> 16 </body> 17</html>

preload.js

1// Electronから必要なモジュールや関数をインポート 2const { contextBridge, ipcRenderer, } = require('electron'); 3const EditorJS = require('@editorjs/editorjs'); 4 5// メインプロセスとレンダラープロセスの間で通信するために、IPCハンドラーを公開する 6contextBridge.exposeInMainWorld('ipc', { 7 // EditorJS を公開 8 get EditorJS() { 9 return EditorJS; 10 }, 11//以下省略 12}); 13

試したこと

直接htmlでrequireするのは勿論失敗でした。
main.jsでeditorJsに対してrequireを使用する場合のやり方がわからず、苦戦している状態です。

補足情報(FW/ツールのバージョンなど)

下記は使用しているバージョンです。
"electron": "^24.1.2"
"@editorjs/editorjs": "^2.27.0",

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

HTMLに下記のコードを入れることで解決しました。

<script src="./node_modules/@editorjs/editorjs/dist/editorjs.umd.js"></script>

投稿2023/05/25 14:52

kou123

総合スコア2

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問