首先第一步先去wangEditor官网下载所需要的脚本文件！
接下来先在你的项目的HTML标签里加上这样一段标签：
&form id="newspost" method="post" action="newspost" enctype="multipart/form-data"&
&input type="hidden" id="content" name="content"/&
&div style="padding: 5px 0; color: #ccc"&&/div&
&div id="editor"&&/div&
<span style="color: #
&button id="btn1"&获取html&/button&
<span style="color: # &/body&
然后在你下载的文件里找到&&wangEditor.min.js& &这个脚本并引入项目
接下来脚本写上这样一段代码：
1 &script type="text/javascript"&
//下面这两行脚本就是弹出文本框
var E = window.wangEditor
var editor = new E('#editor')
// 上传图片（举例）
editor.customConfig.uploadImgServer = '/upload.ashx'
//将网络图片隐藏掉
editor.customConfig.showLinkImg = false
<span style="color: #
<span style="color: #
// 将 timeout 时间改为 3s
<span style="color: #
editor.customConfig.uploadImgTimeout = <span style="background-color: #f5f5f5; color: #00 * <span style="background-color: #f5f5f5; color: #;
<span style="color: #
<span style="color: #
document.getElementById('btn1').addEventListener('click', function () {
<span style="color: #
// 读取 html
<span style="color: #
alert(editor.txt.html())
<span style="color: #
<span style="color: #
<span style="color: #
editor.create();
<span style="color: # &/script&
这样文本框也就显示出来，获取内容脚本注释里也有，图片上传的脚本也写在里面。
接下来就是图片上传所需要的代码了，由于我是用WebForm做的。所以我保存图片的代码写在一般处理程序里面，接下来看看一般处理程序的代码：
2 using System.Collections.G
3 using System.IO;
4 using System.L
5 using System.W
7 namespace WebApplication1
/// &summary&
<span style="color: #
/// upload 的摘要说明
<span style="color: #
/// &/summary&
<span style="color: #
public class upload : IHttpHandler
<span style="color: #
<span style="color: #
<span style="color: #
public void ProcessRequest(HttpContext context)
<span style="color: #
<span style="color: #
context.Response.ContentType = "text/plain";
<span style="color: #
context.Response.Charset = "utf-8";
<span style="color: #
<span style="color: #
var files = context.Request.F
<span style="color: #
if (files.Count &= <span style="color: #)
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
HttpPostedFile file = files[<span style="color: #];
<span style="color: #
<span style="color: #
if (file == null)
<span style="color: #
<span style="color: #
context.Response.Write("error|file is null");
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
string Url = "http://192.168.0.20:8099/IMG/";
<span style="color: #
<span style="color: #
string path = context.Server.MapPath("/Upader/Img/");
//存储图片的文件夹
<span style="color: #
if (!Directory.Exists(path))
<span style="color: #
<span style="color: #
Directory.CreateDirectory(path);
<span style="color: #
<span style="color: #
<span style="color: #
string originalFileName = file.FileN
<span style="color: #
string fileExtension = originalFileName.Substring(originalFileName.LastIndexOf('.'), originalFileName.Length - originalFileName.LastIndexOf('.'));
<span style="color: #
string currentFileName = (new Random()).Next() + fileE
//文件名中不要带中文，否则会出错
<span style="color: #
//生成文件路径
<span style="color: #
string imagePath =
path + currentFileN
<span style="color: #
<span style="color: #
//保存文件
<span style="color: #
file.SaveAs(imagePath);
<span style="color: #
<span style="color: #
//获取图片url地址
<span style="color: #
string imgUrl = "./Upader/Img/" + currentFileN
<span style="color: #
<span style="color: #
string Json = "{\"data\": [\"../../" + imgUrl.Replace(@"\", @"/") + "\"],\"errno\":\"0\"}";
<span style="color: #
<span style="color: #
//返回图片url地址
<span style="color: #
context.Response.Write(Json);
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
public bool IsReusable
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
return false;
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: # }
一般处理程序代码
里面需要注意的是下面这几点：
返回的图片格式必须是它官网规定的Json格式返回出去！不然图片会无法接收！
你上传完图片之后所需要做的就只是把图片的名字加上相对路径给返回出去就好！它这个文本框会自动去帮你做完这一切并把图片显示出来！
我当时用这个文本框需要用到的地方就是这些，至于你要想要更多的功能就去他的官网去看它的文档吧！
它一共有两个文档：
& 这个文档说的比较详细
& 这个是它的官网文档
两个文档还是有很大的区别的，建议你两个都看看！
阅读(...) 评论()使用wangEditor富文本编辑器
wangEditor官网地址：
今天忽然想起来搞一下富文本编辑器的使用，本来想用百度的ueditor，但是貌似校园网给墙了。然后从知乎上发现了这个编辑器，优点是界面简洁，文档比较清楚。缺点也显而易见，比较简陋，要求不是很高的话，还是可以的 :)
下载解压完成之后，用到的只有dist这个文件。
作者在看云上发布的手册地址：
前台页面代码：
&meta charset=&UTF-8& /&
&title&&/title&
&!--引入wangEditor.css--&
&link href=&../dist/css/wangEditor.min.css& rel=&stylesheet& type=&text/css& /&
&style type=&text/css&&
.container{
width: 800
margin: 50
.container textarea{
height: 400
&h1&&&/h1&
&form action=&function.php& method=&post&&
&p&&code class=&hljs xml&&&strong&文章标题：&/strong& &/code&&/p&
&p&&code class=&hljs xml&&&input name=&title& type=&text& /& &/code&&/p&
&p&&code class=&hljs xml&&&strong&文章内容：&/strong& &/code&&/p&
&p&&code class=&hljs xml&&&textarea id=&textarea1& name=&content&&&/textarea&&/code&&/p&
&p&&code class=&hljs xml&&&input type=&submit& value=&提交& /& &/code&&/p&
&code class=&hljs xml&&&!--引入jquery和wangEditor.js--&&!--注意：javascript必须放在body最后，否则可能会出现问题--&&script type=&text/javascript& src=&../dist/js/lib/jquery-1.10.2.min.js&&&/script&&script type=&text/javascript& src=&../dist/js/wangEditor.min.js&&&/script&&!--这里引用jquery和wangEditor.js--&&script type=&text/javascript&&
var editor = new wangEditor(&#39;textarea1&#39;);
// 上传图片（举例）
editor.config.uploadImgUrl = &#39;/upload.php&#39;;
editor.config.uploadImgFileName = &#39;myFileName&#39;;
editor.create();
为了简单起见，我采用了form的提交方式，action对应的function.php文件代码如下：
function.php的作用就是看富文本编辑器提交过去的数据，在实际应用中$_REQUEST[&content&]的内容是会保存到中的。
在前段代码中我们可以看到通过editor.config.uploadImgUrl = &#39;/upload.php&#39;;
配置了图片上传的操作页面，upload.php
upload.php的作用是在后台实现图片的转存，然后将图片的实际地址返回。最新版wangEditor：
配置说明：
demo演示：
下载地址：
-------------------------------------------------------------------------------------------------------------
欢迎关注。
也欢迎关注我的教程：
《》《》《》《》
-------------------------------------------------------------------------------------------------------------
阅读(...) 评论()1.2k 人阅读
标签：至少1个，最多5个
laravel中使用WangEditor及多图上传
1. 创建项目及安装所需安装包
1.1 创建项目
composer create-project laravel/laravel=5.3 blog_wangeditor --prefer-dist
1.2 创建数据库及配置文件
1.3 安装中文包
composer require "caouecs/laravel-lang:~3.0"
安装之后将语言包移动到对应位置就好了，语言包默认位置是resources/lang
cp -a vendor/caouecs/laravel-lang/src/zh-CN resources/lang
修改config/app.php将local的值改为zh-CN
1.4 安装laravel-admin
composer 安装
composer require encore/laravel-admin "1.3.*"
在config/app.php加入ServiceProvider:
Encore\Admin\Providers\AdminServiceProvider::class
php artisan vendor:publish --tag=laravel-admin
php artisan admin:install
1.5 快速生成前端登录注册模块
php artisan make:auth
php artisan migrate
2. 快速生成文章管理
2.1 创建迁移表
php artisan make:migration create_posts_table --create=posts
2.2 修改迁移表database/_191442_create_posts_table.php
public function up()
Schema::create('posts', function (Blueprint $table) {
$table-&increments('id');
$table-&text('title');
$table-&text('subtitle');
$table-&text('cover');
$table-&enum('type', ['0', '1', '2', '3', '4', '5', '9'])-&default('0');
$table-&text('content');
$table-&timestamps();
2.3 执行迁移
php artisan migrate
2.4 创建模型和控制器
php artisan make:model App\\Models\\Post
php artisan admin:make PostController --model=App\\Models\\Post
2.5 新增文章后台路由
Admin/routes.php
$router-&resource('/post', 'PostController');
2.6 修改app/Admin/PostController.php里面的form和grid两个方法
protected function grid()
return Admin::grid(Post::class, function (Grid $grid) {
$grid-&id('ID')-&sortable();
$grid-&title('标题');
$grid-&subtitle('副标题');
$grid-&type('类型')-&options([
'0' =& 'php',
'1' =& 'laravel',
'2' =& 'javascript',
'3' =& 'python',
'4' =& 'golang',
'5' =& 'linux',
'9' =& 'other'
$grid-&cover('封面')-&image('/uploads', 100, 100);
$grid-&content('内容')-&limit(100);
$grid-&created_at('创建时间');
$grid-&updated_at('修改时间');
protected function form()
return Admin::form(Post::class, function (Form $form) {
$form-&display('id', 'ID');
$form-&text('title', '标题');
$form-&textarea('subtitle', '副标题')-&rows(3);
$form-&select('type', '类型')-&options([
'0' =& 'php',
'1' =& 'laravel',
'2' =& 'javascript',
'3' =& 'python',
'4' =& 'golang',
'5' =& 'linux',
'9' =& 'other'
$form-&image('cover', '封面');
$form-&editor('content', '内容');
$form-&display('created_at', '创建时间');
$form-&display('updated_at', '修改时间');
3. 集成WangEditor编辑器
3.1 移除已有组件
修改app/Admin/bootstrap.php
use Encore\Admin\F
Form::forget('map');
Form::forget('editor');
Form::forget(['map', 'editor']);
3.2 集成富文本编辑器wangEditor
先下载前端库文件，解压到目录public/vendor/wangEditor-3.0.9。
然后新建组件类app/Admin/Extensions/WangEditor.php。关于WangEditor设置部分请阅读
namespace App\Admin\E
use Encore\Admin\Form\F
class WangEditor extends Field
protected $view = 'admin.wang-editor';
protected static $css = [
'/vendor/wangEditor-3.0.9/release/wangEditor.min.css',
protected static $js = [
'/vendor/wangEditor-3.0.9/release/wangEditor.min.js',
public function render()
$name = $this-&formatName($this-&column);
$this-&script = &&&EOT
var E = window.wangEditor
var editor = new E('#{$this-&id}');
editor.customConfig.uploadFileName = 'mypic[]';
editor.customConfig.uploadImgHeaders = {
'X-CSRF-TOKEN': $('input[name="_token"]').val()
editor.customConfig.zIndex = 0;
// 上传路径
editor.customConfig.uploadImgServer = '/uploadFile';
editor.customConfig.onchange = function (html) {
$('input[name=$name]').val(html);
editor.customConfig.uploadImgHooks = {
customInsert: function (insertImg, result, editor) {
if (typeof(result.length) != "undefined") {
for (var i = 0; i &= result.length - 1; i++) {
var url = result[i].newFileN
insertImg(url);
toastr.success(result[j]['info']);
switch (result['ResultData']) {
toastr.error("最多可以上传4张图片");
toastr.error("请选择一个文件");
toastr.error("上传失败");
toastr.error(result['info']);
toastr.error("文件类型不合法");
toastr.error(result['info']);
editor.create();
// var editor = new wangEditor('{$this-&id}');
editor.create();
return parent::render();
新建视图文件resources/views/admin/wang-editor.blade.php：
&div class="form-group {!! !$errors-&has($label) ?: 'has-error' !!}"&
&label for="{{$id}}" class="col-sm-2 control-label"&{{$label}}&/label&
&div class="col-sm-{{$width['field']}}"&
@include('admin::form.error')
&div id="{{$id}}" style="width: 100%; height: 100%;"&
&p&{!! old($column, $value) !!}&/p&
&input type="hidden" name="{{$name}}" value="{{ old($column, $value) }}" /&
然后注册进laravel-admin,在app/Admin/bootstrap.php中添加以下代码：
use App\Admin\Extensions\WangE
use Encore\Admin\F
Form::extend('editor', WangEditor::class);
$form-&editor('body');
3.3 完成WangEditor图片上传
3.3.1 创建上传路由routes/web.php
Route::post('/uploadFile', 'UploadsController@uploadImg');
3.3.2 创建上传文件控制器UploadsController
php artisan make:controller UploadsController
修改app\Controllers\UploadsController.php
namespace App\Http\C
use Illuminate\Http\R
class UploadsController extends Controller
public function uploadImg(Request $request)
$file = $request-&file("mypic");
// dd($file);
if (!empty($file)) {
foreach ($file as $key =& $value) {
if ($len & 25) {
return response()-&json(['ResultData' =& 6, 'info' =& '最多可以上传25张图片']);
for ($i = 0; $i &= $ $i++) {
// $n 表示第几张图片
$n = $i + 1;
if ($file[$i]-&isValid()) {
if (in_array(strtolower($file[$i]-&extension()), ['jpeg', 'jpg', 'gif', 'gpeg', 'png'])) {
$picname = $file[$i]-&getClientOriginalName();//获取上传原文件名
$ext = $file[$i]-&getClientOriginalExtension();//获取上传文件的后缀名
$filename = time() . str_random(6) . "." . $
if ($file[$i]-&move("uploads/images", $filename)) {
$newFileName = '/' . "uploads/images" . '/' . $
$m = $m + 1;
// return response()-&json(['ResultData' =& 0, 'info' =& '上传成功', 'newFileName' =& $newFileName ]);
$k = $k + 1;
// return response()-&json(['ResultData' =& 4, 'info' =& '上传失败']);
$msg = $m . "张图片上传成功 " . $k . "张图片上传失败&br&";
$return[] = ['ResultData' =& 0, 'info' =& $msg, 'newFileName' =& $newFileName];
return response()-&json(['ResultData' =& 3, 'info' =& '第' . $n . '张图片后缀名不合法!&br/&' . '只支持jpeg/jpg/png/gif格式']);
return response()-&json(['ResultData' =& 1, 'info' =& '第' . $n . '张图片超过最大限制!&br/&' . '图片最大支持2M']);
return response()-&json(['ResultData' =& 5, 'info' =& '请选择文件']);
3.3.3 修改config/admin.php upload里面的host
'disk' =& 'admin',
'directory'
=& 'image',
=& 'file',
// 将upload改为uploads
'host' =& 'http://localhost:8000/uploads/',
可以看出WangEditor上传多图是没有问题的
可是有时候我们想给文章配多个封面图怎么办？下面我们就来完成，laravel-admin的多图上传。
4. laravel-admin 多图上传
4.1 修改app/Admin/PostController里面的form()方法
将$form-&image('cover', '封面');修改为$form-&multipleImage('cover', '封面');
4.2 创建图片修改器
laravel修改器使用说明，请阅读在app/Models/Post.php里增加setCoverAttribute()和setCoverAttribute两个方法
namespace App\M
use Illuminate\Database\Eloquent\M
class Post extends Model
public function setCoverAttribute($cover)
if (is_array($cover)) {
$this-&attributes['cover'] = json_encode($cover);
public function getCoverAttribute($cover)
return json_decode($cover, true);
原文地址github地址
1 收藏&&|&&2
你可能感兴趣的文章
[laravel中使用WangEditor及多图上传(下篇)](https://segmentfault.com/a/0801)
执行php artisan admin:make PostController --model=App\Models\Post
[SymfonyComponentDebugExceptionFatalThrowableError]
Parse error: syntax error, unexpected '' (T_NS_SEPARATOR), expecting identifier (T_STRING)，请问这是怎么回事啊？
执行php artisan admin:make PostController --model=App\\Models\\Post
[Symfony\Component\Debug\Exception\FatalThrowableError]
Parse error: syntax error, unexpected &#039;\&#039; (T_NS_SEPARATOR), expecting identifier (T_STRING)，请问这是怎么回事啊？
语法错误。终端是什么终端，win自带还是git/cmder bash终端，bash终端的话格式是App\\Models\\Post
语法错误。终端是什么终端，win自带还是git/cmder bash终端，bash终端的话格式是`App\\Models\\Post`
phpstorm自带的Terminal
phpstorm自带的Terminal
在laravel-admin1.5引入wangeditor报如下错误，请问是什么原因：Type error: Argument 1 passed to EncoreAdminForm::pushField() must be an instance of EncoreAdminFormField, instance of AppAdminExtensionsWangEditor given, called in /home/vagrant/code/qualifyhelper/vendor/encore/laravel-admin/src/Form.php on line 1382
在laravel-admin1.5引入wangeditor报如下错误，请问是什么原因：
Type error: Argument 1 passed to Encore\Admin\Form::pushField() must be an instance of Encore\Admin\Form\Field, instance of App\Admin\Extensions\WangEditor given, called in /home/vagrant/code/qualifyhelper/vendor/encore/laravel-admin/src/Form.php on line 1382
你可能感兴趣的文章
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。