主要使用Jquery制作的文本编辑小插件
1. 创建一个textarea,类名设置为 .edtor , 然后设置自己需要的宽高
代码示例: 这里设置得宽为300px 高为200px
<textarea class="editor" style="width: 300px;height: 200px;"></textarea>
2.在html文档头部引入js文件
(1)引入 jQuery 的cdn 文件
注意: 此方式在离线状态不适用
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
(2) 本地导入 jquery-min.js (其他版本的jquery也可以)
2.创建一个js文件,直接Copy下面代码
function toback(){
var s=$(event.target);
var t=s.parent().next();
t.css("color",s.val());
}
function tosize(){
var s=$(event.target);
var t=s.parent().next();
t.css("font-size",s.val()+"px");
}
function toalign(){
var s=$(event.target);
var t=s.parent().next();
t.css("text-align",s.text());
}
function createback(){
var b=$("<input type='color'/>");
b.bind("change","",toback);
return b;
}
function createsize(){
var b=$("<select></select>");
b.append($("<option value='20'>20px</option>"));
b.append($("<option value='25'>25px</option>"));
b.append($("<option value='30'>30px</option>"));
b.append($("<option value='35'>35px</option>"));
b.append($("<option value='40'>40px</option>"));
b.bind("change","",tosize);
return b;
}
function createButton(txt,fn){
var b=$("<button>"+txt+"</button>");
b.bind("click","",fn);
return b;
}
function createBar(width){
var d=$("<div></div>");
d.css({width:width,height:"30px"});
d.append(createsize());
d.append(createButton("left",toalign));
d.append(createButton("center",toalign));
d.append(createButton("right",toalign));
d.append(createback());
return d;
}
$(function(){
$(".editor").each(function(i,e){
var div=$("<div></div>");
var my=$(this);
var pos=my.css("position");
div.css({width:my.css("width"),
height:my.css("height"),
position:my.css("position"),
top:my.css("top"),
left:my.css("left"),});
my.replaceWith(div);
my.css({left:0,top:0});
var newheight=parseInt(div.css("height"))-30;
div.append(createBar(div.css("width")));
var newmy=my.clone().css("height",newheight+"px");
if(pos=="absolute"){
newmy.css("top","30px");
}
div.append(newmy);
});
});
3.在html文件中引入你创建的js文件,就可以使用插件了
下面为引入的效果: