inacho/bootstrap-markdown-editor

Markdown editor for Bootstrap with preview, image upload support, shortcuts and other features.

Bootstrap Markdown Editor

Markdown editor for Bootstrap with preview, image upload support, shortcuts and other features.
This is a jQuery plugin.

Demo: http://inacho.github.io/bootstrap-markdown-editor/

Requirements

• Bootstrap 3
• jQuery
• Ace editor (http://ace.c9.io)

Features

• Preview support
• Image upload support (drag and drop & button)
• Shortcuts
• Multiples instances on the same page
• Fullscreen
• Themes
• i18n

Screenshot

Installation with Bower

bower install bootstrap-markdown-editor --save

Example Usage

Include the CSS files of Bootstrap and Bootstrap Markdown Editor:

<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bower_components/bootstrap-markdown-editor/dist/css/bootstrap-markdown-editor.css" rel="stylesheet">

Include the scripts of jQuery, Ace and Bootstrap Markdown Editor. Optionally, include the script of Bootstrap to enable tooltips:

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/ace-builds/src-min/ace.js"></script>
<script src="bower_components/bootstrap-markdown-editor/dist/js/bootstrap-markdown-editor.js"></script>

Create a textarea for the editor with optional content in markdown format:

<textarea name="text" id="myEditor"># Test</textarea>

Initialize the editor:

$('#myEditor').markdownEditor();

Implementing the preview

You have to implement the parsing of the Markdown.
Bootstrap Markdown Editor provides you a callback where you have to parse the markdown and return the html.
To activate the preview you have to use the following options:

$('#myEditor').markdownEditor({
  // Activate the preview:
  preview: true,
  // This callback is called when the user click on the preview button:
  onPreview: function (content, callback) {

    // Example of implementation with ajax:
    $.ajax({
      url: 'preview.php',
      type: 'POST',
      dataType: 'html',
      data: {content: content},
    })
    .done(function(result) {
      // Return the html:
      callback(result);
    });

  }
});

Implementing the image upload

You have to implement the server side part of the upload process.
To activate the image uploads you have to use the following options:

$('#myEditor').markdownEditor({
  imageUpload: true, // Activate the option
  uploadPath: 'upload.php' // Path of the server side script that receive the files
});

In your server side script you have to return an array of the public path of the successfully uploaded images in json format.

Example in PHP:

$uploadedFiles = array();

if (! empty($_FILES)) {
  foreach ($_FILES as $file) {
    if (superAwesomeUploadFunction($file)) {
      $uploadedFiles[] = '/img/' . urlencode($file['name']);
    }
  }
}

echo json_encode($uploadedFiles);

Response example:

["/path/to/my-picture.jpg"]

Shortcuts

The following shortcuts are available.
They can be used with or without selected text.

• Ctrl-B / ⌘B: Bold
• Ctrl-I / ⌘I: Italic
• Ctrl-K / ⌘K: Link

Plugin documentation

Options

The following options can be passed as an object at the initialization of the plugin:

$('#myEditor').markdownEditor({
  // Options
});

Also, you can override the plugin default options. Example:

$.fn.markdownEditor.defaults.width = '250px';

width

Type: string
Default: '100%'

The width of the editor

height

Type: string
Default: '400px'

The height of the editor

fontSize

Type: string
Default: '14px'

The font size of the editor

theme

Type: string
Default: 'tomorrow'

The theme of the editor. See the available themes at the homepage of Ace (http://ace.c9.io)

softTabs

Type: boolean
Default: true

Pass false to disable the use of soft tabs. Soft tabs means you're using spaces instead of the tab character ('\t')

fullscreen

Type: boolean
Default: true

Enable / disable fullscreen

imageUpload

Type: boolean
Default: false

Enable / disable the upload of images. If enabled, you have to specify the option uploadPath

uploadPath

Type: uploadPath
Default: ''

The path of the server side script that receives the images. The script has to return an array of the public path of the successfully uploaded images in json format.

preview

Type: boolean
Default: false

Enable / disable the preview. If enabled, you have to specify the option onPreview

onPreview

Type: function
Default:

function (content, callback) {
  callback(content);
}

This callback is called when the user clicks on the preview button and has two parameters:
content that contains the text in markdown.
callback is function that you have to call with the parsed html as a parameter

label

Type: object Default:

{
  btnHeader1: 'Header 1',
  btnHeader2: 'Header 2',
  btnHeader3: 'Header 3',
  btnBold: 'Bold',
  btnItalic: 'Italic',
  btnList: 'Unordered list',
  btnOrderedList: 'Ordered list',
  btnLink: 'Link',
  btnImage: 'Insert image',
  btnUpload: 'Uplaod image',
  btnEdit: 'Edit',
  btnPreview: 'Preview',
  btnFullscreen: 'Fullscreen',
  loading: 'Loading'
}

This object contains the strings that can be translated

Methods

The methods are invoked passing the name of the method as string.

var content = $('#myEditor').markdownEditor('content'); // Returns the content of the editor
$('#myEditor').markdownEditor('setContent', content); // Sets the content of the editor

License

Licensed under MIT (https://github.com/inacho/bootstrap-markdown-editor/blob/master/LICENSE).

Authors

Ignacio de Tomás

bootstrap-markdown-editor's Issues

Spell Checker

How can I enable spellcheck?
Ace editor disables browser spell check by default :s

Chinese isn't friendly

Tab size/characater option

Is it avaiable? if yes how to use ?

Issues with setting content

So I am having issues setting the content after initialization of the markdown editor.

 debugger;  // $scope.candidateInfo.notes <--- has a string in it
$('#editor').markdownEditor('setContent', $scope.candidateInfo.notes);

I get a :

  TypeError: Cannot read property 'env' of undefined

Any idea why? This is the order of execution:

    $('#editor').markdownEditor({
        preview: true,
        onPreview: function (content, callback) {
            callback( marked(content) );
        }
    });


    someService.getById($routeParams.id).then(
        function(response){
            $scope.candidateInfo = response.data;
            debugger;
            $('#editor').markdownEditor('setContent', $scope.candidateInfo.notes);
        }
    );

if it helps it is breaking on this line:

var editor = ace.edit(this.find('.md-editor')[0]);

RIP - use https://github.com/naturtrunken/bootstrap-markdown-editor

this is dead, use this fork: https://github.com/naturtrunken/bootstrap-markdown-editor

on focus on editor going to top of the page

Hello
Greetings

First of all thanks for the plugin. I have integrated with my app in comments section as an comment editor. Its working fine. But when I am focusing on the editor it is taking me to the top of the web page. Please let me know whats the solution for this.

Thanks

Use bootstrap-markdown-editor with knockoutJs

I want to use bootstrap-markdown-editor with knockoutJs, how do this?

problem

Chinese input is not friendly

Custom buttons

Hello,
I think it would be great if we could customize the buttons to add more functionalities, like table or blockquote.
Thanks.

The project is discontinued, let's continue it?

ping @tricknotes @okkez @kle-roy

Guys I think the author @inacho will not continue this project, per months I've trying to talk with him on facebook, here, whatever, no success, no one "Hi" at least.

I have created a fork and redirect all this projects pull requests on there, someone wants to merge this pull requests? I will grant write permissions, all pull requests have no conflicts although need to be tested on merge.

This project is really nice, I think that continue it will be a good thing.

The project links is https://github.com/mageddo/bootstrap-markdown-editor

HTML tag can not filter XSS

Input text box, enter the following:

http://www.example.com/<script>alert(document.cookie)</script>

Here is the test code, click preview trigger : )

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>editor</title>
</head>
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/bootstrap-markdown-editor.css" rel="stylesheet">
<script src="/static/js/jquery-1.7.2.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/ace.js"></script>
<script src="/static/js/bootstrap-markdown-editor.js"></script>
<body>
<div id="myEditor" name="myEditor">http://www.example.com/&lt;script&gt;alert(document.cookie)&lt;/script&gt;</div>
<script language="javascript">
  $('#myEditor').markdownEditor({
  preview: true,
  onPreview: function (content, callback) {
    $('#myEditor').html(content);
  }
});
</script>
</body>
</html>

Submitted twice use ajax

I use an external js file to achieve ajax, then when I submit he will become submitted twice, how can I do it? Thank you

Markdown to html using markdown.js and to-markdown.js

Is it absolutely necessary to have an endpoint translating from markdown to html?

In bootstrap-markdown.js they use bootstrap.js and to-bootstrap.js to automatically transform mardown to html. Is it possible to do the same with bootstrap-markdown-editor?

Thanks

Markdown y Symfony

Hola Ignacio,
¿Tienes algún ejemplo implementado con symfony? Estoy intentando de implementarlo, pero no sé que estoy haciendo mal (seguro que es una tontería pero..)
He insertado el editor y funciona, pero en la opción de preview me carga toda la página actual en el textarea.

{{ form_row(form.content) }}

En javascript:
$.ajax({
url: '{{ path('admin_content_new', {'type': type}) }}',
type: 'POST',
dataType: 'html',
data: {content: content},
})

un saludo
gracias

Enable side by side live preview on full screen mode

It'd be good to have this feature as it would make a better use of the available width in wide screens. Some examples:

• http://epiceditor.com/
• https://stackedit.io/editor
• http://dillinger.io/

It'd also give you a differentiator factor against other bootstrap based markdown editors

NPM Support

Please add npm support.
$ npm install bootstrap-markdown-editor

Please update the dependencies to the latest version

Thanks for the great markdown editor and please update dependencies such as bootstrap and ace-builds to the latest versions.

Bower installs to folder "Bootstrap Markdown Editor"

"bower install --save bootstrap-markdown-editor"
...installs to a "Bootstrap Markdown Editor" directory

Can we make the default directory "bootstrap-markdown-editor" (without spaces) which would conform to other bower component installations?

Probably not worth going through a pull request as it should be a fairly simple change for the repo owner.

NOTE: I have a custom Bower installation directory with a .bowerrc file:

{
"directory":"public/src/components"
}

Maybe this is the reason?

change direction of textarea

I change the direction of every thing in css style to rtl
*{ direction : rtl; text-align: right; }

The issue not is the cursor in textarea remains on the left. However when I use normal textarea tag it goes to the right.

how can i POST data with parameter of uploadPath ？

can't work with Textarea?

like <textarea id="editor">adsf</textarea>

How to enable textarea?

Image upload feature is not working in IE 11

I am using image upload feature of the editor. I have enabled the feature by setting imageUpload: true. While the feature works just fine in chrome it does not work in IE 11. In IE 11 I do not see the file upload window. There is no error on the console.

Upon further investigation I found, a button tag is generated around file upload control. If we remove the button tag and convert it into a div tag, everything is working fine.

Tab is ignored on first line

If a put a text with tab on first line(like a code) this tab is ignored on editor , the bug can be reproduced here

<script>
$('#myEditor').markdownEditor({
  // Options
});
</script>
<div id="myEditor">
    System.out.println();
</div>

Support for lists (ordered and unordered)

Thanks for the great editor.

Are there any plans to provide buttons / highlighting for lists <ul> and <ol>?

* Item
* Item
* Item

1. Numbered item
2. Numbered item
3. Numbered item

Given methods not working

Hi @inacho
$('#myEditor').markdownEditor('content'); => returns "" even though I have content in editor
$('#myEditor').markdownEditor('setContent','abcdef') => not working
Please help in fixing.

Thanks