html5中contenteditable属性如果过滤标签,过滤富文本样式

更新日期: 2018-01-22阅读: 6k标签: 富文本

​在div中使用contenteditable=”true”可以达到模拟输入框的效果,但是当我们复制其他网页内容进去的时候,会发现连带的样式也一起复制进去了。很明显我们不需要复制富文本样式,那么如何过滤这些标签呢?


查阅资料,发现如果只保证支持html5的webkit内核浏览器,目前有一些方法如下:

方法一:

<div contenteditable="plaintext-only" id="content"></div>

方法二:基于css

user-modify: read-write-plaintext-only;   
-webkit-user-modify: read-write-plaintext-only


如果在非 webkit 的内核,我们需要考虑使用js来实现,首先想到的是:

var d= document.getElementById( "content" );
document.addEventListener( "keydown", function() {
    d.innerHTML = d.innerHTML.replace( /<[^>]*>/g, "" );
});

发现效果同上面大体一样,这样虽然能过滤样式,但是有很多问题,比如光标始终在首位、输入框不能插入表情、换行符失效等问题。 上网查了一下别人是怎么做的发现可以通过修改复制事件来过滤样式:

function pasteFilter(e){
    e.preventDefault();
    var text = null;
    //得到剪贴板中的文本
    if(window.clipboardData && clipboardData.setData) {
        // IE
        text = window.clipboardData.getData('text');
    }else{
    	try{
    		text = (e.originalEvent || e).clipboardData.getData('text/plain');
    	}catch(e){
    		return;
    	}
    };
    if (document.body.createTextRange) {    
        if (document.selection) {
            textRange = document.selection.createRange();
        } else if (window.getSelection) {
            sel = window.getSelection();
            var range = sel.getRangeAt(0);
            // 创建临时元素,使得TextRange可以移动到正确的位置
            var tempEl = document.createElement("span");
            tempEl.innerHTML = "&#FEFF;";
            range.deleteContents();
            range.insertNode(tempEl);
            textRange = document.body.createTextRange();
            textRange.moveToElementText(tempEl);
            tempEl.parentNode.removeChild(tempEl);
        };
        textRange.text = text;
        textRange.collapse(false);
        textRange.select();
    } else {
        // Chrome之类浏览器
        document.execCommand("insertText", false, text);
    };
};
var d= document.getElementById( "content" );
d.addEventListener("keydown",function(e){
	if (e.ctrlKey || e.metaKey) {
		if(e.keyCode==117){
			pasteFilter(e);
		}
	}
},false);



链接: https://fly63.com/article/detial/381

pell.js_不到200行Js代码如何实现富文本编辑器

前段时间在寻找一些关于富文本编辑器的资料,然后发现了这个名为 Pell 的项目,它是一个所见即所得(WYSIWYG)的文本编辑器,虽然它的功能很简单,但是令人吃惊的是它只有 1kb 大小。

在Vue2.0中集成UEditor 富文本编辑器

在vue的’项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多对图片上传和视频上传的支持并不是很好,最终还是决定使用UEditor。

angular富文本编辑器tinymce-angular

快速使用富文本,上手很迅速.tinymce-angular把tinymce分装成angular的一个组件,安装引入后,添加一个editor标签就能使用,如下安装与引入

Monaco Editor编辑器的使用

vscode是我们经常在用的编辑器,它的前身是微软的一个叫Monaco Workbench的项目,而Monaco Editor就是从这个项目中成长出来的一个web编辑器,他们很大一部分的代码都是共用的

quill 定制富文本编辑器

很多时候 <textarea> 并不能满足我们对文本输入的需求,当我们需要为输入的文本添加格式时,我们需要使用像 quill 这样的富文本编辑器来完成富文本的输入。

编写一个非常简单的 JavaScript 编辑器

当然,我们已经有可以使用的很好的Web编辑器:你只需下载,并插入页面即可。我以前习惯于使用CodeMirror和ACE。例如,我为CodeMirror写了一个插件来支持PlantUML。然而,这些编辑器有一个问题:它们难以扩展和难以理解。

web前端常用的富文本编辑器插件

富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能,方便那些不太懂HTML用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一样长。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!