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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

3回答

3141閲覧

【HTML/CSS/Electron】テキスト入力部分においての、一部文字列強調

nnahito

総合スコア2004

Electron

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2グッド

2クリップ

投稿2016/12/10 20:02

編集2022/01/12 10:55

質問概要

Electron.jsを使って、ちょっとしたテキストエディタを作ろうと奮闘しております。
しかし、AtomやVisual Studio Codeのように、テキスト入力部分で、予約語のような一部の文字の色の変更や強調の方法がわかりません。

質問詳細

Electron.jsを使って、ちょっとしたテキストエディタを作ろうと奮闘しております。
しかし、AtomやVisual Studio Codeのように、テキスト入力部分で、予約語のような一部の文字の色の変更や強調の方法がわかりません。

いろいろ調べてみたところ、有力な情報はDIV要素に
contenteditable="true"を与えることかなと思ったのですが、
いざ実行してみると挙動が結構重いです。

HTMLのtextareaには、Windowsなどで言うリッチエディットが無いようなので、
Atomなどはどのようにテキスト入力部で分の色の変更を行っているのでしょうか?

やはり、contenteditable="true"を指定し、JavaScriptなどで、予約後が入力に出てきたら、
<span style="color: red;"></span>等を追加したりしているのでしょうか?

ご存じの方いらっしゃいましたら、ご教示頂けますと幸いです。
お知恵をお貸しください。
よろしくお願いいたします。

蛇足

記念すべき、100回目の質問!

LLman, kei344👍を押しています

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

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

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

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

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

guest

回答3

0

AtomやVisual Studio Code(以下Code)でのエディタ表示部分は、textareaなどのHTMLに元からあるテキスト編集用要素でつくられているのではなく、全て自前でdivやspanなどを組み合わせて作り上げています。AtomもCodeも開発者ツールが表示できますので、実際にどのようなDOM構成になっているか見てみると良いでしょう。また、どちらもオープンソースとしてソースコードが公開されていますので、それぞれのライセンスにさえ従っていればそのままパクっても問題ありません。(Light Tableも同じくElectronを使ってますので、参考になるかも知れません)

なお、IMEの処理をするには<input type="text"><textarea>などが必須なのですが、別途入力用のinput要素などを用意している形で補っています(AtomとCodeで用意の仕方が異なる)。背面に隠したテキスト入力要素から入力中の文字を取得して同様にレンダリングしたり(Atom)、そのテキスト入力要素をカーソル部分においたり(Coed)して、あたかも直接編集しているように見せています。最終的には入力終了後にDOMを再レンダリングする形で作成されていくようになっています。

※ Atomの仕組みはラップやシンタックスカラーが反映されますが、文節選択がどの部分を指しているかというAPIがDOMに存在しないため、どの文節が選択されているかがわからないという欠点があります(未決定状態はわかる)。逆に、Codeの仕組みはChromiumでの表示そのものなので文節選択等がうまく現れますが、ラップやシンタックスカラーなどは入力完了まで反映されません。また、初期のバージョンでは上にオーバーラップされる形で表示されるなど不具合がありました(現在は文字入力の度にずらす処理を入れており、修正済み)。

投稿2016/12/11 00:14

raccy

総合スコア21733

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

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

nnahito

2016/12/11 04:39

ご回答ありがとうございます。 なるほど、そもそもに表示されているのはtexareaなどではなく、生粋なるHTMLだったのですね。 勉強になります。 しかし、私の実力が完全に足りなく、先程AtomのGitHubを見てきたのですが、 何処にどのソースコードがあるのかすら分かりませんでした…… 開発しているエディタは、プログラミングのコードを作るためのエディタではないため、 そんなに多くの予約語などは今のところ必要としておりません。 もう少し簡単に扱えるライブラリなどはございますでしょうか? まだ、読んでいる途中ですが、 http://qiita.com/yuku_t/items/fb92e173120d7b2e49ed などは未完のまま記事が終わってしまっておりますし…… ご存知でしたら、合わせてご教示頂けますと幸いです。
guest

0

以下は正攻法ではないのですが、開発目的によっては有効なので、
もし私ならどう考えるか、参考までにお話しておきます。


そもそも、エディタを自作するのは大変です。
同じElectronを使っていても、MSやGitHubの開発規模を考えれば、
個人レベルでそれと同水準のエディタを開発するのは難しいでしょう。

そこで、私でしたら、エディタを自作するかわりに、
VSCodeやAtomなど既存のエディタの拡張を作ります。

さらに、テキストエディタによっては(Notepad++とか)、
予約語の独自リストを定義できるものがあるので、
そういうものを利用するとより楽に作れます。

たとえば、自作言語を普及させるために、
ユーザがエディタで書きやすいようにしたいといった目的なら、
違うのは言語の文法や予約語だけで、エディタ部分は車輪の再発明ですから、
全体を自作するより部分的に拡張する方がはるかに効率的です。


ただまあ、学習目的でエディタを作ること自体が目的、
といった場合には的外れな回答になってしまいますが、
多くの場合で開発の労力が百分の一とかになるので、
選択肢のひとつとして回答しておきたかったのです。

投稿2016/12/12 11:54

LLman

総合スコア5592

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

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

nnahito

2016/12/12 12:03

ご回答ありがとうございます。 一言で「エディタ」と書いてしまいましたが、 プログラミングのエディタが作りたいわけではないんです。 テキストエディタで、特定のワードのみ強調できるといった内容のもので、 そのワードの強調部分で詰まってしまいました…… 何か、良いフレームワークなどご存知ではないでしょうか?
LLman

2016/12/12 18:12

>テキストエディタで、特定のワードのみ強調できるといった内容 回答本文の繰り返しになってしまいますが、いったんゼロベースで、 「どーしてもエディタを自作する必要があるかどうか?」を考えたいです。 強調させるだけなら、コードエディタではなくテキストエディタでも、 シンタックスハイライトを同じように利用することはできます。 たとえば、「住所」「氏名」とか、「価格」「売上」とか、 特定のキーワードを「if」や「for」の代わりに強調するわけです。 コードエディタをテキストエディタとして使っても別にいいわけです。 というかむしろ、「Notepad++」や「秀丸」は 「コードエディタとしても使えるテキストエディタ」に分類できそうです。 もし「どーしても既存のエディタでは難しい」という機能が必要な場合でも、 エディタの形態で処理しないとダメなのか、バッチ処理とかではダメなのかも考えます。 その際、処理の工程を分解して、難しい部分だけ別に処理する方法もあります。 たとえば、表組をかんたんに作りたいとか、かんたんに色指定したいとか。 そういうときは、そこだけツールにすると、エディタ全体を作るより楽です。 上の例で言えば、Wiki記法からHTMLのテーブルに変換するツールや カラーピッカーを作って、ほかの部分は普通のエディタで書くわけです。 ようするに、既存のソフトに対して差分の機能だけ作ります。 自分の作るものに合うフレームワークやライブラリがない場合、 すでにあるソフトに対して拡張やプラグインを書く発想です。
nnahito

2016/12/15 13:42

ご返信ありがとうございます。 >回答本文の繰り返しになってしまいますが、いったんゼロベースで、 >「どーしてもエディタを自作する必要があるかどうか?」を考えたいです。 エディタを作る必要は一切ありません。 ひたすらただ、趣味でこういうのって造ってみたい! と思っただけですので……
guest

0

window.getSelection() あたりを使えばできそうですけど、
条件分岐はかなり面倒になりそうですね。

投稿2016/12/12 13:08

Takamoso

総合スコア248

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

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

nnahito

2016/12/15 13:44

ご回答ありがとうございます。 こちら、選択範囲を返して〜という感じのようですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問