Laravel Vuejs 实战：开发知乎（6）发布问题

1.view部分：

安装一个扩展包：Laravel-UEditor

  1 composer require "overtrue/laravel-ueditor:~1.0"

配置

添加下面一行到 config/app.php 中 providers 部分：

  1 Overtrue\LaravelUEditor\UEditorServiceProvider::class,

发布配置文件与资源

  1 php artisan vendor:publish --provider=”Overtrue\LaravelUEditor\UEditorServiceProvider”

模板引入编辑器

这行的作用是引入编辑器需要的 css,js 等文件，所以你不需要再手动去引入它们。

  1 @include('vendor.ueditor.assets')

编辑器的初始化

  1 <!-- 实例化编辑器 -->
  2  <script type="text/javascript">
  3      var ue = UE.getEditor('container');
  4      ue.ready(function() {
  5          ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 设置 CSRF token.
  6      });
  7  </script>
  8 
  9 <!-- 编辑器容器 -->
 10  <script id="container" name="content" type="text/plain"></script>
 11

5.4+ 请不要忘记 php artisan storage:link
如果你使用的是 laravel 5.3 以下版本，请先创建软链接：
# 请在项目根目录执行以下命令
$ ln -s `pwd`/storage/app/public `pwd`/public/storage
在 config/ueditor.php 配置 disk 为 'public' 情况下，上传路径在：public/uploads/ 下，确认该目录存在并可写。
如果要修改上传路径，请在 config/ueditor.php 里各种类型的上传路径，但是都在 public 下。
请在 .env 中正确配置 APP_URL 为你的当前域名，否则可能上传成功了，但是无法正确显示。

更多请参考 Laravel-UEditor

在views文件夹下新建一个questions文件夹，并在该子文件夹内新建一个create.blade.php文件，代码如下：

  1 @extends('layouts.app')
  2 @section('content')
  3     @include('vendor.ueditor.assets')
  4     <div class="container">
  5         <div class="row">
  6             <div class="col-md-8 col-md-offset-2">
  7                 <div class="panel panel-default">
  8                     <div class="panel-heading">
  9                         发布问题
 10                     </div>
 11                     <!-- 编辑器容器 -->
 12                     <script id="container" name="content" type="text/plain"></script>
 13                 </div>
 14             </div>
 15         </div>
 16     </div>
 17 
 18     <!-- 实例化编辑器 -->
 19     <script type="text/javascript">
 20         var ue = UE.getEditor('container');
 21         ue.ready(function () {
 22             ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 设置 CSRF token.
 23         });
 24     </script>
 25 
 26 @endsection
 27

注意可以在上一节 Laravel Vuejs 实战：开发知乎（5）设计问题表中提到的命令改成使用

  1   1 php artisan make:model Models/Question -cmr

这样直接就采用了RESTFul式的Controller，比较方便；web.php中也可以直接：

  1 Route::resource(‘questions’,’QuestionController’);

如果已经执行过了，可以删除QuestionController然后执行：

  1 php artisan make:controller QuestionController –r
  2 
  3 或
  4 
  5 php artisan make:controller QuestionController –resource

在web.php 文件中添加一个：

  1 Route::resource('questions', 'QuestionController');

当访问 http://zhihu.test/questions/create 链接的时候会由QuestionController中的create方法来接待，我们需要返回一个view【视图界面】，所以修改添加如下代码：

  1   /**
  2      * Show the form for creating a new resource.
  3      *
  4      * @return \Illuminate\Http\Response
  5      */
  6     public function create()
  7     {
  8         //返回questions文件夹下create.blade.php作为视图
  9         return view('questions.create');
 10     }
 11

结果如下：

正确显示视图，但是我们是需要发布问题，这里只是看到了编辑器，所以我们修改create.blade.php视图代码如下：

注：如果忘记了或者不太清楚questions提交保存的route路由别名，可以用命令行： php artisan route:list ，会列出所有的route路由信息，如图：

Laravel Vuejs 实战：开发知乎 （6）发布问题

1.view部分：

配置

猜你喜欢

Laravel Vuejs 实战：开发知乎（6）发布问题