Bootstrap plugin for markdown editing

Overview

Bootstrap Markdown

Markdown editing meets Bootstrap.

Demo and documentation available at http://toopay.github.io/bootstrap-markdown/

Compatibility

Version Compatibility
v2.x only Bootstrap 3.x
v1.x only Bootstrap 2.x

LICENSE

Copyright 2013-2016 Taufan Aditya

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Comments
  • Fullscreen Support

    Fullscreen Support

    This is a beta support for fullscreen. I was working on my project and would be nice to have a fullscreen feature so I added one. :smile:

    Here is sample plunk: http://embed.plnkr.co/atyuBnVNktl8YSfdfPJT/preview

    opened by lodev09 16
  • Support dropzone for file uploads

    Support dropzone for file uploads

    My first advance on direction to implement #182 Not finished. Needs adding http://www.dropzonejs.com library for it to work. https://raw.github.com/enyo/dropzone/master/dist/dropzone.js

    Any advice or a hand to complete it are very welcome.

    opened by jacargentina 15
  • Support any markdown parser via option

    Support any markdown parser via option

    This permits any parser to be used regardless of its interface. My reason for wanting this is that I'd like to use markdown-it since it is stricter, as both markdown.js and marked share the same XSS vulnerability. The problem is that markdownit is not referred to as markdown or marked in the window namespace, and its function for converting markdown to HTML is named render rather than toHTML.

    This change will allow a new parse option to be supplied when calling bootstrap-markdown's $.fn.markdown method, which is a function definition that is called in place of the existing options. (I maintained the existing options for backward compatibility.) For example:

    var md = markdownit();
    
    $('[data-provide="markdown-editor"][data-preview]').markdown({
      parser: md.render.bind(md),
      onChange: function (e) {
        var $preview = $(e.$textarea.data('preview'));
        $preview.html(e.parseContent());
      }
    });
    
    opened by mhuggins 15
  • Few Options and events

    Few Options and events

    I've added some options, methods and events that fixes some issues submitted by other users and also enhances the plugin.

    Added events:

    • _onChange_ - This will trigger every time you typed in anything on the textarea. The event is triggered by keyup, callbacks from each menu buttons and native textarea.on('change', ... ) event

    Added methods:

    • _hideButtons(name)_ - Completely hide the specified buttons by name. Using hidden class in boostrap.
    • _showButtons(name)_ - Opposite to hideButtons()
    • _parseContent()_ - Parsing the content is now separated, so you can always call this function to parse the textarea content.

    Enhancement:

    • On showButtons, hideButtons, disableButtons and enableButtons methods, the name parameter can now be either an array or string

    Fixes:

    • I've noticed on the current version, keyup is triggering _3x_ because of keypress and keydown events. I've commented these lines to avoid redundancy of keyup trigger.

    Sample Implementation:

    This code will output the preview in a separate div instead of the native preview button

    // get the preview div
    var $previewContainer = $('#post-md-preview');
    
    // hide first
    $previewContainer.hide();
    
    // init
    $("#post-md").markdown({
        autofocus: false,
        resize: 'vertical',
        height: 200,
        onShow: function(e) {
            e.hideButtons('cmdPreview');
    
                    // in case you have default value
            e.change(e);
        },
        onChange: function(e) {
                    // parse and get the parsed content
            var content = e.parseContent();
    
                    // display preview :)
            if (content === '') $previewContainer.hide();
            else $previewContainer.show().html(content);
        }
    });
    
    opened by lodev09 13
  • *jquery* and *bootstrap-markdown* Preview/Exit full screen buttons unresponsiveness

    *jquery* and *bootstrap-markdown* Preview/Exit full screen buttons unresponsiveness

    opened by Martii 10
  • this.$textarea.on(...).on(...).on is not a function

    this.$textarea.on(...).on(...).on is not a function

    I am getting the following error:

    this.$textarea.on(...).on(...).on is not a function
    

    image

    image

    It used to work fine 10 minutes ago. I did not make any changes to this.

    opened by simplenotezy 10
  • internationalization

    internationalization

    add internationalization support and french translation

    how to

    • include js/locales/bootstrap-markdown.fr.js
    • setup {locale: 'fr'} option when instance
    opened by bierdok 9
  • Removed the import dependency for twitter bootstrap

    Removed the import dependency for twitter bootstrap

    We should just deliver a .less file to apply the styling for the markdown editor. The user itself should create a wrapper where they include the mixins.less and variables.less them self. This will fix the issue as reported in #71 where a user need to modify the less file and so will updating become difficult!

    opened by acrobat 8
  • More accurate toolbar button construction

    More accurate toolbar button construction

    Hi! I've noted there was some unwanted CSS classes on the Preview button, so I've rewrote toolbar buttons creation routine in a jQuery-way.

    Before: screenshot 2014-09-10 02 53 32

    After: screenshot 2014-09-10 03 44 24

    P.S. I use custom button styles, that's why my buttons doesn't look like standard BS3 flat buttons.

    opened by duhast 7
  • Unable to mix html tags with the editor

    Unable to mix html tags with the editor

    When i try to mix an image tag or div or a table tag of html with the markdown it gets interpreted as a string and does not render the content correctly.

    opened by ajeeshpu 6
  • Doesn't work in IE8

    Doesn't work in IE8

    Is that a known issue?

    For example I cannot make text italic on your demo page http://toopay.github.io/bootstrap-markdown/ when using IE 8. Clicking the I icon produces a js error:

    SCRIPT438: Object doesn't support property or method 'indexOf' 
    bootstrap-markdown.js, line 154 character 11
    
    opened by ncri 6
  • Scroll of editor changes after pressing 'Enter'

    Scroll of editor changes after pressing 'Enter'

    Current behavior: It can be reproduced on your demo page, put cursor in middle of any text and press 'Enter', then scroll will move edited row to the top or bottom of text area.

    Expected/desired behavior: Not to change scroll after pressing 'Enter' key.

    opened by TinkyWinky7879800 0
  • Upload of non-image files

    Upload of non-image files

    Currently if you enable dropdown and drag-n-drop a non-image file it will try to render the file as an image. It would be nice to support any sort of file being uploaded instead of just images.

    I was able to get this working by making these modifications to the drop zone success handler:

                options.dropZoneOptions.init = function() {
                  var caretPos = 0;
                  this.on('drop', function(e) {
                      caretPos = textarea.prop('selectionStart');
                    });
                  this.on('success', function(file, path) {
                    console.log("success", file, path);
                      var url = window.URL || window.webkitURL;
                      var image = new Image();
                      image.onload = function() {
                        var text = textarea.val();
                          textarea.val(text.substring(0, caretPos) + '\n!['+file.name+'](' + path + ')\n' + text.substring(caretPos));
                        url.revokeObjectURL(image.src);
                      };
                      image.onerror = function() {
                        var text = textarea.val();
                          textarea.val(text.substring(0, caretPos) + '\n['+file.name+'](' + path + ')\n' + text.substring(caretPos));
                        url.revokeObjectURL(image.src);
                      };
                      image.src = url.createObjectURL(file);
                  });
                  this.on('error', function(file, error, xhr) {
                      console.log('Error:', error);
                    });
                };
    

    This also isn't dependent on the extension of the file because it tries to render the image using javascript and listens to the events. This works great for me and now non-image files are rendered as links instead.

    If we decide to do a PR to merge this in we may want to change the image upload button to a file upload button.

    opened by skylord123 0
  • Can Cmd-I and Cmd-B for italics and bold be made to work on Mac?

    Can Cmd-I and Cmd-B for italics and bold be made to work on Mac?

    It looks like "ctrl" is hard-coded? Surely someone has come up against this before? Is there a config option somewhere to make this just work?

    This is probably more broad but bold and italic are the keystrokes I use all the time. I assume if you fixed one you'd fix them all at the same time.

    opened by joshgoebel 0
  • Close bullet list after hitting enter on empty list line

    Close bullet list after hitting enter on empty list line

    Since I like this convenience on every markdown editor I go, I thought I add this here too. This adds the following behavior:

    Hitting enter on empty list rows, will close the (numbered) bullet list.

    Here an example:

    When having the following content in a textarea (| is representing the caret):

    - list 1
    - |
    
    something more...
    

    After hitting enter the content will now look like this:

    - list 1
    
    |
    
    something more...
    

    instead of this:

    - list 1
    - 
    - |
    
    something more...
    

    I added the same for numbered bullet lists.

    As a bonus, I also fixed the bug, that hitting enter on a line like 9. will misplace the caret about one character, since the length of the old number was used, instead of the added 10..

    Note about testing:

    Since there are no tests in this repository, I tested all the cases I could come up with manually.

    If something is missing, or you want to have something changed. I am eager to do it. I would like to have this feature in. :)

    opened by Calamari 0
  • bootstrap-markdown not working

    bootstrap-markdown not working

    "node_modules/bootstrap-markdown/css/bootstrap-markdown.min.css" added in json file "node_modules/bootstrap-markdown/js/bootstrap-markdown.js"

    in in .html file not working,it showing normal textarea

    opened by amithashenoyks 1
Releases(v2.10.0)
  • v2.10.0(Jan 15, 2016)

    a898177 - Jeroen Thora : Fixed events config. Closes #215 bdcea68 - Anton Kochnev : Updated russian localization file 5953ec5 - Jeroen Thora : Expanded url protocol check to allow https, mailto and protocol - less URLs. Fixes : #180 d2c02e4 - Jeroen Thora : Backport persian translation from #166. Closes #166 8b2f478 - Jeroen Thora : Support for requireJS and backbone.js b9f8618 - Jeroen Thora : Added license file and info to bower.json f7476b7 - Magicalex : add some translation fr 2b3c14c - Vít Kabele : Added cs locale c7591ab - Jesus Vilar : Fix conflict 0f491a1 - Dan Storm : Created a Danish language file 9f63ef5 - Christian Kosmowski : Merge additional buttons into existing groups if the group name matches an existing group. #184 de2600a - LECKERBEEFde : Fix typo

    Source code(tar.gz)
    Source code(zip)
  • v2.9.0(Apr 22, 2015)

    • f94a8d5 - Taufan Aditya : Fix exit preview size #165
    • 67d6105 - Taufan Aditya : Fix duplicate preview element #170
    • cb81c91 - Taufan Aditya : Merge pull request #173 from DavorPadovan/master
    • 495d875 - Davor Padovan : Slovenian translation.
    • c2ab87f - Jeroen Thora : Merge pull request #167 from mhuggins/support-all-markdown-libraries
    • fced7dc - mhuggins : Support any markdown parser via option
    • bf29489 - Taufan Aditya : Merge pull request #157 from web777/master
    • 411b7b0 - Taufan Aditya : Merge pull request #158 from labilbe/master
    • 08ea782 - Franck Quintana : Added ";" to the end of javascript file
    • 897c55e - Franck Quintana : Fix bad comment on header
    • 3a81736 - WebMaster : added onSelect event
    • 0c2f2a8 - Taufan Aditya : Add explicit license that comply with bootstrap [#123]
    • e1a5f7f - Taufan Aditya : Merge pull request #147 from Martii/fixPackageJSONrepo
    • d4ea427 - Martii : Fix unsupported plural of repository in package.json
    Source code(tar.gz)
    Source code(zip)
  • v2.8.0(Jan 7, 2015)

    aa111ee - Taufan Aditya : Fix #109 846fb30 - Taufan Aditya : Fix #103 a656b66 - Marek Kaput : Added Polish translation 546345d - Jeroen Thora : jshint fixes d6262b9 - David Underhill : support a comma-separated list of button names e86d54d - Wasil Siargiejczyk : Update bootstrap-markdown.ru.js 98986e1 - Jeroen van Warmerdam : Support code blocks; 18589b8 - Leandro Poblet : Spanish translation 642d8dd - Kenan Bek : Demo and Documentation link. d1bad4c - leider : Adding missing translation keys 54298ed - Geoapi : Adding Arabic Translation 1dda9c6 - Sam Kuehn : use fa-header instead on fa-font for header button ed81eab - benhaile : Update bootstrap-markdown.zh.js 442baaf - Jeroen Thora : Changed twitter bootstrap version constraint, fixes #117 dbc6996 - benhaile : bootstrap-markdown.zh.js 3a7ffb9 - kntmrkm : 'ja' locale file added. 9596a58 - tobias-nitsche : Added german localization 363c69d - Luca Ongaro : do not stop propagation of click/focusin, plus some refactoring

    Source code(tar.gz)
    Source code(zip)
  • v2.7.0(Sep 10, 2014)

    • Ignore node module dir 1482c94
    • Allow nested bold and italic 3d0ac99
    • Alleviate XSS input Ref #98 3d0ac99
    • #102 from @duhast button-constructor df249e2
    • #100 from @kaisercrazy Turkish translation 58f4426
    • #99 from @lodev09 full-screen support fa9a64e
    • #97 from @acrobat regression-fix 906a6d7
    Source code(tar.gz)
    Source code(zip)
  • v2.6.0(Aug 19, 2014)

    • Merge pull request #85 from acrobat/less-import-fix 8d542a5
    • Merge pull request #93 from lodev09/master e3a0c1d
    • Merge pull request #86 from futhr/numeric-typo e5d8113
    • Merge pull request #89 from futhr/js-hint-locales c24eeaf
    • Merge pull request #88 from futhr/nb-locale 5f239b4
    • Merge pull request #90 from futhr/copy-year 7af516a
    • Merge pull request #87 from futhr/sv-locale ef0f7e4
    • Merge pull request #91 from futhr/gitignore 998b6bb
    • Revert "Revert "Disabled buttons on Preview"" 2546c55
    • Revert "Disabled buttons on Preview" ae97880
    • Disabled buttons on Preview caf303a
    • Fixes typo numeric to number. 7548400
    • JS hinted locales. 6e40022
    • Add Norwegian locale. 9132f69
    • Add Swedish locale. 0f350bc
    • Update copyright year. 7303d1c
    • Add .gitignore 46afe47
    • Removed the import dependency for twitter bootstrap. fixes #71 bfbdfb6
    • Merge pull request #77 from acrobat/resize-fix 1a0ef3e
    • Merge pull request #79 from ssinss/patch-1 9e6f963
    • Merge pull request #80 from duhast/master 2207f0f
    • Bump minor version 7ce99e5
    • Update bootstrap-markdown.ua.js 188d9dd
    • Ukrainian localization 32a537e
    • Russian localization 44fd6e1
    • Create bootstrap-markdown.kr.js e918c6c
    • Added resize option to preview container 055765f
    Source code(tar.gz)
    Source code(zip)
  • v2.5.0(Jun 28, 2014)

    Added events:

    | Name | Description | | :-: | :-: | | onChange | This will trigger every time you typed in anything on the textarea. The event is triggered by keyup, callbacks from each menu buttons and native textarea.on('change', ... ) event |

    Added methods:

    | Name | Description | | :-: | :-: | | hideButtons | Completely hide the specified buttons by name. Using hidden class in boostrap. | | showButtons | Opposite to hideButtons() | | parseContent | Parsing the content is now separated, so you can always call this function to parse the textarea content |

    Enhancement And Fixes :

    • Out-of-the-box support of jQuery hotkey
    • On showButtons, hideButtons, disableButtons and enableButtons methods, the name parameter can now be either an array or string
    • Avoid redundancy of keyup trigger.

    Ref

    • #61 #72 #75
    • https://github.com/toopay/bootstrap-markdown/commit/f86f7580b38c523de4a8faa2cca369469eee3a42
    • https://github.com/toopay/bootstrap-markdown/commit/f0c383049c857b0ea9e7a537ad80374ed1fbffc0
    Source code(tar.gz)
    Source code(zip)
  • v2.4.0(May 18, 2014)

    • Localization support (#46)
    • Add option to disable or change the resize property (#50)
    • Add an option to reorder the button groups (#45)
    • Added fontawesome 3.x support (#57 https://github.com/toopay/bootstrap-markdown/commit/9f181bea6d3bbe4c2a60e0bca50475d420dab91f)
    Source code(tar.gz)
    Source code(zip)
  • v2.3.1(Mar 8, 2014)

  • v2.2.1(Feb 8, 2014)

    • Added support for marked interpreter. Ref 0087de23c36781a0c6669a4a298fce24d1afa7c6
    • Added package.json. Ref 26416553edc9d4c159d0abf3269c78a227a0a9a1
    • Added support for Font Awesome. Ref #33
    • Set all button type to button to avoid being interpreted as submit. Ref c1a048b4a234d8b52f4956defc2b21481f558f43
    Source code(tar.gz)
    Source code(zip)
  • v2.1.1(Dec 18, 2013)

  • v2.1.0(Oct 21, 2013)

  • v2.0.0(Oct 16, 2013)

  • v1.1.3(Jul 28, 2013)

  • v.1.1.2(Jul 28, 2013)

  • v1.1.1(Jul 28, 2013)

Owner
Refactory
Empowering People Through Programming
Refactory
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 13 Jul 1, 2022
Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Bootstrap Tooltip Custom Class Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4. Define you

Andrei Victor Bulearca 14 Feb 10, 2022
A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

bootstrap-validate A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans. ?? Support us with Developer Merchandise

null 137 Oct 28, 2022
A markdown-it plugin that process images through the eleventy-img plugin. Can be used in any projects that uses markdown-it.

markdown-it-eleventy-img A markdown-it plugin that process images through the eleventy-img plugin. Can be used in any projects that use markdown-it. F

null 22 Nov 16, 2022
A plugin for the Obsidian markdown note application, adding functionality to render markdown documents with multiple columns of text.

Multi-Column Markdown Take your boring markdown document and add some columns to it! With Multi Column Markdown rather than limiting your document lay

Cameron Robinson 76 Nov 28, 2022
An obsidian plugin for uploading local images embedded in markdown to remote store and export markdown for publishing to static site.

Obsidian Publish This plugin cloud upload all local images embedded in markdown to specified remote image store (support imgur only, currently) and ex

Addo.Zhang 6 Oct 9, 2022
Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.

Bootstrap Colorpicker Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4. THIS PROJECT IS NOT MAINTAINED ANYMORE. After almost 10

Javi Aguilar 1.4k Nov 4, 2022
Fancytree - JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading

Fancytree Fancytree (sequel of DynaTree 1.x) is a JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkb

Martin Wendt 2.6k Nov 24, 2022
SimpleEdit is a jQuery plugin for in-place editing.

jQuery SimpleEdit !!! Outdated, use modern tools like Svelte, Vue, React or Angular !!! SimpleEdit is a jQuery plugin for in-place editing. Dependenci

Walter Woshid 3 Aug 9, 2022
Markdown Transformer. Transform markdown files to different formats

Mdtx Inspired by generative programming and weed :). So I was learning Elm language at home usually in the evening and now I am missing all this gener

Aexol 5 Nov 14, 2022
An interactive app that allows adding, editing and removing tasks of a to-do list. Drag-and-drop featured added. Webpack was used to bundle all the Js modules in to one main Js file.

To-do List A to-do list app This app let you to set your own to-do list. Built With HTML CSS JavaScript WebPack Jest Live Page Page Link Getting Start

Kenny Salazar 7 May 5, 2022
Enables creating databases based on files in Obsidian - like Dataview, but with editing!

Obsidian Database Plugin Do you like Dataview plugin for Obsidian? This one is taking Dataview to next level, but not only allowing you to view the da

Łukasz Tomaszkiewicz 105 Nov 21, 2022
A compact JavaScript animation library with a GUI timeline for fast editing.

Timeline.js A compact JavaScript animation library with a GUI timeline for fast editing. Check it out in this example: http://vorg.github.io/timeline.

Marcin Ignac 515 Nov 5, 2022
A simple To-Do list with webpack including the functions of adding, removing, editing and selecting the completed tasks.

Project Name To Do List Built With HTML CSS JS Live Demo To Do List Getting Started To get a local copy up and running: Clone this repository or downl

Rex Soul 14 Aug 25, 2022
A simple To-Do list with webpack including the functions of adding, removing, editing and selecting the completed tasks.

Project Name To Do List Built With HTML CSS JS Live Demo To Do List Getting Started To get a local copy up and running: Clone this repository or downl

Rex Soul 12 Jul 30, 2022
A simple To-Do list with webpack including the functions of adding, removing, editing and selecting the completed tasks.

To Do List To Do List provides you with functionalities such as: adding a Todo to the list removing a Todo from the list editing a Todo in the list ch

Htet Naing 14 Aug 25, 2022
JOSE ZEPEDA 10 Nov 18, 2022
An Obsidian plugin to paste Excel tables as Markdown tables in Obsidian editor.

Obsidian Excel to Markdown Table An Obsidian plugin to paste Excel tables as Markdown tables in Obsidian editor. Demo You can paste the copied Excel d

Ganessh Kumar 96 Nov 26, 2022