富文本插件

最新推荐文章于 2024-08-22 16:14:53 发布

spring_007_999

最新推荐文章于 2024-08-22 16:14:53 发布

阅读量422

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/spring_007_999/article/details/122102315

版权

学习链接：地址

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>富文本测试</title>
<!--引入插件jQuery-->
<script type="text/javascript" src="../js/jquery.min.js"></script> 
<!--引入插件cdn上的插件wangEditor.min.js-->
<script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>

</head>
<style>
#div1{margin-top: 30px;}
/* table 样式 */
table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
table td,
table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}
table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 样式 */
blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
pre code {
  display: block;
}

/* ul ol 样式 */
ul, ol {
  margin: 10px 0 10px 20px;
}
/*显示富文本编辑器的内容*/
.div1-content{width: 800px;padding: 20px;margin: 10px auto;border:1px solid #999;}
</style>
<body>
    <!--富文本编辑器-->
    <div id="div1"></div>
    <button class="btn-clear">清空内容</button>
    <button class="btn-submit">提交</button>
    

    <!--显示富文本编辑器的内容-->
    <div class="div1-content"></div>
    
</body>
</html>
<!-- 引入 wangEditor.min.js -->
<script type="text/javascript">
    //学习链接：https://www.wangeditor.com/doc/pages/02-%E5%86%85%E5%AE%B9%E5%A4%84%E7%90%86/03-%E8%8E%B7%E5%8F%96html.html
    const E = window.wangEditor
    const editor = new E('#div1')
    // 或者 const editor = new E( document.getElementById('div1') )
    // 设置编辑区域高度为 500px,默认是300px
    editor.config.height = 400
    
    editor.create()

    //提交内容
    $(".btn-submit").click(function(){
        var contentHtml=editor.txt.html()
        console.log("获取html",contentHtml)
        $(".div1-content").html( editor.txt.html() )
        

    })
    //清空内容
    $(".btn-clear").click(function(){
        editor.txt.clear();
    })
    
</script>