{"id":22739967,"url":"https://github.com/inacho/bootstrap-markdown-editor","last_synced_at":"2025-04-05T22:07:29.780Z","repository":{"id":25813102,"uuid":"29252145","full_name":"inacho/bootstrap-markdown-editor","owner":"inacho","description":"Markdown editor for Bootstrap with preview, image upload support, shortcuts and other features.","archived":false,"fork":false,"pushed_at":"2019-01-24T13:36:42.000Z","size":139,"stargazers_count":294,"open_issues_count":21,"forks_count":73,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-29T17:07:59.456Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/inacho.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-01-14T15:57:28.000Z","updated_at":"2024-11-07T12:01:25.000Z","dependencies_parsed_at":"2022-07-25T14:52:22.523Z","dependency_job_id":null,"html_url":"https://github.com/inacho/bootstrap-markdown-editor","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inacho%2Fbootstrap-markdown-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inacho%2Fbootstrap-markdown-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inacho%2Fbootstrap-markdown-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inacho%2Fbootstrap-markdown-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/inacho","download_url":"https://codeload.github.com/inacho/bootstrap-markdown-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406089,"owners_count":20933803,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-10T23:06:58.117Z","updated_at":"2025-04-05T22:07:29.739Z","avatar_url":"https://github.com/inacho.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bootstrap Markdown Editor\n\n[![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://gruntjs.com/)\n\nMarkdown editor for Bootstrap with preview, image upload support, shortcuts and other features.  \nThis is a jQuery plugin.\n\n**Demo**: http://inacho.github.io/bootstrap-markdown-editor/\n\n## Requirements\n\n* Bootstrap 3\n* jQuery\n* Ace editor (http://ace.c9.io)\n\n## Features\n\n* Preview support\n* Image upload support (drag and drop \u0026 button)\n* Shortcuts\n* Multiples instances on the same page\n* Fullscreen\n* Themes\n* i18n\n\n## Screenshot\n\n![Screenshot 1](screenshots/screenshot-01.png)\n\n## Installation with Bower\n\n    bower install bootstrap-markdown-editor --save\n\n## Example Usage\n\nInclude the CSS files of Bootstrap and Bootstrap Markdown Editor:\n\n```html\n\u003clink href=\"bower_components/bootstrap/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e\n\u003clink href=\"bower_components/bootstrap-markdown-editor/dist/css/bootstrap-markdown-editor.css\" rel=\"stylesheet\"\u003e\n```\n\nInclude the scripts of jQuery, Ace and Bootstrap Markdown Editor.\nOptionally, include the script of Bootstrap to enable tooltips:\n\n```html\n\u003cscript src=\"bower_components/jquery/dist/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"bower_components/bootstrap/dist/js/bootstrap.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"bower_components/ace-builds/src-min/ace.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"bower_components/bootstrap-markdown-editor/dist/js/bootstrap-markdown-editor.js\"\u003e\u003c/script\u003e\n```\n\nCreate a textarea for the editor with optional content in markdown format:\n\n```html\n\u003ctextarea name=\"text\" id=\"myEditor\"\u003e# Test\u003c/textarea\u003e\n```\n\nInitialize the editor:\n\n```javascript\n$('#myEditor').markdownEditor();\n```\n\n## Implementing the preview\n\nYou have to implement the parsing of the Markdown.  \nBootstrap Markdown Editor provides you a callback where you have to parse the markdown and return the html.  \nTo activate the preview you have to use the following options:\n\n```javascript\n$('#myEditor').markdownEditor({\n  // Activate the preview:\n  preview: true,\n  // This callback is called when the user click on the preview button:\n  onPreview: function (content, callback) {\n\n    // Example of implementation with ajax:\n    $.ajax({\n      url: 'preview.php',\n      type: 'POST',\n      dataType: 'html',\n      data: {content: content},\n    })\n    .done(function(result) {\n      // Return the html:\n      callback(result);\n    });\n\n  }\n});\n```\n\n## Implementing the image upload\n\nYou have to implement the server side part of the upload process.  \nTo activate the image uploads you have to use the following options:\n\n```javascript\n$('#myEditor').markdownEditor({\n  imageUpload: true, // Activate the option\n  uploadPath: 'upload.php' // Path of the server side script that receive the files\n});\n```\n\nIn your server side script you have to return an array of the **public path** of the successfully uploaded images in json format.\n\nExample in PHP:\n\n```php\n$uploadedFiles = array();\n\nif (! empty($_FILES)) {\n  foreach ($_FILES as $file) {\n    if (superAwesomeUploadFunction($file)) {\n      $uploadedFiles[] = '/img/' . urlencode($file['name']);\n    }\n  }\n}\n\necho json_encode($uploadedFiles);\n```\n\nResponse example:\n\n```\n[\"/path/to/my-picture.jpg\"]\n```\n\n## Shortcuts\n\nThe following shortcuts are available.  \nThey can be used with or without selected text.\n\n- **Ctrl-B / ⌘B**: Bold\n- **Ctrl-I / ⌘I**: Italic\n- **Ctrl-K / ⌘K**: Link\n\n## Plugin documentation\n\n### Options\n\nThe following options can be passed as an object at the initialization of the plugin:\n\n```javascript\n$('#myEditor').markdownEditor({\n  // Options\n});\n```\n\nAlso, you can override the plugin default options. Example:\n\n```javascript\n$.fn.markdownEditor.defaults.width = '250px';\n```\n\n#### width\n\n**Type**: string  \n**Default**: '100%'\n\nThe width of the editor\n\n#### height\n\n**Type**: string  \n**Default**: '400px'\n\nThe height of the editor\n\n#### fontSize\n\n**Type**: string  \n**Default**: '14px'\n\nThe font size of the editor\n\n#### theme\n\n**Type**: string  \n**Default**: 'tomorrow'\n\nThe theme of the editor. See the available themes at the homepage of Ace (http://ace.c9.io)\n\n#### softTabs\n\n**Type**: boolean  \n**Default**: true\n\nPass false to disable the use of soft tabs. Soft tabs means you're using spaces instead of the tab character ('\\t')\n\n#### fullscreen\n\n**Type**: boolean  \n**Default**: true\n\nEnable / disable fullscreen\n\n#### imageUpload\n\n**Type**: boolean  \n**Default**: false\n\nEnable / disable the upload of images. If enabled, you have to specify the option `uploadPath`\n\n#### uploadPath\n\n**Type**: uploadPath  \n**Default**: ''\n\nThe 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.\n\n#### preview\n\n**Type**: boolean  \n**Default**: false\n\nEnable / disable the preview. If enabled, you have to specify the option `onPreview`\n\n#### onPreview\n\n**Type**: function  \n**Default**:\n\n```javascript\nfunction (content, callback) {\n  callback(content);\n}\n```\n\nThis callback is called when the user clicks on the preview button and has two parameters:  \n**content** that contains the text in markdown.  \n**callback** is function that you have to call with the parsed html as a parameter\n\n#### label\n\n**Type**: object\n**Default**:\n\n```javascript\n{\n  btnHeader1: 'Header 1',\n  btnHeader2: 'Header 2',\n  btnHeader3: 'Header 3',\n  btnBold: 'Bold',\n  btnItalic: 'Italic',\n  btnList: 'Unordered list',\n  btnOrderedList: 'Ordered list',\n  btnLink: 'Link',\n  btnImage: 'Insert image',\n  btnUpload: 'Uplaod image',\n  btnEdit: 'Edit',\n  btnPreview: 'Preview',\n  btnFullscreen: 'Fullscreen',\n  loading: 'Loading'\n}\n```\n\nThis object contains the strings that can be translated\n\n### Methods\n\nThe methods are invoked passing the name of the method as string.  \n\n```javascript\nvar content = $('#myEditor').markdownEditor('content'); // Returns the content of the editor\n$('#myEditor').markdownEditor('setContent', content); // Sets the content of the editor\n```\n\n## License\n\nLicensed under MIT (https://github.com/inacho/bootstrap-markdown-editor/blob/master/LICENSE).\n\n## Authors\n\n[Ignacio de Tomás](https://github.com/inacho)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finacho%2Fbootstrap-markdown-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finacho%2Fbootstrap-markdown-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finacho%2Fbootstrap-markdown-editor/lists"}