---恢復內容開始---

首先先找到一個適合的編輯器是勝利的一步,選擇wangEditor這個編輯器

地址:http://www.wangeditor.com/

然後選擇下載,我是通過網上學習的,所以直接選擇的是2.1.23下載

下載後,將dist中的js/css/fonts,放到public文件夾下

當然後面我們需要查看文檔中的信息 地址:https://www.kancloud.cn/wangfupeng/wangeditor2/113965

下一步:

我們需要把js/css引入html頁面中

<link rel="stylesheet" type="text/css" href="/css/wangEditor.min.css">

<script type="text/javascript" src="/js/wangEditor.min.js"></script>

然後我們需要在要鑲嵌的富文本編輯的頁面地方加入textarea代碼

這時候我們需要寫一個js文件

然後在公共的頁面區引入上面這個js文件

我在我的main.blade.php中引入

<script src="/js/ylaravel.js"></script>

此時,刷新下我們的界面看一下,ok,我們的富文本編輯界面已經完成了

我們在編輯提交後,會發現文本中加了一個<p><p/>的標簽

怎麽處理吶?

我們需要修改模板: 把傳數據的地方進行修改: {!!$post->content!!}

再刷新一下,我們就發現沒有問題了

ok!

下面我們來處理圖片上傳

我們來繼續修改js文件

我們再添加下圖片上傳的路由

Route::post(‘/posts/image/upload‘,‘\App\Http\Controllers\PostController@imageUpload‘);
再在控制裏添加方法
這裏我就先不進行填寫了

我們知道上傳圖片本身就是一個表單提交,所以我們還是需要設置token的
繼續修改js文件
因為js文件無法操作php代碼獲取token的緣故,我們還需要通過csrf文檔這邊查看,發現,可以在html設置
我在main.blade.php的文件中,添加了這句

<meta name="csrf-token" content="{{csrf_token()}}">
這樣的話,需要js去接收token數據
我回到了js文件中修改

var editor = new wangEditor(‘content‘);
editor.config.uploadImgUrl=‘/posts/image/upload‘;
//設置headers
editor.config.uploadHeaders={
  ‘X-CSRF-TOKEN‘:$(‘meta[name ="csrf-token"]‘).attr(‘content‘)
};
editor.create();

接下來,我們就需要找存放圖片的位置
我們一般是存在storage下的public,但是好像訪問的只有public,所以我們需要進行修改

把兩者進行連接,需要php artisan storage link
我們需要去config\filesystems.php文件裏進行修改
default ="public"
運行:
php artisan storage link

ok,在控制器修改下就完成

---恢復內容結束---

laravel富文本編輯和圖片上傳