質問編集履歴
5
誤字修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
ブラウザベースでのWYSIWYGエディタをJavaScript で開発中です。オープンソースのWYSIWYGエディタも試してみましたが、DBやS3へのデータ格納の為の改造が必要であまり省力化にならないため、自作で機能を絞って実装する方向に舵を切っています。
|
|
4
4
|
|
|
5
|
-
以下の操作でリンク挿入できる機能を
|
|
5
|
+
以下の操作でリンク挿入できる機能を開発しています。
|
|
6
6
|
1. contenteditableのエディタ領域上でリンクで囲みたい文字列を選択
|
|
7
7
|
2. エディタ領域外に配置したリンク挿入ボタンをクリック
|
|
8
8
|
3. モーダルがポップアップし、URL入力フィールドにURLを入力し、挿入ボタンをクリック
|
4
質問テンプレートを適用しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
### 前提・実現したいこと
|
|
2
|
+
|
|
1
3
|
ブラウザベースでのWYSIWYGエディタをJavaScript で開発中です。オープンソースのWYSIWYGエディタも試してみましたが、DBやS3へのデータ格納の為の改造が必要であまり省力化にならないため、自作で機能を絞って実装する方向に舵を切っています。
|
|
2
4
|
|
|
3
5
|
以下の操作でリンク挿入できる機能を実装しました。
|
|
@@ -6,16 +8,18 @@
|
|
|
6
8
|
3. モーダルがポップアップし、URL入力フィールドにURLを入力し、挿入ボタンをクリック
|
|
7
9
|
4. contenteditableのエディタ領域上の囲んだ文字列がリンクで囲まれた状態になる
|
|
8
10
|
|
|
11
|
+
### 発生している問題・エラーメッセージ
|
|
9
|
-
困っているのは、3でURLを入力するとgetSelentionで選択されているのがモーダルになってしまい、4でのリンク挿入が行われません。
|
|
12
|
+
困っているのは、3でURLを入力するとgetSelentionで選択されているのがモーダルになってしまい、4でのリンク挿入が行われません。その後もう一度リンク挿入ボタンをクリックして、モーダルのURLを変更せずに挿入ボタンをクリックすると、リンクの挿入はうまくいきます。
|
|
10
13
|
|
|
11
14
|
このため2の操作で選択範囲自体を保存し、4の操作の前に再度同じ範囲が選択された状態にしてから、リンクで囲むようにしたいと思っています。
|
|
12
|
-
|
|
13
15
|
このような実装を行いたい場合、どのメソッドなどを使えばよいかご教示いただけますか？
|
|
14
16
|
調べてはみたのですが、当てはまるようなサンプルが見当たらず困っております。
|
|
15
17
|
もちろん、上記手順での操作が可能であれば、別のアプローチでのアドバイスも頂けると大変ありがたいです。
|
|
16
18
|
|
|
17
|
-
該当
|
|
19
|
+
### 該当のソースコード
|
|
20
|
+
3で挿入ボタンをクリックすると呼ばれる処理が以下になります。
|
|
18
21
|
```javascript
|
|
22
|
+
function add_link(){
|
|
19
23
|
var link_url = document.getElementById('textarea_link_url').value;
|
|
20
24
|
|
|
21
25
|
var sel = window.getSelection();
|
|
@@ -24,8 +28,13 @@
|
|
|
24
28
|
newNode.href=link_url;
|
|
25
29
|
var dom=range.cloneContents();
|
|
26
30
|
newNode.appendChild(dom);
|
|
27
|
-
range.deleteContents();
|
|
31
|
+
range.deleteContents();
|
|
28
32
|
range.insertNode(newNode);
|
|
29
33
|
|
|
30
34
|
sel.removeAllRanges();
|
|
35
|
+
}
|
|
31
36
|
```
|
|
37
|
+
|
|
38
|
+
### 試したこと
|
|
39
|
+
getSelectionの返り値を格納するselや、getRangeAt(0)の返り値を格納するrangeについては、別のグローバル変数に格納して試してみましたが、モーダル上でURLを入力すると別の変数になっているはずが、その変数側もモーダル自体が選択された状態に中身が変わってしまいました。
|
|
40
|
+
|
3
該当箇所のソースを追加しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -13,3 +13,19 @@
|
|
|
13
13
|
このような実装を行いたい場合、どのメソッドなどを使えばよいかご教示いただけますか？
|
|
14
14
|
調べてはみたのですが、当てはまるようなサンプルが見当たらず困っております。
|
|
15
15
|
もちろん、上記手順での操作が可能であれば、別のアプローチでのアドバイスも頂けると大変ありがたいです。
|
|
16
|
+
|
|
17
|
+
該当箇所のソースを以下に添付します。
|
|
18
|
+
```javascript
|
|
19
|
+
var link_url = document.getElementById('textarea_link_url').value;
|
|
20
|
+
|
|
21
|
+
var sel = window.getSelection();
|
|
22
|
+
var range = sel.getRangeAt(0);
|
|
23
|
+
var newNode = document.createElement('a');
|
|
24
|
+
newNode.href=link_url;
|
|
25
|
+
var dom=range.cloneContents();
|
|
26
|
+
newNode.appendChild(dom);
|
|
27
|
+
range.deleteContents(); // 範囲選択箇所を一旦削除
|
|
28
|
+
range.insertNode(newNode);
|
|
29
|
+
|
|
30
|
+
sel.removeAllRanges();
|
|
31
|
+
```
|
2
誤字修正しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
ブラウザベースでのWYSIWYGエディタをJavaScript で開発中です。オープンソースのWYSIWYGエディタも試してみましたが、DBやS3へのデータ格納の為の改造が必要であまり省力化にな
|
|
1
|
+
ブラウザベースでのWYSIWYGエディタをJavaScript で開発中です。オープンソースのWYSIWYGエディタも試してみましたが、DBやS3へのデータ格納の為の改造が必要であまり省力化にならないため、自作で機能を絞って実装する方向に舵を切っています。
|
|
2
2
|
|
|
3
3
|
以下の操作でリンク挿入できる機能を実装しました。
|
|
4
4
|
1. contenteditableのエディタ領域上でリンクで囲みたい文字列を選択
|
1
初心者アイコンを追加しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
ブラウザベースでのWYSIWYGエディタをJavaScript で開発中です。オープンソースのWYSIWYGエディタも試してみましたが、DBやS3へのデータ格納の為の改造が必要になるため、自作で機能を絞って実装する方向に舵を切っています。
|
|
1
|
+
ブラウザベースでのWYSIWYGエディタをJavaScript で開発中です。オープンソースのWYSIWYGエディタも試してみましたが、DBやS3へのデータ格納の為の改造が必要であまり省力化になるため、自作で機能を絞って実装する方向に舵を切っています。
|
|
2
2
|
|
|
3
3
|
以下の操作でリンク挿入できる機能を実装しました。
|
|
4
4
|
1. contenteditableのエディタ領域上でリンクで囲みたい文字列を選択
|