富文本

Q1：需要导入的一些包和文件（需要的联系我，我发给你）

Q2:html(富文本2.html)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>富文本框操作</title>
<link rel="stylesheet" href="js/layui/css/layui.css" media="all" />

</head>
<body>
<h2>富文本编辑器</h2>
    <div>
        商品详细:
        <textarea cols="80" rows="10" id="details" style="width:700px"></textarea>
        <button type="button" id="btnSubmit">提交</button>
    </div>

    <div id="divContent"></div>
</body>
<!-- 导入layui -->
<script src="js/layui/layui.js"></script>
<!-- 导入jquery -->
<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
<script type="text/javascript" src="RichTextBox/kindeditor-all.js"></script>
<script type="text/javascript" src="RichTextBox/lang/zh-CN.js"></script>
<script type="text/javascript">
    var editor;
    KindEditor.ready(function(K) {
       editor = K.create('#details',{
           uploadJson : 'RichTextBox/jsp/upload_json.jsp',  //上传程序
           fileManagerJson : 'RichTextBox/jsp/file_manager_json.jsp',  //文件管理
           allowFileManager : true  //是否允许上传
        });  //创建一个富文本编辑器
    });
    $("#btnSubmit").click(function(){
        $("#divContent").html(editor.html());
    });
</script>
</html>

结果

可以表情

可以图片

 

 总而言之，富文本编译器十分实用，功能非常强大

posted @ 2018-07-25 09:22  zywds  阅读(402)  评论(0)    收藏  举报