wangEditor-3.1.1 后台文本编辑器(含上传图片)

11 篇文章 0 订阅

换了框架以后,百度编辑器用不了了,不支持PHP文件在静态文件夹中执行,查找了各种编辑器,最后决定用wangEditor-3.1.1,这个编辑器,好处就是可以自定义上传图片的控制器路径和上传的文件夹,下面是步骤:
1.HTML内容
<div class="form-group">
                            <label class="col-sm-3 control-label">文章内容:</label>
                            <div class="input-group col-sm-7">
                                <div id="editor-trigger">
                                    {$article['content']}
                                </div>
                                <textarea name="content" id="text1" style="display: none"></textarea>
                            </div>
                        </div>


2.引入js文件(js文件要提前放在你想放的目录)

去githup上下载wangEditor编辑器,将release文件夹下的文件复制过来,文件夹命名为:wangEditor-3.1.1,然后在HTML中引入下面两个文件,分别是样式文件和js核心文件
<!--编辑器-->
<link rel="stylesheet" type="text/css" href="/wangEditor-3.1.1/wangEditor.css">
<script src="/wangEditor-3.1.1/wangEditor.js"></script>

这个commjs是写的公共方法,可以直接调用,需要更换项目中文件上传的路径和返回的图片文件名
<script src="__JS__/plugins/wangEditor-3.1.1/wangEditorComm.js"></script>

由于上传不了文件,直接把js文件写过来吧:

// 编辑器公共方法2019-05-31
var E = window.wangEditor;
var editor = new E('#editor-trigger');
//开启debug模式
editor.customConfig.debug = true;
// 关闭粘贴内容中的样式
editor.customConfig.pasteFilterStyle = false;
// 忽略粘贴内容中的图片
editor.customConfig.pasteIgnoreImg = true;

// 上传图片
editor.customConfig.uploadImgServer = "/uploadImg";
editor.customConfig.uploadFileName = 'file'; //设置文件上传的参数名称
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
//自定义上传图片事件
editor.customConfig.uploadImgHooks = {
    customInsert: function (insertImg, result, editor) {
        // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
        // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
        // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
        var url =result.data.src;
        insertImg(url);
        // result 必须是一个 JSON 格式字符串!!!否则报错
    }
}
//设置内容
var $text1 = $('#text1')
editor.customConfig.onchange = function (html) {
    // 监控变化,同步更新到 textarea
    $text1.val(html)
}
editor.create();
// 初始化 textarea 的值
$text1.val(editor.txt.html());


3.php方法 

<?php

 // 上传缩略图
    public function uploadImg()
    {

            $file = request()->file('file');
            // 移动到框架应用根目录/public/upimg/ 目录下
            $info = $file->move(ROOT_PATH . 'public' . DS . 'upimg');
            if ($info) {
                $src = '/upload' . '/' . date('Ymd') . '/' . $info->getFilename();
                return json(msg(1, ['src' => $src], ''));
            } else {
                // 上传失败获取错误信息
                return json(msg(-1, '', $file->getError()));
            }
    }

?>

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值