UEditor 使用

2019-05-10 23:42:04 作者：互联网

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

二. 安装nodejs

apt-get install nodejs

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

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

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

五.pom.xml添加依赖

    <!-- https://mvnrepository.com/artifact/com.gitee.qdbp.thirdparty/ueditor -->
        <dependency>
            <groupId>com.gitee.qdbp.thirdparty</groupId>
            <artifactId>ueditor</artifactId>
            <version>1.4.3.3</version>
        </dependency>

六. 编写代码测试

<%@ 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>

标签：UEditor,nodejs,使用,blog,编辑器,实例,ueditor,getEditor
来源： https://www.cnblogs.com/jiangfeilong/p/10847258.html