В этой статье описывается метод реализации JS для вставки контента в указанное место в редактируемом Div. Так же, как редактор, который мы используем, мы делимся им с вами для вашей ссылки. Конкретный метод реализации следующим образом:
Во -первых, пусть Div включит режим редактирования
Скопируйте код кода следующим образом: <div Coteededitable = true id = "divtest"> </div>
Включите режим редактирования Div, установив CoteedEdable = true. Таким образом, Div может вводить контент, как текстовое поле.
Нет больше разговорчиво. Вот как получить или установить позицию курсора.
2 шага:
① Получите позицию курсора в Div
② Измените позицию курсора
Скопируйте код следующим образом: var cursor = 0; // положение курсора
Document.OnseletectionChange = function () {
var range = document.selection.createrange ();
var srcele = range.parentelement (); // Получить текущий элемент
var copy = document.body.createTexTrange ();
copy.movetoelementText (srcele);
для (cursor = 0; copy.compareendpoints ("starttostart", range) <0; cursor ++) {
copy.movestart («символ», 1); // Измените позицию курсора, на самом деле мы записываем количество курсоров.
}
}
Свяжите событие изменения курсора с документом. Используется для записи позиции курсора.
Таким образом, вы можете получить позицию курсора Div.
Скопируйте код следующим образом: функция Moveend (obj) {
lytxt1.focus ();
var r = document.selection.createrange ();
// Поскольку здесь он начинает двигаться от текущего курсора (кажется, что текстовое поле начинается с 0.), нам нужно получить текущую позицию курсора, а затем вычислить, сколько битов для перемещения, чтобы курсор мог быть перенесен в желаемое положение.
R.movestart ('символ', lytxt1.innertext.length - cursor);
R.collapse (True);
r.select ();
}
Через вышесказанное мы можем переместить курсор в Div до конца
Полный пример
Скопируйте код следующим образом: <button type = "button" onclick = "document.getElementByid ('test'). Focus (); inserThtmlatCaret ('<b> вставлен </b>');"> вставьте символ </button>
<div DoteedEdable = "true" style = "Высота: 50px; граница: 2px твердый красный;" id = "test"> </div>
функция inserthtmlatcaret (html) {
var sel, range;
if (window.getSelection) {
// IE9 и не
sel = window.getSelection ();
if (sel.getrangeat && sel.rangecount) {
range = sel.getrangeat (0);
range.deleteContents ();
// range.createContextualFragment () был бы полезен здесь, но это
// нестандартный и не поддерживаемый во всех браузерах (т.е.
var el = document.createElement ("div");
el.innerhtml = html;
var fragment = document.createdocumentfragment (), node, lastnode;
while ((node = el.firstchild)) {
LastNode = fragment.AppendChild (узел);
}
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") {
// т.е. <9
document.selection.createrange (). pastehtml (html);
}
}
Другой пример, основанный на jQuery
Скопируйте код следующим образом: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<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> довольной </title>
<style>
*{
Полевая: 0; прокладка: 0;
}
.im-message-area {
Ширина: 98%;
Заполнение: 2px;
Высота: 75px;
Граница:#000 твердые 1PX;
Фон: #fff;
Шрифт: 12px/20px arial, "5b8b4f53";
Word-wrap: слов-слова;
Overflow-y: Auto;
высота линии: 1;
}
.ul {display: none;}
.ul li {
фоновый цвет: #CCC;
Ширина: 50px;
}
</style>
<script language = "javascript" type = "text/javascript">
функция inimage (text) {
var obj = $ (". im-message-area") [0];
var range, node;
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 (узел);
if (c) {
range.setendafter (c);
range.setStartafter (c)
}
var J = window.getSelection ();
J.Removeallranges ();
J.Addrange (Range);
} else if (document.selection && document.selection.createrange) {
document.selection.createrange (). pastehtml (text);
}
}
$ (document) .ready (function () {
$ ('#кнопка'). Click (function () {
$ ('. Ul'). Show ();
})
$ ('. ul li'). каждый (function () {
$ (this) .click (function () {
inimage ($ (this) .text ());
})
})
});
</script>
</head>
<тело>
<div Coteededitable = "true" id = "im_message_area"> <br> </div>
<a href = "javascript: void (0)" id = "кнопка"> кнопка </a>
<ul>
<li> (смеется) </li>
<li> (крик) </li>
<li> (安) </li>
</ul>
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.