zoukankan      html  css  js  c++  java
  • UEditor 使用

    一. https://ueditor.baidu.com/website/download.html#ueditor 进入官网下载完整版源码

    二. 安装nodejs

    apt-get install nodejs
    node -v //检查是否安装好nodejs

    三. 在webapp 目录 新建ueditor 文件夹

    四.  在udditor 文件上右键->import->导入ueditor的源文件里的jsp目录的所有文件

    五. 导入ueditor java源码到src目录

    六.pom.xml添加依赖

            <!-- 上传文件的支持 -->
            <dependency>
                <groupId>commons-fileupload</groupId>
                <artifactId>commons-fileupload</artifactId>
                <version>1.3.1</version>
            </dependency>
            <dependency>
                <groupId>commons-io</groupId>
                <artifactId>commons-io</artifactId>
                <version>2.4</version>
            </dependency>
            <dependency>
                <groupId>commons-codec</groupId>
                <artifactId>commons-codec</artifactId>
                <version>1.10</version>
            </dependency>
            <!-- org.json -->
            <!--JSON is a light-weight, language independent, data interchange format. 
                See http://www.JSON.org/ -->
            <dependency>
                <groupId>org.json</groupId>
                <artifactId>json</artifactId>
                <version>20160212</version>
            </dependency>

    七. 配置springmvc.xml

    <mvc:annotation-driven />    
    <!-- <mvc:resources mapping="/*.html" location="/" /> -->
    <mvc:resources mapping="/ueditor/**" location="/ueditor/" />

     八.修改文件保持路径

    1. 修改BinaryUpload 和Base64Uploader 两个类的保持路径即可

    十. 编写代码测试

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
    
        <title> 江期玉个人博客</title>
    
        <!-- me.ico -->
        <link rel="icon" href="img/me.ico" type="image/x-ico"/>
    
        <!-- Bootstrap Core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
    
        <!-- Custom CSS -->
        <link href="css/clean-blog.min.css" rel="stylesheet">
    
        <!-- Custom Fonts -->
        <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
        <link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    
        <!-- UDeitor -->
        <script type="text/javascript" charset="utf-8" src="./ueditor/ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="./ueditor/ueditor.all.min.js"> </script>
        <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
        <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
        <script type="text/javascript" charset="utf-8" src="./ueditor/lang/zh-cn/zh-cn.js"></script>
    
    </head>
    <body>
        <!-- header 导航栏 -->
        <%@ include file="/header.html" %>
        <!-- Page Header -->
        <!-- Set your background image for this header on the line below. -->
        <header class="intro-header" style="background-image: url('img/about-bg.jpg')">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                        <div class="text-center">
                            <h1>江期玉个人博客</h1>
                            <hr class="small">
                        </div>
                    </div>
                </div>
            </div>
        </header>
    
        <!-- Main Content -->
        <div class="container">
            <div class="row">
                <p><h3>开始写博客!</h3><p>
                <form action="post" method="post" id="editorForm" onsubmit="return validate_post_blog(this)"> <!-- return validate_post_blog(this) -->
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>blog标题</label> <!-- 未显示 floating-label-form-group 控制-->
                            <input type="text" class="form-control" name="title" placeholder="blog标题"/>
                        </div>
                    </div>
    
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>blog作者</label>
                            <input type="text" class="form-control" name="author" placeholder="blog作者"  value="江期玉"/>
                        </div>
                    </div>
    
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>blog简介</label>
                            <input type="text" class="form-control" name="preview" placeholder="blog简介"/>
                        </div>
                    </div>
    
                    <div class="row">
                        <select name="category">
                            <option value="null">--blog种类--</option>
                            <option value="Java">Java</option>
                            <option value="C/C++">C/C++</option>
                            <option value="Python">Python</option>
                            <option value="OS">OS</option>
                            <option value="网络">网络</option>
                            <option value="框架">框架</option>
                            <option value="生活">生活</option>
                        </select>
                    </div>
    
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <script id="editor" type="text/plain" style="1024px;height:500px;"></script>
                        </div>
                    </div>
    
                    <input type="submit" value="发布"/>
                </form>
            </div>
        </div>
    
        <script type="text/javascript">
            //实例化编辑器
            //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
            var ue = UE.getEditor('editor');
            
        </script>
    
        <!-- Footer 网页底部 -->
        <%@ include file="/footer.html" %>
    
        <!-- jQuery -->
        <script src="js/jquery.js"></script>
    
        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js"></script>
    
        <!-- Custom Theme JavaScript -->
        <script src="js/clean-blog.js"></script>
    
    </body>
    </html>
  • 相关阅读:
    abp(net core)+easyui+efcore实现仓储管理系统——入库管理之一(三十七)
    abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之十(三十六)
    abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之九(三十五)
    abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之八(三十四)
    abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之七(三十三)
    abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之六(三十二)
    abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之五(三十一)
    一个屌丝程序猿的人生(一百一十四)
    一个屌丝程序猿的人生(一百一十三)
    给程序员们以及在外漂泊的同学们普及下户口那点事!
  • 原文地址:https://www.cnblogs.com/jiangfeilong/p/10847258.html
Copyright © 2011-2022 走看看