资讯专栏INFORMATION COLUMN

原生JS写一个功能强大的编辑器

luck / 400人阅读

摘要:主要采用了原生与调用结合的功能实现功能。所以根据这种方法,读者可以根据自己的需求添加更多的功能,比如在编辑框里面插入一个可以点击的标签或者添加一个代码块希望能读到此文章的读者,能在下方一起交流,更希望大佬提出错误,谢谢地址

因为一个同学,要做一个能加入图片的留言板功能,类型与QQ空间留言板和百度贴吧发帖的那种形式,同时在网上找了找发生网上对这方面的交流很少,所以发表这篇文章抛砖引玉,希望能帮助广大的学习者,也同时希望大佬能对此文章及本人写的代码,不吝赐教。
主要采用了原生JS与调用Selection API结合html的contentible功能实现功能。

1.先来看看效果

2.主要功能

1.在当前光标位置添加指定图片,并=点击以后修改图片大小
2.修改选中文字的大小,字体颜色及添加斜体、粗体、下划线

3.代码及一些难点部分
首先看一个很很很关键和重要的函数

function getSelectionRange() { 
    var select;
    //兼容处理
    if (window.getSelection) { 
        select = window.getSelection();
           range = select.getRangeAt(0);//获取selection对象,并获取range对象
    } else if (document.selection) { 
        //IE浏览器
        range = document.selection.createRange();//IE可以直接获取
    };
};

这个函数是调用seleciton API并用range保存当前光标位置,方便后面插入图片和给代码修改文字样式

其次另外一个也很关键的函数是

//插入节点
function insert(newNode){
    var fragNode = document.createDocumentFragment().appendChild(newNode);//创建文档碎片并放入新节点
    range.deleteContents();//删除Rnge中的内容
    range.insertNode(fragNode);//再插入新碎片
}

这个函数接收一个新的也就是要插入节点的形参,然后删除当前位置的内容(如果选中的是文字这把当前这选中的文字删除掉)最后把新创建的节点插入到光标的位置。

我们在来看看另外一个难点部分,就是获取选中的文字,,这里我采用的是鼠标的监听事件,mousedown->mousemove->mouseup,分别的监听,来判断是否鼠标发生移动,及得到鼠标选中的文本

//获取选中的字符
edit.addEventListener("click",function(){
    getSelectionRange();//获取Range
});
edit.addEventListener("mousedown",function(){
    edit.addEventListener("mousemove",listenMove);
});
function listenMove(){
    moved=true;
};
edit.addEventListener("mouseup",function(){
    if(!moved){
        return;
    }
    //当有选中内容才进行操作
    edit.removeEventListener("mousemove",listenMove);
    getSelectionRange();
    selectTxt= range.toString();//将选择的内容从对象中提取出来,直接转字符串就行了。
    moved = false;
});

先在mousedown函数里面获取一次range,然后在mouseup的函数里面再次获取range得到选中的文字用selectTxt保存,这里在我看来只要是理清楚思路这里很好理解。
到了这里我们就已经把几个比较困难的问题解决了,剩下的插入文字和图片及改变图片的大小,都是很简单的基本操作。
我以插入图片为例,大家可以拿到代码以后自己理一理插入文字的思路:

//插入图片
var imgSrc="";
aInsertBtn[0].onclick=function(){
    var txt=document.getElementById("txtImg");
    //如果同时存在本地上传图片和网络图片的地址,只插入网络图片
    console.log(txt.value)
    if(txt.value){
        imgSrc=txt.value;
        txt.value=" ";
    }
    addImg(imgSrc);
    insertImg.style.display="none";
}
function fileChange(){
    var val=this.value.toLowerCase().split(".");
    if(val){
        if(val[1]=="gif"||val[1]=="png"||val[1]=="jpg"||val[1]=="jpeg"){
            var reader = new FileReader();
                reader.onload = function (e) {
                imgSrc = e.target.result;                
            }
            reader.readAsDataURL(this.files[0]);
        }else{
            alert("目前支持gif,png,jpg,jpeg格式的图片!")
        }
    }
}
function addImg(src){
    var newImg=new Image();
    newImg.className="insertNewImg";
    newImg.src=src;
    insert(newImg);
}

这里需特别的说明一下,如果是插入的是本地图片,由于浏览器为了安全限制file.value并不是图片的真实地址,换句话说img.src=file.value是得不到图片的,所以这里我们需要借用FileReader对象来得到真实的图片地址,当然这里网络的图片地址肯定是可以直接用的,然后将的到的src地址传入addImg函数生成img节点以后插入当前光标指向的文本位置。
所以添加文本样式也是一样的方法,无非就是在创建完文本节点以后给他添加style样式。

所以根据这种方法,读者可以根据自己的需求添加更多的功能,比如:在编辑框里面插入一个可以点击的a标签或者添加一个代码块.....

希望能读到此文章的读者,能在下方一起交流,更希望大佬提出错误,谢谢!!!
GitHub地址:https://github.com/LiChangyi/...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89194.html

相关文章

  • 原生JS一个功能强大辑器

    摘要:主要采用了原生与调用结合的功能实现功能。所以根据这种方法,读者可以根据自己的需求添加更多的功能,比如在编辑框里面插入一个可以点击的标签或者添加一个代码块希望能读到此文章的读者,能在下方一起交流,更希望大佬提出错误,谢谢地址 因为一个同学,要做一个能加入图片的留言板功能,类型与QQ空间留言板和百度贴吧发帖的那种形式,同时在网上找了找发生网上对这方面的交流很少,所以发表这篇文章抛砖引玉,希...

    王晗 评论0 收藏0
  • 如何使用前端技术开发一个桌面跨端应用

    摘要:使用实现桌面应用实现离线可用很多方法,比如使用技术。还有一个好处,因为它完全基于来实现可以使用的一些新功能,那我们理论上可以在做桌面应用时顺手把应用也做了。 本文将会讲述一个完整的跨端桌面应用 代码画板 的构建,会涉及到整个软件开发流程,从开始的设计、编码、到最后产品成型、包装等。 本文不仅仅是一篇技术方面的专业文章,更会有很多产品方面的设计思想和将技术转换成生产力的思考,我将结合我自...

    shixinzhang 评论0 收藏0
  • 原生js一个"多动症"简历

    摘要:用原生写一个多动症的简历预览地址源码地址最近在知乎上看到方应杭用写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生来实现。 用原生js写一个多动症的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现。 showImg(https://segmentfault.com/img/remot...

    Y3G 评论0 收藏0

发表评论

0条评论

luck

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<