ckeditor&echarts

最新推荐文章于 2022-07-13 17:14:06 发布

EnndmeRedis

最新推荐文章于 2022-07-13 17:14:06 发布

阅读量344

点赞数 2

分类专栏：框架文章标签： javascript

本文链接：https://blog.csdn.net/qq_52163230/article/details/122234337

版权

框架专栏收录该内容

9 篇文章 0 订阅

订阅专栏

ckeditor

ckeditor是html文本编辑插件，源码是javascript。效果类似WORD。就是在textarea上多了一些编辑工具。

ckfinder是ckeditor的一个插件,ckfinder主要用于上传功能

ckeditor是文字编辑的。
ckfinder是文件管理的。

在这里插入图片描述

ckfinder

在这里插入图片描述

引入

将引入ckeditor，ckfinser 加入js目录下
导入jar包

在这里插入图片描述

配置web.xml和ckfinder.xml
引入ckfinder.xml配置文件

将CKFinder war包解压后WEB-INF中得到的config.xml拷贝到本项目WEB-INF目录下，最好将其重命名一下，将其命名为ckfinder.xml

配置web.xml文件

<!-- ckfinder -->
    <servlet>
        <servlet-name>ConnectorServlet</servlet-name>
        <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
        <init-param>
            <param-name>XMLConfig</param-name>
            <param-value>/WEB-INF/ckfinder.xml</param-value>
        </init-param>
        <init-param>
            <param-name>debug</param-name>
            <param-value>false</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>ConnectorServlet</servlet-name>
        <url-pattern>/style/js/ckfinder/core/connector/java/connector.java</url-pattern>
    </servlet-mapping>

在页面编辑替换textArea

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻编辑</title>
    <link href="../../style/css/back/style.css" rel="stylesheet" type="text/css"/>
    <script src="../../style/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="../../style/js/ajaxfileupload.js"></script>
    <script src="../../style/js/ckeditor/ckeditor.js"></script>
    <script src="../../style/js/ckfinder/ckfinder.js"></script>
    <script>
        var editor;
        $(function () {
            //使用ckeditor替换textArea
            editor  = CKEDITOR.replace("contentEditor");
            CKFinder.setupCKEditor(editor,'../../style/js/ckfinder')

        function saveAndSubmit(){
            if (confirm("确认保存并发布")){
                var content = editor.getData();
                $.ajaxFileUpload({
                    url: '../../news/addNewsAndPush',
                    fileElementId: 'coverPicture',
                    dataType: 'json',
                    data: {

                        content: content
                    },
                    success: function (res) {
                          alert(res.msg)
                          location.replace("list.html")
                    }
                })
            }
        }
    </script>
</head>
    
    
<body>
<form id="formId">
    <div class="formbody">
        <div class="formtitle"><span>新闻编辑</span></div>
        <ul class="forminfo">
            <li>
                <label>封面图</label>
                <input name="coverPicture" id="coverPicture" type="file" class="dfinput" accept=".jpg,.png"/>
            </li>
            <li>
                <label>正文</label>
                <textarea id="contentEditor">

                </textarea>
            </li>
            <li>
                <input type="button" class="btn" value="确认保存" onclick="save()"/>
            </li>
        </ul>
    </div>
</form>
</body>
</html>

echarts

引入echarts.js

柱状图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../../style/css/back/style.css" rel="stylesheet" type="text/css"/>
    <script src="../../style/js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../style/js/echarts-all.js"></script>

    <script type="text/javascript">
        //按照新闻类型统计
        function newsType() {
            $.get("../../news/statisticsByType", function (res) {
                //加载图形
                var myChart = echarts.init(document.getElementById('main'));
                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data: ['数量']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: res.data.x
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            "name": "数量",
                            "type": "bar",
                            "data": res.data.y
                        }
                    ]
                };
                // 为echarts对象加载数据
                myChart.setOption(option);
            })
        }
    </script>
</head>
<body>
<!-- 顶部按钮 -->
<div class="tools">
    <ul class="toolbar">
        <!--增加链接-->
        <li class="click">
            <span onclick="newsType()"><img src="../../style/img/back/t01.png"/></span>
            新闻类型
        </li>
    </ul>
</div>

<div id="main" style="height:400px"></div>

</body>
</html>

EnndmeRedis

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
ckeditor&echarts

ckeditorckeditor是html文本编辑插件，源码是javascript。效果类似WORD。就是在textarea上多了一些编辑工具。ckfinder是ckeditor的一个插件,ckfinder主要用于上传功能ckeditor是文字编辑的。ckfinder是文件管理的。ckfinder引入将引入ckeditor，ckfinser 加入js目录下导入jar包配置web.xml和ckfinder.xml引入ckfinder.xml配置文件将CKFi
复制链接

扫一扫