この記事では、編集可能なdivに指定された場所にコンテンツを挿入するJSを実装する方法について説明します。私たちが使用する編集者と同じように、私たちはあなたの参照のためにあなたとそれを共有します。特定の実装方法は次のとおりです。
まず、編集モードを有効にします
コードコードを次のようにコピーします
contentedable = trueを設定して、divの編集モードをオンにします。このようにして、divはテキストボックスのようなコンテンツを入力できます。
これ以上おしゃべりはありません。カーソル位置を取得または設定する方法は次のとおりです。
2つのステップ：
divでカーソル位置を取得します
cursorカーソル位置を変更します
次のようにコードをコピーします：var cursor = 0; //カーソル位置
document.onselectionChange = function（）{
var range = document.selection.createrange（）;
var srcele = range.parentelement（）; //現在の要素を取得します
var copy = document.body.createTextrange（）;
copy.MovetoElementText（srcele）;
for（cursor = 0; copy.compareendpoints（ "starttostart"、range）<0; cursor ++）{
copy.movestart（ "Character"、1）; //カーソル位置を変更します。実際、カーソルの数を記録しています。
}
}
カーソル変更イベントをドキュメントにバインドします。カーソルの位置を記録するために使用されます。
これにより、Divのカーソル位置を取得できます。
次のようにコードをコピーします：function moveend（obj）{
lytxt1.focus（）;
var r = document.selection.createrange（）;
//ここでは、現在のカーソルから移動し始めるため（テキストボックスは0から始まるようです）、現在のカーソル位置を取得し、移動するビット数を計算して、カーソルを目的の位置に移動できるようにする必要があります。
R.Movestart（ 'Character'、lytxt1.innertext.length -cursor）;
R.Collapse（True）;
R.Select（）;
}
上記を通して、divのカーソルを最後まで移動できます
完全な例
コードを次のようにコピーします。<ボタンタイプ= "ボタン" onclick = "document.getElementById（ 'test'）。focus（）; inserthtmlatcaret（ '<b>挿入</b>'）;">文字</button>を挿入します
<div contentedable = "true" style = "height：50px; border：2px solid red;" id = "test"> </div>
関数inserthtmlatcaret（html）{
var Sel、範囲;
if（window.getSelection）{
// IE9および非IE
sel = window.getSelection（）;
if（sel.getRangeat && sel.rangecount）{
range = sel.getRangeat（0）;
range.deleteContents（）;
// range.createcontextualfragment（）はここで役立ちますが、そうです
//標準以外で、すべてのブラウザでサポートされていません（IE9、1つ）
var el = document.createelement（ "div"）;
el.innerhtml = html;
var fragment = document.createdocumentfragment（）、node、lastnode;
while（（node = el.firstchild））{
lastnode = fragment.appendChild（node）;
}
range.insertnode（frag）;
//選択を保存します
if（lastnode）{
range = range.clonerange（）;
range.setstartafter（lastnode）;
range.collapse（true）;
SEL.REMOVEALLRANGES（）;
sel.addrange（範囲）;
}
}
} else if（document.selection && document.selection.type！= "control"）{
// IE <9
document.selection.createrange（）。pastehtml（html）;
}
}
jQueryに基づく別の例
次のようにコードをコピーします。
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta content = "text/html; charset = utf-8" http-equiv = "content-type">
<Script Type = "Text/JavaScript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<title> contentedable </title>
<style>
*{
マージン：0;パディング：0;
}
.im-message-area {
幅：98％;
パディング：2px;
高さ：75px;
国境：＃000ソリッド1px;
背景：#fff;
フォント：12px/20px arial、 "5b8b4f53";
ワードラップ：ブレークワード;
Overflow-y：auto;
Line-Height：1;
}
.ul {展示：なし;}
.ul li {
バックグラウンドカラー：#ccc;
幅：50px;
}
</style>
<スクリプト言語= "javascript" type = "text/javascript">
関数inimage（テキスト）{
var obj = $（ "。im-message-area"）[0];
var range、ノード;
if（！obj.hasfocus）{
obj.focus（）;
}
if（window.getSelection && window.getSelection（）。getRangeat）{
range = window.getSelection（）。getRangeat（0）;
range.collapse（false）;
node = range.createcontextualfragment（text）;
var c = node.lastchild;
range.insertnode（node）;
if（c）{
range.setEndafter（c）;
range.setstartafter（c）
}
var j = window.getSelection（）;
J.RemoveAllranges（）;
J.Addrange（範囲）;
} else if（document.selection && document.selection.createrange）{
document.selection.createrange（）。pastehtml（text）;
}
}
$（document）.ready（function（）{
$（ '＃button'）。クリック（function（）{
$（'。ul '）。show（）;
}）
$（'。ulli '）。各（function（）{
$（this）.click（function（）{
Inimage（$（this）.text（））;
}）
}）
}）;
</script>
</head>
<body>
<div contentedable = "true" id = "im_message_area"> <br> </div>
<a href = "javascript：void（0）" id = "button"> button </a>
<ul>
<li>（笑）</li>
<li>（cry）</li>
<li>（安）</li>
</ul>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。