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">編輯內(nèi)容：</label>
    <script id="container" name="content" type="text/plain">
            這里寫(xiě)你的初始化內(nèi)容
    </script>
    <input type="submit" value="提交">
</form>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 編輯器源碼文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 實(shí)例化編輯器 -->
<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";
?>

添加圖書(shū)

<!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">語(yǔ)言：</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">書(shū)名：</label>
                    <input type="text" class="form-control" name="books" placeholder="書(shū)名" id="books">
                </div>
                <div class="form-group">
                    <label for="syn">簡(jiǎn)介：</label>
                    <input type="text" class="form-control" name="syn" placeholder="簡(jiǎn)介" id="syn">
                </div>
                <label for="content">詳情內(nèi)容：</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>
<!--實(shí)例化編輯器-->
<script type="text/javascript">
    $(".header").load("data/header.html");

    var editor = UE.getEditor('container');
    //實(shí)例化編輯器
    var ueditorupload = UE.getEditor('editorupload',
        {
            autoHeightEnabled: false
        });
    ueditorupload.ready(function () {

        ueditorupload.hide();//隱藏編輯器

//監(jiān)聽(tīng)圖片上傳
        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);
        });

        /* 文件上傳監(jiān)聽(tīng)
          * 需要在ueditor.all.min.js文件中找到
          * d.execCommand("insertHtml",l)
          * 之后插入d.fireEvent('afterUpfile',b)
          */

    });

    //彈出圖片上傳的對(duì)話框
    function upImage() {
        var myImage = ueditorupload.getDialog("insertimage");
        myImage.open();
    }
    //彈出文件上傳的對(duì)話框
    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>";
}

修改圖書(shū)

<!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">語(yǔ)言：</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">書(shū)名：</label>
                    <input type="text" class="form-control" name="books" placeholder="書(shū)名" id="books">
                </div>
                <div class="form-group">
                    <label for="syn">簡(jiǎn)介：</label>
                    <input type="text" class="form-control" name="syn" placeholder="簡(jiǎn)介" id="syn">
                </div>
                <label for="content">詳情內(nèi)容：</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>
<!--實(shí)例化編輯器-->
<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');
    //實(shí)例化編輯器
    editor.ready(function () {
        editor.setContent(detail);
    });
    var ueditorupload = UE.getEditor('editorupload',
        {
            autoHeightEnabled: false
        });
    ueditorupload.ready(function () {

        ueditorupload.hide();//隱藏編輯器

//監(jiān)聽(tīng)圖片上傳
        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);
        });

        /* 文件上傳監(jiān)聽(tīng)
          * 需要在ueditor.all.min.js文件中找到
          * d.execCommand("insertHtml",l)
          * 之后插入d.fireEvent('afterUpfile',b)
          */

    });

    //彈出圖片上傳的對(duì)話框
    function upImage() {
        var myImage = ueditorupload.getDialog("insertimage");
        myImage.open();
    }
    //彈出文件上傳的對(duì)話框
    function upFiles() {
        var myFiles = ueditorupload.getDialog("attachment");
        myFiles.open();
    }

//    修改語(yǔ)言
    $("option").each(function (i,item) {
        if ($(item).text()==language){
            $(item).prop("selected",true);
        }
    });
//    修改書(shū)名
    $("#books").val(book);
//    修改簡(jiǎn)介
    $("#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>";
}

最后編輯于：2020.03.24 18:22:08

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市设江，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌秦爆，老刑警劉巖，帶你破解...
沈念sama閱讀 222,464評(píng)論 6贊 517
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件憔披，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)芬膝，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 95,033評(píng)論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門望门，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人锰霜，你說(shuō)我怎么就攤上這事筹误。” “怎么了癣缅？”我有些...
開(kāi)封第一講書(shū)人閱讀 169,078評(píng)論 0贊 362
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵厨剪，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我友存，道長(zhǎng)祷膳，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書(shū)人閱讀 59,979評(píng)論 1贊 299
?港島之戀（遺憾婚禮）
正文為了忘掉前任屡立，我火速辦了婚禮直晨，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘膨俐。我一直安慰自己勇皇，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 69,001評(píng)論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布焚刺。她就那樣靜靜地躺著敛摘，像睡著了一般。火紅的嫁衣襯著肌膚如雪乳愉。梳的紋絲不亂的頭發(fā)上兄淫，一...
開(kāi)封第一講書(shū)人閱讀 52,584評(píng)論 1贊 312
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音匾委，去河邊找鬼拖叙。笑死，一個(gè)胖子當(dāng)著我的面吹牛赂乐，可吹牛的內(nèi)容都是我干的薯鳍。我是一名探鬼主播，決...
沈念sama閱讀 41,085評(píng)論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼挨措，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼挖滤！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起浅役，我...
開(kāi)封第一講書(shū)人閱讀 40,023評(píng)論 0贊 277
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤斩松，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后觉既，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體惧盹，經(jīng)...
沈念sama閱讀 46,555評(píng)論 1贊 319
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡乳幸，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,626評(píng)論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了钧椰。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片粹断。...
茶點(diǎn)故事閱讀 40,769評(píng)論 1贊 353
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖嫡霞，靈堂內(nèi)的尸體忽然破棺而出瓶埋，到底是詐尸還是另有隱情，我是刑警寧澤诊沪，帶...
沈念sama閱讀 36,439評(píng)論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布养筒，位于F島的核電站，受9級(jí)特大地震影響端姚，放射性物質(zhì)發(fā)生泄漏晕粪。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 42,115評(píng)論 3贊 335
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一寄锐、第九天我趴在偏房一處隱蔽的房頂上張望兵多。院中可真熱鬧，春花似錦橄仆、人聲如沸剩膘。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 32,601評(píng)論 0贊 25
一樁弒父案盆顾，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)怠褐。三九已至，卻和暖如春您宪，著一層夾襖步出監(jiān)牢的瞬間奈懒，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 33,702評(píng)論 1贊 274
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工宪巨，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留磷杏，地道東北人。一個(gè)月前我還...
沈念sama閱讀 49,191評(píng)論 3贊 378
代替公主和親
正文我出身青樓捏卓，卻偏偏與公主長(zhǎng)得像极祸，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子怠晴，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,781評(píng)論 2贊 361

UEditor富文本編輯器使用

1 提交表單

添加圖書(shū)

修改圖書(shū)

推薦閱讀更多精彩內(nèi)容