YangTao
厌浅尝辄止喜有始有终
E.t's Blog
轻量级富文本编辑器-wangEditor
轻量级富文本编辑器-wangEditor

再次之前,了解过百度富文本编辑器和kingeditor编辑器,但认识这个编辑器后才发现,轻量级,而且界面美观!

附上精美的图像,整个包仅368KB,但功能强大!

整个项目就只需要引入两个文件,一个是jqurey,另外一个则是wangeditor的文件wangEditor.min.js

当然您也完全不需要下载到本地,使用CDN引入也可以,官网提供的地址://unpkg.com/wangeditor/release/wangEditor.min.js

https://www.aiphp.cn/wp-content/uploads/2018/08/wangge.png

 

使用也很简单,只需要实例化一个对象在页面即可。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
</head>
<body>
	<form action="/show" method="post" id="form"> 
	<div id="editor">
      
    </div>
    <input type="hidden" name="text.value" id="txt"/>
    <button>提交</button>
	</form>
    <!-- 注意, 只需要引用 JS,无需引用任何 CSS !!!-->
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="//unpkg.com/wangeditor/release/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#editor')
        // 或者 var editor = new E( document.getElementById('editor') )
        editor.create();
        $("button").click(function(){
            var html= editor.txt.html();
            alert(html);
            var text=editor.txt.text();
            alert(text);
            $("#txt").val(html);
           // $("#form").submit();
        })
    </script>
</body>
</html>
没有标签
首页      web      轻量级富文本编辑器-wangEditor
https://secure.gravatar.com/avatar/77f815bec37eb34e2eef92ae146f899a?s=256&d=mm&r=g

et

文章作者

发表评论

textsms
account_circle
email

E.t's Blog

轻量级富文本编辑器-wangEditor
再次之前,了解过百度富文本编辑器和kingeditor编辑器,但认识这个编辑器后才发现,轻量级,而且界面美观! 附上精美的图像,整个包仅368KB,但功能强大! 整个项目就只需要引入两个文件…
扫描二维码继续阅读
2018-08-13