ユーザー選択（js）からスパンを作成する方法

テキストエディタを作成したいと思います。これは、すべてのテキストエディタ（これは私が今使用しているものを含む）を操作する方法で動作するはずなので、ユーザはテキストを選択したり、ボタンなどを押したりして、何らかの機能が実行されます。私のエディタは次のように動作します： 1.ユーザはを選択します。2.選択されたテキストの周りにスパンを作る機能が選択された（）がトリガされます。 3.ユーザーが「B」や「I」などのボタンをクリックすると、スパン要素のスタイルを変更する関数が呼び出されます。今のところ私はユーザー選択から文字列を取得する方法を考え出しました。あなたはスパンを使用することを決定した場合には、このようなものを使用する必要がありますので、ユーザー選択（js）からスパンを作成する方法

<body> 
     <textarea onselect="selected()">Some text here, more text here.</textarea> 
    </body> 
    <script> 
     function selected() { 
var preselection = window.getSelection(); 
    selection = preselection.toString(); 
    console.log(selection); 
} 
    </script>

出典

2017-07-06 SHC MostWanted

あなたが作成しようとしているどのようなスパン？あなたが入力したもののプレビューを入れるスパン？ – Araymer

スパンはテキストボックス内に入りますか？ – Amy

シンプルなイメージを共有して、どんな結果が期待できるかを説明しましたか？だから私たちはあなたを助けることができます！ –

テキストエリアには、スパンを含めることはできません。

<p contenteditable="true" ...

あなたはおそらく、すべての時間Aあなたの機能を起動する必要はありませんユーザーが選択します。

document.getSelection().toString()

今すぐHTMLに<スパン>オブジェクトを追加：代わりに、同じようなものを使用して、任意の場合は、選択したテキストを拾うその後、ユーザーは（太字ボタンのように）ボタンを押した場合、関数を実行し、要素は非常に簡単ですが、ここでの大きな課題は、選択が他のスパンオブジェクトをまたぐかどうかがわからないということです（ユーザーがすでにいくつかの書式を追加した場合など）。 stackoverflowは、編集エリアに**のような文字を挿入し、次にをに1回通して<のように強い文字を>に追加します。これはテキスト領域でも可能ですので、contenteditable = "true"は必要ありません。

選択した内容を分析し、関連するすべての要素を収集し、必要に応じて書き換えることができます。選択に関連するすべての親オブジェクトを取得してから、<スパン>要素を各親オブジェクト内のテキストの周りに追加する必要があります。

これを簡素化するために、あなたがタグの唯一のレベルは、あなたの編集可能領域で許可されているルールを作るかもしれない、との結果が唯一のスパンの1つのレベルであろうように、常にそのために再書き込み：

<span class="bold">This whole sentence is italic and </span><span class="italic_bold">this half is also bold.</span> with no nesting of these span tags.
を
ネスティングを扱うに役立つかもしれないこれらのプロパティを調査：https://developer.mozilla.org/en-US/docs/Web/API/Selection

は、これらの文字列コマンドも役立つかもしれない： https://www.w3schools.com/jsref/jsref_obj_string.asp

出典

2017-07-06 20:10:53 TheCodePig

ありがとう、答えは本当に詳細でポイントです。これは私のような初心者のためにはあまりにも多くのように思えるので、もう少し学ぶときに私はおそらくこのチャレンジに1〜2ヵ月後に戻ります。 –

ユーザー選択（js）からスパンを作成する方法

答えて

関連する問題