bootstrap-markdown icon indicating copy to clipboard operation
bootstrap-markdown copied to clipboard

Dropzone implementation docs?

Open royduin opened this issue 8 years ago • 1 comments

Maybe add some information about how to implement Dropzone in the Bootstrap Markdown editor?

How I've implemented it in my Laravel 5.4 project;

package.json:

"bootstrap-markdown": "toopay/bootstrap-markdown",
"dropzone": "^5.1.1",
"markdown": "^0.5.0",

I'm using toopay/bootstrap-markdown there so NPM will get it from Github instead of fetching the latest version which doesn't include Dropzone support, see: https://github.com/toopay/bootstrap-markdown/issues/301

bootstrap.js

window.dropzone = require('dropzone');
window.markdown = require('markdown').markdown;
require('bootstrap-markdown/js/bootstrap-markdown.js');

app.scss

@import "node_modules/dropzone/dist/basic";

markdown.js

window.dropzone.autoDiscover = false;
(function(){
    $('textarea.markdown').markdown({
        dropZoneOptions: {
            url: '/media/upload,
            headers: {
                'X-CSRF-Token': document.head.querySelector('meta[name="csrf-token"]').content
            }
        }
    });
})();

MediaController.php

/**
 * Store a newly created resource in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Http\Response
 */
public function store(Request $request)
{
    $validator = Validator::make($request->all(), ['file' => 'required|image']);

    if ($validator->fails()) {
        return response($validator->errors()->first(), 422);
    }

    return response(env('APP_URL').'/uploads/'.$request->file->store(date('Y'), 'uploads'));
}

To use it, create a textarea with the markdown class in one of your Blade/HTML templates.

This is working nicely, but this fix is needed else the styling isn't correct: https://github.com/toopay/bootstrap-markdown/pull/302

royduin avatar Aug 17 '17 13:08 royduin

I'm not sure how to add this onto the doc - since this most likely is edge case for common user. Maybe in the future i'll collect this kind of "Nice to know" stuff into wiki.

toopay avatar Aug 21 '17 12:08 toopay