如何在文章中插入图片

RT:如何在文章中插入多长图片

例如本站里的评论区里面可以添加图片,我想做的是在创建文章的时候插入图片。我一开始是按照这上面的教程来写的Howto : AJAX multiple file upload in Laravel,用的是@JellyBool 跟我说的http://www.dropzonejs.com/ 这个网站的内容。
admin/ArticlesContronller里面加了教程上的一段代码:

public function post_upload(){

        $input = Input::all();
        $rules = array(
            'file' => 'image|max:3000',
        );

        $validation = Validator::make($input, $rules);

        if ($validation->fails())
        {
            return Response::make($validation->errors->first(), 400);
        }

        $file = Input::file('file');

        $extension = File::extension($file['name']);
        $directory = path('public').'uploads/'.sha1(time());
        $filename = sha1(time().time()).".{$extension}";

        $upload_success = Input::upload('file', $directory, $filename);

        if( $upload_success ) {
            return Response::json('success', 200);
        } else {
            return Response::json('error', 400);
        }
    }

因为一开始想测试一下所以一开始代码并没有写进内容里面:

@extends('app')

@section('content')

<div class="container">
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <div class="panel panel-default">
        <div class="panel-heading">新增 Article</div>

        <div class="panel-body">

          @if (count($errors) > 0)
            <div class="alert alert-danger">
              <strong>Whoops!</strong> There were some problems with your input.<br><br>
              <ul>
                @foreach ($errors->all() as $error)
                  <li>{ $error }</li>
                @endforeach
              </ul>
            </div>
          @endif
          <form action="{ url('admin/articles/upload')}" class="dropzone" id="my-awesome-dropzone"></form>
          {!! Form::open(['url'=>'admin/articles/store']) !!}
               <div class="form-group">
                   {!! Form::label('title','标题:') !!}
                   {!! Form::text('title',null,['class'=>'form-control']) !!}
               </div>
               <div class="form-group editor">
                   @include('editor::head')
                   {!! Form::label('content','正文:') !!}
                   {!! Form::textarea('content',null,['class'=>'form-control','id'=>'myEditor']) !!}
               </div>
               <div class="form-group">
                  {!! Form::label('published_at','发布日期') !!}
                  {!! Form::input('date','published_at',date('Y-m-d'),['class'=>'form-control']) !!}
                </div>
                
                <div class="form-group">
                  {!! Form::label('tag_list','选择标签') !!}
                  {!! Form::select('tag_list[]',$tags,null,['class'=>'form-control js-example-basic-multiple','multiple'=>'multiple']) !!}
                </div>
               <div class="form-group">
                   {!! Form::submit('发表文章',['class'=>'btn btn-success form-control']) !!}
               </div>
          {!! Form::close() !!}
                
        </div>
      </div>
    </div>
  </div>
</div>
    <script type="text/javascript">
        $(".js-example-basic-multiple").select2({placeholder: "添加标签"});
    </script> 
@endsection

其中<form action="{ url('admin/articles/upload')}" class="dropzone" id="my-awesome-dropzone"></form>就是上传图片的代码,结果(因为图片比较好说明,所以上传图片了):


出现了一些网页代码,而且那个勾和×都点击不了。
第一个是上传的问题,第二个是怎样可以直接在

 <div class="form-group editor">
   @include('editor::head')
   {!! Form::label('content','正文:') !!}
   {!! Form::textarea('content',null,['class'=>'form-control','id'=>'myEditor']) !!}
</div>

插入图片?

最后真诚感谢@JellyBool 最近多次相助,图片上传弄了3天弄不出来,昨天Jelly跟我说http://www.dropzonejs.com/ 图片上传的,但是弄了好久又弄不出来,是在没办法,又写贴求助。

JellyBool

第一,使用<form action="" class="dropzone" id="my-awesome-dropzone"></form>这种方式使用dropzone的时候,指定你的action

第二,报错的时候用chrome开发者工具看你的post请求,到底返回什么错误。

第三,这个是什么鬼

@include('editor::head')

第四,直接在编辑器textarea使用dropzone的话,js应该要很复杂。不建议

第五,认认真真看文档

Kirits

我的代码排版怎么会这么乱

Kirits

@JellyBool
@include('editor::head')是一个人的markdown编辑器laravel-5-markdown-editor,因为不知道哪里出问题了,它的图片上传不了,所以想着自己去弄个图片上传的功能,我也试过Intervention Image这个,但是都不知道怎样可以将图片插入到正文当中,而且保存到pulic/upload文件夹中

JellyBool

关于代码排版乱得问题,我再check一下

你的这个markdown是好东西啊。你先试试最简单的文件上传试试?

Kirits

@JellyBool 就是一直上传不了,后台显示Uncaught TypeError: $(...).fileUpload is not a function

JellyBool

这个本来就是原来的编辑器还没有完全release,所以,不建议纠结这些东西。原来提供的提供的github代码就是没完全做好,不想改代码的话,就不要纠结这些东西了。

Kirits

@JellyBool 但是图片上传功能还是没有实现,在文章中插入图片

Kirits

@JellyBool 把文章创建对比成你的评论,上传的图片是怎样插入到正文里面的?

JellyBool

仔细看看dropzone的文档吧,里面有一个你可以调用的很多方法,比如有类似这个:

myDropzone.on('success',function(file,response){
     //你的代码逻辑,上传完成之后,得到服务器返回,比如返回了url
});
Kirits

@JellyBool 好的,只能这样了

JellyBool

这种问题不是一两句话说得清楚地。。。

DAngelo-Russell

测试一下test
测试一下

uu_myheart

玩儿挺好