基于Jquery实现的文本编辑器小插件

主要使用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文件,就可以使用插件了

下面为引入的效果: