富文本编辑器的实现2021.11.24

最新推荐文章于 2024-05-12 18:14:33 发布

bobo洁厕灵

最新推荐文章于 2024-05-12 18:14:33 发布

阅读量580

点赞数

文章标签： java 前端开发语言

本文链接：https://blog.csdn.net/cvpatient/article/details/121523575

版权

1.在admin文件夹下新建一个articleAdd.jsp文件，首先去到kindeditor官网下载我们需要的文件

解压文件，将解压后文件中不需要的文件删除，留下以下需要的文件

2.在web文件夹下新建一个js文件夹（Directory）

把下载好的kindeditor的文件复制粘贴到js文件夹下

接下来去到kindeditor演示jsp的demo界面

观察demo代码，里面有引入的样式，语言包，文件，和js脚本代码

我们要对其中的uploadJson进行重写

在idea中的代码如下

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="cn.edu.ahtcm.bean.User" %>
<%
    User user = (User)request.getSession().getAttribute("user");
%>
<html>
<head>
    <title>Title</title>
    <!-- 包含头部信息用于适应不同设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 包含 bootstrap 样式表 -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/js/kindeditor/themes/default/default.css" />
    <script type='text/javascript' src='/js/kindeditor/kindeditor-all-min.js' charset='utf-8'></script>
    <script>
        KindEditor.ready(function(K) {
            var editor1 = K.create('textarea[name="content"]', {
                uploadJson : '/UploadImageServlet',
                allowFileManager : true,
                afterCreate : function() {
                    var self = this;
                    K.ctrl(document, 13, function() {
                        self.sync();
                        document.forms['articleForm'].submit();
                    });
                    K.ctrl(self.edit.doc, 13, function() {
                        self.sync();
                        document.forms['articleForm'].submit();
                    });
                }
            });
            //prettyPrint();
        });
    </script>

其中的uploadJson路径改成：/UploadImageServlet

script代码直接照搬即可，再在下方加上对界面进行设计的代码


</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">当前用户：<%out.print(user.getName()); %></a></li>
                <li><a href="/LoginOut">[退出]</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <ul class="nav nav-pills nav-stacked">
                <li><a href="/ArticleListServlet">文章列表</a></li>
                <li class="active"><a href="#">添加文章</a></li>
                <li><a href="/UserListServlet">用户列表</a></li>
            </ul>
            <hr class="hidden-sm hidden-md hidden-lg">
        </div>
        <div class="col-md-8">
            <form role="form" action="/ArticleAddServlet" name="articleForm"  method="post">
                <div class="form-group">
                    <label for="title">标题</label>
                    <input type="text" id="title" name="title" class="form-control" placeholder="文本输入" required>
                </div>
                <div class="form-group">
                    <label for="content">内容</label>
                    <textarea name="content" id="content" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"></textarea>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="jumbotron text-center" style="margin-bottom:0">
    <p>底部内容</p>
</div>
</body>
</html>

重启tomcat，测试文章添加页面和富文本编辑器

样式错误。

这时，在idea中选择js文件夹，右击选择show in explore

把kindeditor文件夹复制

然后粘贴到到out目录下的js文件夹中

没有js文件夹新建一个

这时再打开网页，富文本编辑器的内容显示了

成功

bobo洁厕灵

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
富文本编辑器的实现2021.11.24

1.在admin文件夹下新建一个articleAdd.jsp文件，首先去到kindeditor官网下载我们需要的文件解压文件，将解压后文件中不需要的文件删除，留下以下需要的文件2.在web文件夹下新建一个js文件夹（Directory）把下载好的kindeditor的文件复制粘贴到js文件夹下接下来去到kindeditor演示jsp的demo界面观察demo代码，里面有引入的样式，语言包，文件，和js脚本代码我们要对其中的uploadJs...
复制链接

扫一扫