zoukankan      html  css  js  c++  java
  • Java web使用富文本控件kindeditor

    一、下载富文本插件kindeditor

      下载地址:https://pan.baidu.com/s/16NRQdUlHki4ZgKwBH3tgvQ
      提取码:h98z


    二、解压

      1、将解压后的“kindeditor”文件夹直接复制到项目根目录下。

      2、将“kindeditor/jsp/lib”下的3个jar包复制到tomcat的lib目录下,如下图所示:

      

    三、设计表单页面demo.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>kindeditor测试</title>
    <link rel="stylesheet" href="kindeditor/themes/default/default.css" >
    <script type="text/javascript" src="kindeditor/kindeditor-all-min.js"></script>
    <script charset="utf-8" src="kindeditor/plugins/code/prettify.js"></script>
    </head>
    <body>
        <!-- 表单的name(example)一定要和下面js代码中document.forms['example'].submit()保持一致 -->
        <form name="example" action="result.jsp" method="post">    
            <!-- 多行文本框的name(content1)要和下面js中的textarea[name="content1"]保持一致 -->
            <textarea cols="100" rows="5" name="content1"></textarea>
            <input type="submit" >
        </form>
        <script>
        KindEditor.ready(function(K) {
            var editor1 = K.create('textarea[name="content1"]', {
                cssPath : 'kindeditor/plugins/code/prettify.css',
                uploadJson : 'kindeditor/jsp/upload_json.jsp',
                fileManagerJson : 'kindeditor/jsp/file_manager_json.jsp',
                allowFileManager : true,
                afterCreate : function() {
                    var self = this;
                    K.ctrl(document, 13, function() {
                        self.sync();
                        document.forms['example'].submit();
                    });
                    K.ctrl(self.edit.doc, 13, function() {
                        self.sync();
                        document.forms['example'].submit();
                    });
                }
            });
            prettyPrint();
        });
        </script>
    </body>
    </html>

    四、设计结果页面result.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <%
            request.setCharacterEncoding("utf-8");
        %>
        <%= request.getParameter("content1") %>
    </body>
    </html>

    五、程序运行结果

     

     

    图片上传到发布项目下的目录下,如下图所示。

  • 相关阅读:
    ES6 语法详解(Promise对象(重点))
    ES6 语法详解(形参默认值)
    ES6 语法详解(三点运算符)
    ES6 语法详解(箭头函数(重点))
    ES6 语法详解(简化的对象写法)
    ES6 语法详解(模板字符串)
    ES6 语法详解(变量的解构赋值)
    [刷题] 走迷宫
    [bug] A reference cannot be reassigned, so it must be initialized at the member-initialization-list.
    [Qt] LibreCAD 源码分析
  • 原文地址:https://www.cnblogs.com/beast-king/p/12673814.html
Copyright © 2011-2022 走看看