JavaScript または JQuery を使用して独自の RTE を構築する必要があります。しかし、実際には、コメント付きの優れた実用的な例やチュートリアルを単一のコードだけで見つけることができませんでした。しかし、私は解決策だけが欲しいのではなく、自分が何をしているのかを理解したいのです!
選択したテキストを太字にする方法を知っています (選択範囲を取得し、範囲を作成してから、その周りに font-weight:bold を含む b-tag または span-tag を付けます)。
しかし、選択範囲のすべてのスタイルを取得するにはどうすればよいでしょうか?
例: テキスト テキスト テキスト [//] テキスト テキスト テキスト ( [//] は画像である必要があります) ユーザーが画像を含むテキストを選択すると、選択された HTML コードは「テキスト テキスト テキスト テキスト テキスト テキスト テキスト」のようになります。選択した範囲をタグで簡単に囲むことができませんでした。
その他の例: aaa bbb ccc ddd 'cc d' を選択すると、次のように 'cc' が表示されます。しかし、(例: bold-) ボタンを強調表示するには、選択範囲のすべてのスタイルを知っている必要があります。
要約すると、選択のスタイルの処理 (取得) / 設定方法を知る必要があります。
私を助けてくれることを願っています!よろしくレニー
ここに私が実際に持っているいくつかのコードがあります(しかし、このコードはとにかく私の問題を解決しません)
function getSelectedNodes_txt(){
var sel = window.getSelection();
try{var frag=sel.getRangeAt(0).cloneContents()}catch(e){return(false);}
var tempspan = document.createElement("span");
tempspan.appendChild(frag);
console.log(tempspan);
window.selnodes = tempspan.childNodes;
var output = ''
for(var i=0, u=selnodes.length;i<u;i++){
if (typeof selnodes[i].tagName !== 'undefined'){
output += "A "+selnodes[i].tagName+" was found";
output += " - Containing: "+selnodes[i].textContent+"\n";
}else{
output += "Some text was found: '"+selnodes[i].textContent+"'";
output += " - Parent: '"+selnodes[i].parentNode.tagName+"'\n";
}
//do something cool with each element here...
}
return(output)
}