//显示图片
function showImage(div_id,img_src) {
//IE support
if (document.selection) {
var myField = document.getElementById(div_id); //对象
var myValue = '<img src = "'+img_src+'"/>'; //值
myField.focus();
var sel = document.selection.createRange();
sel.pasteHTML(myValue);
}else {
var sel = div_range;
if(sel == null || sel == 'undefined'){
myfocus(div_id);
sel = document.getSelection().getRangeAt(0);
}
var img = document.createElement("img");
img.src = img_src;
sel.insertNode(img);
}
}
var div_range;
function divOnmouseout(){
var sel = document.getSelection();
if(sel){//ff,ch
div_range = sel.getRangeAt(0);
}
//获取焦点
function myfocus(obj) {
if (typeof obj == 'string') obj = document.getElementById(obj);
obj.focus();
if (obj.createTextRange) {//ie
var rtextRange = obj.createTextRange();
if(obj.value == null || obj.value == '') return;
rtextRange.moveStart('character', obj.value.length);
rtextRange.collapse(true);
rtextRange.select();
}else if (obj.selectionStart){//chrome "<input>"、"<textarea>"
obj.selectionStart = obj.value.length;
}else if(window.getSelection){
var sel = window.getSelection();
var tempRange = document.createRange();
if(obj.firstChild == null || obj.firstChild == '') return;
tempRange.setStart(obj.firstChild, obj.firstChild.length);
sel.removeAllRanges();
sel.addRange(tempRange);
}
}
}
分享到:
相关推荐
基本上编辑器或者在线聊天web页面,是不太可能用textarea在做输入框的,因为我们可能要插入图片或者超级链接,因此选择在iframe或者div作为输入框是必须的。 我这里用的是 div. 要使div可编辑 必须 加入 ...
这个好说… 但是清空完了内容,光标居然跑到了最前面,这就很头疼了。 在经过各种搜索之后,找到了解决办法,不多说,上代码! var _div = document.querySelector('.discuss_area'); var range = document....
它的一个独特功能是在编辑器失去焦点后,用户仍能在之前的位置插入图片,这在很多编辑器中并不常见。那么,它是如何实现这一功能的呢?本文将深入探讨其背后的实现机制。 首先,我们需要了解在JavaScript中处理文本...
在本场景中,我们讨论的是如何使用JavaScript动态地在图片上生成矩形热区,并在热区上添加蒙版效果。热区(Area)是HTML `<map>` 元素的一部分,允许我们在图像上定义可点击的交互区域。 1. **HTML `<img>` 和 `...
caret 位置是指光标当前所在的位置,通过获取 caret 位置,可以确定插入表情符号的正确位置。 electron+vue 实现 div contenteditable 截图功能还需要使用到 Bootstrap 框架来美化用户界面。Bootstrap 是一个流行的...
3. **动态光标位置**:为了确保表情插入后光标仍然在正确的位置,需要使用一些JavaScript技巧来获取和设置光标位置,这通常涉及`selectionStart`和`selectionEnd`属性。 4. **jQuery插件化**:如果代码结构良好,...
2. **丰富的编辑工具栏**:内置多种编辑工具,如字体大小、颜色、对齐方式、插入图片、视频、超链接等,满足多样化的内容创作需求。 3. **Markdown支持**:除了常见的WYSIWYG(所见即所得)编辑模式,还支持Markdown...
5. **插入表情**:在JavaScript中,插入表情到文本中的方法是获取输入框的当前选区,然后替换选区内容为表情图片标签。如果用户没有选区,表情则会在光标位置插入。这需要对DOM操作有深入理解,如`range`对象和`...
这意味着开发者可以实现富文本编辑器的基本功能,例如插入图片。通过配合JavaScript,我们甚至可以添加更多高级编辑功能,如格式化工具栏、插入链接、创建列表、改变文字样式等。 在实现高度自适应方面,...
11.12 获取当前页面的URL并添加样式 11.13 向表格追加一行数据 11.14 获取客户端IP 11.15 向Firebug的控制面板发送消息 11.16 根据不同的屏幕大小显示不同的网页 11.17 jQuery遍历对象的属性 11.18 最优化的循环语句...
在本示例中,如果按下回车键(keyCode为13),则会在当前光标位置插入换行符,并将光标移动到下一行的起始位置。 然后,将这个函数绑定到iframe的onkeypress事件中,从而在用户输入时触发相应的逻辑。 2. 拖拽图片...
- **丰富的编辑功能**:包括字体设置、字号调整、颜色选择、段落对齐、列表、插入图片、超链接、表格、代码高亮等。 - **实时预览**:编辑内容时可实时预览效果,提高编辑效率。 - **多语言支持**:支持中文、...
这可能涉及到对输入框内容的处理,例如使用`val()`获取和设置值,或者使用`insertAtCaret()`方法在光标位置插入文本。 5. **动画效果**:为了提高用户体验,可以添加一些动画效果,如淡入淡出、滑动等。jQuery提供了...
5. **插入表情**:在事件处理函数内部,获取被点击的表情的值,并将其插入到`textarea`的光标位置。这需要利用jQuery的`val()`方法和`caret()`插件(用于获取和设置光标位置)。 6. **动态更新textarea内容**:由于...
4. **插入表情**:当用户点击表情后,需要将其插入到当前光标所在的位置,这通常涉及到对输入框的 DOM 操作。 ```javascript function insertEmoticon(emoticon) { var input = $('textarea'); // 假设表情插入...
0274 重定义去掉标题栏并最大化窗体 179 0275 使窗体一直居中 179 0276 控制窗体不可移动 180 0277 限制窗体的最大化 180 0278 使窗体自动居中 181 8.5 窗体的特殊形状 181 0279 实现窗体颜色渐变 181...
然而,具体的关闭实现代码没有在这段文本中给出,通常会使用JavaScript的`getElementById`函数获取到Div元素,然后改变它的`display`属性来控制其可见性。 以上五个代码片段都是Dreamweaver设计过程中可能会用到的...
0274 重定义去掉标题栏并最大化窗体 179 0275 使窗体一直居中 179 0276 控制窗体不可移动 180 0277 限制窗体的最大化 180 0278 使窗体自动居中 181 8.5 窗体的特殊形状 181 0279 实现窗体颜色渐变 181...