富文本（wangEditor框架）的使用教程

富文本的使用教程（wangEditor框架）

　　一，相信很多人用过很多富文本的框架，现在我向大家推荐一个很实用的一个富文本框架，具有丰富的功能项，容易使用。

　　　　所以本博客介绍这个富文本编辑器的使用哈！觉得写得不错的请点赞哈，有建议欢迎提哈！^V^

　　　　· 官网地址:ttp://www.wangeditor.com/

　　二，控件展示效果

　　　　　　    haha 是不是很强大

 

　　三，使用步骤

    　　所需js  css包：

　　　　

复制代码　　　　　　wangEditor.min.css

1
　　　　　　wangEditor.min.css

复制代码　　　　　　wangEditor.min.js

1
　　　　　　wangEditor.min.js

　　　1，第一步就是引入js和css包了，必需的

复制代码<link rel="stylesheet" type="text/css" href="/css/wangedit/wangEditor.min.css"> <script src="/js/wangedit/wangEditor.js"></script>

1
2
3
<link rel="stylesheet" type="text/css" href="/css/wangedit/wangEditor.min.css">
<script src="/js/wangedit/wangEditor.js"></script>

　　 

 

　　　 2，初始化富文本框的js代码

复制代码<script> var editor1 = new wangEditor("introduce1"); editor1.config.uploadImgUrl = "/imgView/uploadTmpImg/public.htm";//富文本上传图片的路径，不上传图片这里可以忽略 editor1.config.menuFixed = false; editor1.create(); </script>

1
2
3
4
5
6
<script>
  var editor1 = new wangEditor("introduce1");
    editor1.config.uploadImgUrl = "/imgView/uploadTmpImg/public.htm";//富文本上传图片的路径，不上传图片这里可以忽略
    editor1.config.menuFixed = false;
    editor1.create();
</script>

　

　　　3，HTML代码

复制代码<div id="introduce1" style="height:300px;"></div>

1
<div id="introduce1" style="height:300px;"></div>

　　4，获得文本框的内容方法

复制代码editor1.html();//得到内容

1
editor1.html();//得到内容

 

　　　　不足之处请给予指正谢谢♥