thinkphp+wangEditor3 富文本编辑器完整版

最新推荐文章于 2024-08-22 09:44:18 发布

cichana5555

最新推荐文章于 2024-08-22 09:44:18 发布

阅读量570

点赞数

文章标签： php 数据库 javascript ViewUI

原文链接：https://my.oschina.net/u/4003338/blog/2251469

版权

首先创建一个rich.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
</head>
<body>

<form action="/hfback/after/imgejs" enctype="multipart/form-data" method="post">

    <p>标题:</p><input type="text" name="title" style="width: 100%; height: 20px;">
    <br/>

    <div id="editor">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    </div>
                                        //会出现一个文本域 用display：none;进行隐藏
    <textarea id="text1" name="content" style="display: none;"></textarea>
    <button type="submit">提交</button>

    <script src="/static/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/static/js/wangEditor.min.js"></script>

    <script type="text/javascript">
        var E = window.wangEditor;
        var editor = new E('#editor');

        var $text1 = $('#text1');
        editor.customConfig.onchange = function (html) {
            // 监控变化，同步更新到 textarea
            $text1.val(html)
        };

        //绿色部分是对图片的设置，本地上传
        editor.customConfig.debug = true;
        editor.customConfig.uploadFileName = 'image';                       //上传的文件名
        // 或者 var editor = new E( document.getElementById('editor') )
        editor.customConfig.uploadImgServer = "/hfback/after/uploads";  // 上传图片到服务器
        editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;         //图片的尺寸
        editor.customConfig.uploadImgMaxLength = 5;                     //最多上传多少
        editor.customConfig.uploadImgParams = {
            type: 'editor'  // 属性值会自动进行 encode ，此处无需 encode
        };

        editor.create();
        $text1.val(editor.txt.html())
    </script>
</form>
</body>
</html>

后台拼接地址图片设置方法

public function uploads()
{
    // 获取表单上传文件 例如上传了001.jpg
    $file = request()->file('image');

    // 移动到框架应用根目录/uploads/ 目录下
    $info = $file->move('D:\BtSoft\WebSoft\wwwroot\tp51\public\uploads');        //在public/创建uploads,获取图片的地址

    if ($info) {
        $url = "http://www.tp51.com/uploads/" . $info->getSaveName();            //在域名加图片的地址进行拼接
        $datas = ["errno" => 0, "data" => [$url]];
        return json($datas);
    } else {
        // 上传失败获取错误信息
        echo $file->getError();
    }
}

wangEditor3富文本编辑器进行内容的接收并插入texts数据库

public function imgejs()
{
    $data = Request::only(["title", "content"]);
    dump($data);

    $values = [
        'title' => $data['title'],
        'content' => $data['content'],
        'time' => time()
    ];

    $validate = new content;            //进行验证 标题 、内容 必填 数字限制

    if (!$validate->check($values)) {
        $this->success(($validate->getError()), '/hfback/after/rich');
    }

    Db::table('texts')
        ->insert($values);
}

获取的数据插入数据库的时候，内容会还有html代码，在前端显示时，用模板输出的时候要进行转义。

{$date.content|raw}            //在最后一行的模板中添加 |raw

转载于:https://my.oschina.net/u/4003338/blog/2251469

cichana5555

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
thinkphp+wangEditor3 富文本编辑器完整版

首先创建一个rich.html <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>wangEditor demo</title&gt...
复制链接

扫一扫