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

html在线排版编辑工具,html+css+js开发文本编辑器,有各种排版功能!当点击上面的按钮 例如添加图片 就会直接向 textarea 文本框添加一段预设的图片标签 如果添加超链接 就会向文本框添加超链接标签 我们只需要把超链接和链接文字填上去即可 Hello World a background url images a png no repeat border none outline

大家好,我是讯享网,很高兴认识大家。

当点击上面的按钮,例如添加图片,就会直接向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);

var newIndex = pointIndex+5;

txt.setSelectionRange(newIndex,newIndex);

}

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

小讯
上一篇 2025-03-11 22:18
下一篇 2025-03-24 10:36

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/12431.html