tp5引入ueditor(百度的富文本編輯器)的使用

時間 2019-11-09

標籤 tp5 引入 ueditor 百度文本編輯器使用简体版

原文原文鏈接

首先下載ueditor編輯器的文件放入tp5的static目錄下javascript

第二步，引入Ueditor編輯器php

在用到的頁面（視圖頁面）載入ueditor的js文件html

而後初始化ueditor，實例代碼以下：前端

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index頁面</title>
</head>
    <body>
    <h1>首頁，練習ueditor編輯器</h1>
    <!-- 加載編輯器的容器 -->
    <form action="" method="post" enctype="multipart/form-data">
        <input type="text" name="id">
    <textarea id="container" name="content" cols="30" rows="15" style="width:80%; margin: 0 auto;">個人editor
    </textarea>
        <input type="submit" value="提交">

    </form>

    <!-- 配置文件 -->
    <script type="text/javascript" src="__STATIC__/ueditor/ueditor.config.js"></script>
    <!-- 編輯器源碼文件 -->
    <script type="text/javascript" src="__STATIC__/ueditor/ueditor.all.js"></script>
    <!-- 實例化編輯器 -->
    <script type="text/javascript">
        //var ue = UE.getEditor('container');
        var ue = UE.getEditor('container', {
            autoHeightEnabled:false,
            initialFrameHeight:420
        });
    </script>



    </body>
</html>

也能夠使用script的方式載入ueditorjava

代碼以下：git

<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
</head>

<body>
    <!-- 加載編輯器的容器 -->
    <script id="container" name="content" type="text/plain">
        這裏寫你的初始化內容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="__STATIC__/ueditor/ueditor.config.js"></script>
    <!-- 編輯器源碼文件 -->
    <script type="text/javascript" src="__STATIC__/ueditor/ueditor.all.js"></script>
    <!-- 實例化編輯器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>

</html>

第三部配置上傳圖片的保存路徑，主要須要修改config.json 文件裏的配置便可github

具體參考官方文檔json

http://fex.baidu.com/ueditor/#server-phpapp

第四步，修改前端配置，來知足需求便可編輯器

主要修改ueditor.config.js 文件，具體參考官方文檔

最後運行測試效果展現以下

控制器代碼以下：用來接收編輯器的內容

<?php

// +----------------------------------------------------------------------
// | ThinkAdmin
// +----------------------------------------------------------------------
// | 版權全部 2014~2017 廣州楚纔信息科技有限公司 [ http://www.cuci.cc ]
// +----------------------------------------------------------------------
// | 官方網站: http://think.ctolog.com
// +----------------------------------------------------------------------
// | 開源協議 ( https://mit-license.org )
// +----------------------------------------------------------------------
// | github開源項目：https://github.com/zoujingli/ThinkAdmin
// +----------------------------------------------------------------------

namespace app\index\controller;

use think\Controller;

/**
 * 應用入口控制器
 * @author Anyon <zoujingli@qq.com>
 */
class Index extends Controller
{

    public function index()
    {
        if(request()->isPost()){
            $a=$_POST;
            var_dump($a);
            //$b=str_replace('<','&lt',$a);
            //var_dump($b);
        }
        return $this->fetch();


    }
}

最後，寫的比較匆忙，不夠詳細，有不理解的加羣諮詢羣主便可。

相關標籤/搜索