UEditor 使用

時間 2019-11-11

標籤 ueditor 使用简体版

原文原文鏈接

一. https://ueditor.baidu.com/website/download.html#ueditor 進入官網下載完整版源碼javascript

二. 安裝nodejscss

apt-get install nodejs

node -v //檢查是否安裝好nodejs

三. 在webapp 目錄新建ueditor 文件夾html

四. 在udditor 文件上右鍵->import->導入ueditor的源文件裏的jsp目錄的全部文件java

五. 導入ueditor java源碼到src目錄node

六.pom.xml添加依賴jquery

        <!-- 上傳文件的支持 -->
        <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.xmlweb

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

八.修改文件保持路徑spring

1. 修改BinaryUpload 和Base64Uploader 兩個類的保持路徑便可json

十. 編寫代碼測試bootstrap

<%@ 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="width: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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。