UEditor富文本编辑器使用

作者: 波拉拉 | 来源:发表于2020-03-19 12:30 被阅读0次

springboot集成ueditor
vue使用富文本编辑器vue-ueditor
富文本编辑器加载问题
常用编辑器大全
常用富文本编辑器
springboot thymeleaf 整合百度富文本编辑器
Vue 中使用富文本编辑器 vue-quill-editor 与
基于vue的富文本编辑器Vue-Quill-Editor
基于SpringBoot从零构建博客网站 - 集成editor.
SpringBoot整合UEditor

https://www.cnblogs.com/emrys5/p/ueditor-upload-img.html

1 提交表单

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
</head>
<body>
<form action="data/server.php" method="post">
    <label for="name">姓名：</label>
    <input type="text" name="username" id="name">
    <!-- 加载编辑器的容器 -->
    <label for="content">编辑内容：</label>
    <script id="container" name="content" type="text/plain">
            这里写你的初始化内容
    </script>
    <input type="submit" value="提交">
</form>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var editor = UE.getEditor('container');
</script>
</body>
</html>

php处理

<?php
header("content-type:text/html;charset=utf-8");
$username=$_POST['username'];
$content=$_POST['content'];
echo "$username+$content";
?>

添加图书

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=0.9, user-scalable=no">
    <!--<base target="_blank">-->
    <meta charset="UTF-8">
    <title>BOLALA</title>
    <link href="img/icon.ico" rel="icon" type="image">
    <link rel="stylesheet" href="scss/bootstrap.css">
    <link rel="stylesheet" href="scss/bll-reset.css">
    <link rel="stylesheet" href="scss/bll-grid.css">
    <link rel="stylesheet" href="css/index.css">

</head>
<body>
<div class="header container-fluid">

</div>
<div class="main container">
    <div class="row">
        <div class="col-8 mx-auto">
            <form action="data/insert-ok.php" method="post">
                <label for="lang">语言：</label>
                <div class="form-group">
                    <select class="form-control" name="language" id="lang">
                        <option>PHP</option>
                        <option>javaScript</option>
                        <option>C++</option>
                        <option>node.js</option>
                        <option>C</option>
                        <option>python</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="books">书名：</label>
                    <input type="text" class="form-control" name="books" placeholder="书名" id="books">
                </div>
                <div class="form-group">
                    <label for="syn">简介：</label>
                    <input type="text" class="form-control" name="syn" placeholder="简介" id="syn">
                </div>
                <label for="content">详情内容：</label>
                <script id="container" name="content" type="text/plain"></script>
                <label for="picture" class="mt-3">封面图片：</label>
                <script type="text/plain" id="editorupload"></script>
                 <input type="text" id="picture" name="image" style="width:400px;margin-bottom: 10px;"/>
                <input type=button value="上传图片" onClick="upImage();">
                <input type="submit" class="btn btn-danger btn-block" value="提交">
            </form>
            </form>
        </div>
    </div>
</div>
<div class="footer"></div>
<script src="js/jquery-1.7.1.js"></script>
<!--配置文件-->
<script type="text/javascript" src="UEditor/ueditor.config.js"></script>
<!--编辑器文件-->
<script type="text/javascript" src="UEditor/ueditor.all.js"></script>
<!--实例化编辑器-->
<script type="text/javascript">
    $(".header").load("data/header.html");

    var editor = UE.getEditor('container');
    //实例化编辑器
    var ueditorupload = UE.getEditor('editorupload',
        {
            autoHeightEnabled: false
        });
    ueditorupload.ready(function () {

        ueditorupload.hide();//隐藏编辑器

//监听图片上传
        ueditorupload.addListener('beforeInsertImage', function (t, arg) {
            $("#picture").attr("value", arg[0].src);
// alert('图片地址'+arg[0].src);
        });

        ueditorupload.addListener('afterUpfile', function (t, arg) {
            $("#picture").attr("value", arg[0].src);
            //alert('文件地址：'+arg[0].url);
        });

        /* 文件上传监听
          * 需要在ueditor.all.min.js文件中找到
          * d.execCommand("insertHtml",l)
          * 之后插入d.fireEvent('afterUpfile',b)
          */

    });

    //弹出图片上传的对话框
    function upImage() {
        var myImage = ueditorupload.getDialog("insertimage");
        myImage.open();
    }
    //弹出文件上传的对话框
    function upFiles() {
        var myFiles = ueditorupload.getDialog("attachment");
        myFiles.open();
    }
</script>
</body>
</html>

php处理

<?php
header("content-type:text/html;charset=utf-8");
$conn=mysqli_connect(
    "localhost",
    "root",
    "",
    "jq-book");
$sql='SET NAMES UTF8';
$result=mysqli_query($conn, $sql);

$language=$_POST['language'];
$books=$_POST['books'];
$syn=$_POST['syn'];
$content=$_POST['content'];
$date=date('Y-m-d');
$image=$_POST['image'];

$sql="INSERT INTO `book-info` (`id`, `language`, `book`, `syn`, `detail`, `date`, `image`) VALUES (NULL, '$language', '$books', '$syn', '$content', '$date', '$image');";
$insert=mysqli_query($conn,$sql);
if ($result){
    echo "<script>alert('添加成功');window.location.href='../insert.html'</script>";
}else{
    echo "<script>alert('添加失败');window.location.href='../index.html'</script>";
}

修改图书

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=0.9, user-scalable=no">
    <!--<base target="_blank">-->
    <meta charset="UTF-8">
    <title>BOLALA</title>
    <link href="img/icon.ico" rel="icon" type="image">
    <link rel="stylesheet" href="scss/bootstrap.css">
    <link rel="stylesheet" href="scss/bll-reset.css">
    <link rel="stylesheet" href="scss/bll-grid.css">
    <link rel="stylesheet" href="css/index.css">

</head>
<body>
<div class="header container-fluid">

</div>
<div class="main container">
    <div class="row">
        <div class="col-8 mx-auto">
            <form action="data/handle-update.php" method="post">
                <input type="hidden" name="id" id="bookid">
                <label for="lang">语言：</label>
                <div class="form-group">
                    <select class="form-control" name="language" id="lang">
                        <option>PHP</option>
                        <option>javaScript</option>
                        <option>C++</option>
                        <option>node.js</option>
                        <option>C</option>
                        <option>python</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="books">书名：</label>
                    <input type="text" class="form-control" name="books" placeholder="书名" id="books">
                </div>
                <div class="form-group">
                    <label for="syn">简介：</label>
                    <input type="text" class="form-control" name="syn" placeholder="简介" id="syn">
                </div>
                <label for="content">详情内容：</label>
                <script id="container" name="content" type="text/plain"></script>
                <label for="picture" class="mt-3">封面图片：</label>
                <script type="text/plain" id="editorupload"></script>
                 <input type="text" id="picture" name="image" style="width:400px;margin-bottom: 10px;"/>
                <input type=button value="上传图片" onClick="upImage();">
                <input type="submit" class="btn btn-danger btn-block" value="提交">
            </form>

        </div>
    </div>
</div>
<div class="footer"></div>
<script src="js/jquery-1.7.1.js"></script>
<!--配置文件-->
<script type="text/javascript" src="UEditor/ueditor.config.js"></script>
<!--编辑器文件-->
<script type="text/javascript" src="UEditor/ueditor.all.js"></script>
<!--实例化编辑器-->
<script type="text/javascript">
    $(".header").load("data/header.html");
    var id = decodeURI(location.search.substring(1).split("=")[1]);
    $("#bookid").val(id);
    console.log(id);
    $.ajax({
        url: "data/update-ok.php",
        data: {id: id},
        async: false,    //同步方式
        type: "GET",
        success: function (data) {
            window.data = JSON.parse(data)[0];
        }
    });
    var language = data.language,
        book = data.book,
        syn = data.syn,
        detail = data.detail,
        image = data.image;
    var editor = UE.getEditor('container');
    //实例化编辑器
    editor.ready(function () {
        editor.setContent(detail);
    });
    var ueditorupload = UE.getEditor('editorupload',
        {
            autoHeightEnabled: false
        });
    ueditorupload.ready(function () {

        ueditorupload.hide();//隐藏编辑器

//监听图片上传
        ueditorupload.addListener('beforeInsertImage', function (t, arg) {
            $("#picture").attr("value", arg[0].src);
            console.log(arg);
// alert('图片地址'+arg[0].src);
        });

        ueditorupload.addListener('afterUpfile', function (t, arg) {
            $("#picture").attr("value", arg[0].src);
            console.log(arg);
//            [{src:""},{src:""}]
            //alert('文件地址：'+arg[0].url);
        });

        /* 文件上传监听
          * 需要在ueditor.all.min.js文件中找到
          * d.execCommand("insertHtml",l)
          * 之后插入d.fireEvent('afterUpfile',b)
          */

    });

    //弹出图片上传的对话框
    function upImage() {
        var myImage = ueditorupload.getDialog("insertimage");
        myImage.open();
    }
    //弹出文件上传的对话框
    function upFiles() {
        var myFiles = ueditorupload.getDialog("attachment");
        myFiles.open();
    }

//    修改语言
    $("option").each(function (i,item) {
        if ($(item).text()==language){
            $(item).prop("selected",true);
        }
    });
//    修改书名
    $("#books").val(book);
//    修改简介
    $("#syn").val(syn);
//修改图片地址
    $("#picture").val(image);
</script>
</body>
</html>

php处理

<?php
header("content-type:text/html;charset=utf-8");
$conn=mysqli_connect(
    "localhost",
    "root",
    "",
    "jq-book");
$sql='SET NAMES UTF8';
$result=mysqli_query($conn, $sql);

$id=$_POST['id'];
$language=$_POST['language'];
$books=$_POST['books'];
$syn=$_POST['syn'];
$content=$_POST['content'];
$date=date('Y-m-d');
$image=$_POST['image'];

$sql="UPDATE `book-info` SET 
`book` = '$books',
 `syn` = '$syn',
  `detail` = '$content',
 `image` = '$image' 
 WHERE `book-info`.`id` = $id;";
$insert=mysqli_query($conn,$sql);
if ($result){
    echo "<script>alert('添加成功');window.location.href='../more.html'</script>";
}else{
    echo "<script>alert('添加失败');window.location.href='../index.html'</script>";
}

springboot集成ueditor
ueditor ueditor是百度开源的富文本编辑器。使用教程可以参考官网。ueditor JPS版下载地址 S...
vue使用富文本编辑器vue-ueditor
vue使用富文本编辑器vue-ueditor npm i vue-ueditor --S 组件里面只需要写
富文本编辑器加载问题
使用ueditor富文本编辑器的getcontent()方法时，报错找不到这个编辑器对象 html: {{deta...
常用编辑器大全
一、富文本编辑器 1、UEditor UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有...
常用富文本编辑器
传统的富文本编辑器 ueditor ckeditor tinymce Markdown编辑器 SimpleMDE
springboot thymeleaf 整合百度富文本编辑器
项目中需要使用到富文本编辑器，找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入。编辑器官网是...
Vue 中使用富文本编辑器 vue-quill-editor 与
# 前言富文本编辑器有很多，比如 UEditor[%5Bhttps://ueditor.baidu.com/we...
基于vue的富文本编辑器Vue-Quill-Editor
因为项目需要，需要添加富文本编辑器，特意查询下，目前网上有很多富文本编辑器，UEditor，vue-quill-e...
基于SpringBoot从零构建博客网站 - 集成editor.
发布文章功能里面最重要的就是需要集成富文本编辑器，目前富文本编辑器有很多，例如ueditor，CKEditor、e...
SpringBoot整合UEditor
当前开发项目涉及到富文本框，了解了不少富文本编辑器之后，最终决定使用度娘的UEditor。原因：功能强大，并且自带...