Laravel 使用 Markdown 做文章編輯後臺

1.composer安裝指定的包

composer require chenhua/laravel5-markdown-editor

2.在 config/app.php 中 providers 中新增

Chenhua\MarkdownEditor\MarkdownEditorServiceProvider::class,

3.修改 config/app.php 中 aliases 中新增

'MarkdownEditor' => Chenhua\MarkdownEditor\Facades\MarkdownEditor::class,

4.執行 artisan 命令，生成 config/markdowneditor.php 配置檔案

php artisan vendor:publish --tag=markdown

5.修改 config/markdowneditor.php 配置檔案

<?php
return [
    "default"     => 'local', //預設返回儲存位置url.也可以設定七牛上傳路徑,阿里雲端儲存檔案等等
    "dirver"      => ['local'], //儲存平臺 ['local', 'qiniu', 'aliyun']
    "connections" => [
        "local"  => [
            'prefix' => 'uploads/markdown', //本地儲存位置，預設uploads
        ],
        "qiniu"  => [
            'access_key' => '',
            'secret_key' => '',
            'bucket'     => '',
            'prefix'     => '', //檔案字首 file/of/path
            'domain'     => '' //七牛自定義域名
        ],
        "aliyun" => [
            'ak_id'     => '',
            'ak_secret' => '',
            'end_point'  => '',
            'bucket'    => '',
            'prefix'    => '',
        ],
    ],
];

6.建立view頁面 index.blade.php.然後新增指定程式碼:

 <form method="post" action="{{route('admin.eidt')}}">
        <div id="test-editormd">
            <textarea name="test-editormd" style="display:none;"></textarea>
        </div>
        @include('markdown::encode',['editors'=>['test-editormd']])
        <button type="submit" class="btn btn-primary">提交</button>
    </form>
    <script>
    var testEditor = editormd("test-editormd",{
        width :"90%",
        height :640,
        path :"../vendor/markdown/lib/",
        saveHTMLToTextarea :true
  });
  testEditor.getHTML();// 獲取 Textarea 儲存的 HTML 原始碼\
</script>

7.建立控制器開啟指定頁面

  //主頁顯示
    public function index(Request $request)
    {
        return view('index');
    }
    //提交
    public function add(Request $request)
    {
        $content = $request->input('test-editormd-html-code');
        $article=Article::create($content);
    }

希望有能力的同學還是把markdown頁面寫到vue裡面,不建議直接寫到laravel專案裡面,我這裡只是一個案例測試.

首先下載相關的包

npm install mavon-editor --save

編輯提交模板

<template>
    <div class="max-w">
        <el-form ref="form" :model="form" label-width="80px" @submit.prevent="onSubmit" style="padding-top:20px;">
            <el-form-item label="內容" >
                <mavon-editor v-model="form.content" :toolbars="toolbars" />//主要是加這一句話
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button @click.native.prevent>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

//設定輸出方式
export default {
    name: 'markdown',
    data(){
        return {
            form: {
   title: '',
   tags: '',
   content: ''
},
 toolbars: {
  bold: true, // 粗體
  italic: true, // 斜體
  header: true, // 標題
  underline: true, // 下劃線
  mark: true, // 標記
  superscript: true, // 上角標
  quote: true, // 引用
  ol: true, // 有序列表
  link: true, // 連結
  imagelink: true, // 圖片連結
  help: true, // 幫助
  code: true, // code
  subfield: true, // 是否需要分欄
  fullscreen: true, // 全屏編輯
  readmodel: true, // 沉浸式閱讀
  /* 1.3.5 */
  undo: true, // 上一步
  trash: true, // 清空
  save: true, // 儲存（觸發events中的save事件）
  /* 1.4.2 */
  navigation: true // 導航目錄
  }
        }
    },
//ajax請求後端資料
     methods: {
       onSubmit() {
           let t = this;
           let form = t.form;
           addArticle({
content: form.content
  }).then((res)=>{
           if(res && res.code == 200){
           console.log('新增成功')
           this.$router.push({ path: "/list"});
              }
           })
       },

詳情展示模板

<template>
  <div class="item max-w">
    <mavon-editor
      class="md"
     :value= "context.content"
     :subfield = "prop.subfield"
     :defaultOpen = "prop.defaultOpen"
     :toolbarsFlag = "prop.toolbarsFlag"
     :editable= "prop.editable"
     :scrollStyle= "prop.scrollStyle"
  ></mavon-editor>
  </div>
</template>
export default {
  name: 'detail',
  props: {
    msg: String
  },
  data(){
    return {
      context: '',
      articleDetail: '',
      prop: {
        subfield: false,// 單雙欄模式
  defaultOpen: 'preview',//edit： 預設展示編輯區域 ， preview： 預設展示預覽區域 
 editable: false,
        toolbarsFlag: false,
        scrollStyle: true
  }
    }
  },
  //ajax請求後端資料
  methods: {
    getDetails(){
      let t = this;
      let id = t.$route.query.id;
      api.getDetail({
        id: id\
  }).then((res)=>{
        console.log(res)
        if(res && res.data && res.data && res.data.data){
          let result = res.data.data;
          t.context = result
       }
      })
    }
  },
  mounted() {
    let t = this;
    t.getDetails();
  },
}

//新增
  public function add(Request $request)
    {
        $article=Article::updateOrCreate(['id' => $request->id],$content );//這裡直接存資料庫就行
         return $this->output(null, '請求成功', STATUS_OK);
    }
//顯示
    public function detail(ArticleIdRequest $request)
    {
        $data=Article::where('id',$request->id)->first();
        //直接從資料庫拿出來就行，如果是laravel的composer包這裡編輯的話需要有markdown的解析函式，
        //搭配。後端不用操心。
         return $this->output($data, '請求成功', STATUS_OK)；
    }

顯示效果

順便再看下不同方式的資料庫資料儲存方式

哈哈，這樣就解放了後端的的很多操作。
一開始想著資料庫直接存html頁面，然後詳情顯示的時候再去解析，這樣麻煩，直接讓vue顯示的時候只顯示分欄的 一部分就好了。

本作品採用《CC 協議》，轉載必須註明作者和本文連結