html在线排版编辑工具,html+css+js开发文本编辑器，有各种排版功能！

最新推荐文章于 2025-07-10 09:15:27 发布

Kalimnos

最新推荐文章于 2025-07-10 09:15:27 发布

阅读量1.4k

点赞数

文章标签： html在线排版编辑工具

本文介绍了一款富文本编辑器的功能实现原理，包括如何通过点击按钮向文本框添加图片标签、超链接标签等，同时提供了相关的JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当点击上面的按钮，例如添加图片，就会直接向textarea文本框添加一段预设的图片标签。如果添加超链接，就会向文本框添加超链接标签，我们只需要把超链接和链接文字填上去即可。

bVRpih?w=828&h=285

Hello World

.a{background: url(images/a.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}

.p{background: url(images/p.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}

.left{background: url(images/left.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}

.center{background: url(images/center.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}

.right{background: url(images/right.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}

.b{background: url(images/b.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}

.images{background: url(images/images.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}

.video{background: url(images/video.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}

.font14{background: url(images/14.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}

.font15{background: url(images/15.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}

.font16{background: url(images/16.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}

.red{background: url(images/red.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}

.blue{background: url(images/blue.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}

.br{background: url(images/br.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}

.a:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}

.p:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}

.left:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}

.center:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}

.right:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}

.b:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}

.images:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}

.video:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}

.font14:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}

.font15:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}

.font16:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}

.red:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}

.blue:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}

.br:hover{box-shadow: 0px 0px 3px #ddd; cursor: pointer;border-radius: 3px;}

#txt{outline: none;resize:none;border:1px solid #c2c2c2;}

var txt = document.getElementById("txt");

txt.value = "";

function a(value){

var temp = txt.value;

txt.focus();

var pointIndex = txt.selectionStart;

var str1 = temp.substr(0,pointIndex);

var str2 = temp.substr(pointIndex,temp.length);

txt.value = str1+""+str2;

var newIndex = pointIndex+34;

txt.setSelectionRange(newIndex,newIndex);

};

function p(value){

var temp = txt.value;

txt.focus();

var pointIndex = txt.selectionStart;

var str1 = temp.substr(0,pointIndex);

var str2 = temp.substr(pointIndex,temp.length);

txt.value = str1+"

var newIndex = pointIndex+3;

txt.setSelectionRange(newIndex,newIndex);

};

function font14(value){

var temp = txt.value;

txt.focus();

var pointIndex = txt.selectionStart;

var str1 = temp.substr(0,pointIndex);

var str2 = temp.substr(pointIndex,temp.length);

txt.value = str1+""+str2;

var newIndex = pointIndex+30;

txt.setSelectionRange(newIndex,newIndex);

};

function font15(value){

var temp = txt.value;

txt.focus();

var pointIndex = txt.selectionStart;

var str1 = temp.substr(0,pointIndex);

var str2 = temp.substr(pointIndex,temp.length);

txt.value = str1+""+str2;

var newIndex = pointIndex+30;

txt.setSelectionRange(newIndex,newIndex);

};

function font16(value){

var temp = txt.value;

txt.focus();

var pointIndex = txt.selectionStart;

var str1 = temp.substr(0,pointIndex);

var str2 = temp.substr(pointIndex,temp.length);

txt.value = str1+""+str2;

var newIndex = pointIndex+30;

txt.setSelectionRange(newIndex,newIndex);

};

function left(value){

var temp = txt.value;

txt.focus();

var pointIndex = txt.selectionStart;

var str1 = temp.substr(0,pointIndex);

var str2 = temp.substr(pointIndex,temp.length);

txt.value = str1+"

var newIndex = pointIndex+28;

txt.setSelectionRange(newIndex,newIndex);

};

function center(value){

var temp = txt.value;

txt.focus();

var pointIndex = txt.selectionStart;

var str1 = temp.substr(0,pointIndex);

var str2 = temp.substr(pointIndex,temp.length);

txt.value = str1+"

var newIndex = pointIndex+30;

txt.setSelectionRange(newIndex,newIndex);

};

function right(value){

var temp = txt.value;

txt.focus();

var pointIndex = txt.selectionStart;

var str1 = temp.substr(0,pointIndex);

var str2 = temp.substr(pointIndex,temp.length);

txt.value = str1+"

var newIndex = pointIndex+29;

txt.setSelectionRange(newIndex,newIndex);

};

function b(value){

var temp = txt.value;

txt.focus();

var pointIndex = txt.selectionStart;

var str1 = temp.substr(0,pointIndex);

var str2 = temp.substr(pointIndex,temp.length);

txt.value = str1+"

var newIndex = pointIndex+29;

txt.setSelectionRange(newIndex,newIndex);

};

function red(value){

var temp = txt.value;

txt.focus();

var pointIndex = txt.selectionStart;

var str1 = temp.substr(0,pointIndex);

var str2 = temp.substr(pointIndex,temp.length);

txt.value = str1+""+str2;

var newIndex = pointIndex+26;

txt.setSelectionRange(newIndex,newIndex);

};

function blue(value){

var temp = txt.value;

txt.focus();

var pointIndex = txt.selectionStart;

var str1 = temp.substr(0,pointIndex);

var str2 = temp.substr(pointIndex,temp.length);

txt.value = str1+""+str2;

var newIndex = pointIndex+26;

txt.setSelectionRange(newIndex,newIndex);

};

function image(value){

var temp = txt.value;

txt.focus();

var pointIndex = txt.selectionStart;

var str1 = temp.substr(0,pointIndex);

var str2 = temp.substr(pointIndex,temp.length);

txt.value = str1+""+str2;

var newIndex = pointIndex+10;

txt.setSelectionRange(newIndex,newIndex);

};

function video(value){

var temp = txt.value;

txt.focus();

var pointIndex = txt.selectionStart;

var str1 = temp.substr(0,pointIndex);

var str2 = temp.substr(pointIndex,temp.length);

txt.value = str1+""+str2;

var newIndex = pointIndex+12;

txt.setSelectionRange(newIndex,newIndex);

};

function br(value){

var temp = txt.value;

txt.focus();

var pointIndex = txt.selectionStart;

var str1 = temp.substr(0,pointIndex);

var str2 = temp.substr(pointIndex,temp.length);

txt.value = str1+"
"+str2;

var newIndex = pointIndex+5;

txt.setSelectionRange(newIndex,newIndex);

}

项目源码+资源：点击下载