替换textarea的文本编辑框的实现，可现实文字输入与显示图片、表情

最新推荐文章于 2024-04-11 20:38:50 发布

原创最新推荐文章于 2024-04-11 20:38:50 发布 · 1.1w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#iframe添加表情

原创专栏收录该内容

7 篇文章

订阅专栏

本文介绍了三种方法实现textarea的文本编辑增强，包括在textarea内添加img元素（IE支持）、利用contentEditable属性（跨平台但手机浏览器不支持）以及使用iframe的designMode属性（兼容pc和手机）。通过execCommand插入表情并获取带标签的内容。

方法1：

通过textare添加子元素img，该方式只有IE支持

<textarea id="editor" >图片：</textarea> 

<script type="text/javascript" > 
var editor = document.getElementById('editor'); 
var img = document.createElement('img'); 
img.src = 'url'; 
editor.appendChild(img); 

</script>

然后通过editor.innerHTML获取带标签的内容

方法2：

通过div的contentEditable=true属性，经测试谷歌火狐 IE opera都支持，但手机浏览器不支持

<div contentEditable="true" id="editor"  style="height:70px;border-style:solid; border-width:1px; border-color:#AEEEEE"></div>
<script type="text/javascript" > 
var editor = document.getElementById('editor'); 
var img = document.createElement('img'); 
img.src = 'url'; 
editor.appendChild(img); 

</script>

然后通过editor.innerHTML获取带标签的内容

方法3：

通过设置iframe的document.designMode为On可以让其可编辑，一般用在富文本编辑器组件中。pc端手机端均可。

<iframe frameborder="1" id="editor" src="javascript:;" style="width:100%;">
<script type="text/javascript" > 
$(document).ready(function(){
document.getElementById("editor").contentWindow.document.designMode="On";
})

var editor = document.getElementById('editor');
editor.contentWindow.focus();
editor.contentWindow.document.execCommand("insertHTML", false, "<img src='"+Url+"'></img>");
editor.contentWindow.document.getSelection().collapse();
</script>

execCommand会在当前光标处插入表情，插入之前调用focus，之后再调用collapse会紧接在表情后面获得焦点

通过document.getElementById('editor').contentWindow.document.body.innerHTML获取文本内容

-----------------------------------------------------------------------------------------------

RegExp构造函数第一个参数为正则表达式的文本内容,而第一个参数则为可选项标志.标志可以组合使用
•g （全文查找）
•i （忽略大小写）
•m （多行查找）