• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

inacho/bootstrap-markdown-editor: Markdown editor for Bootstrap with preview, im ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

inacho/bootstrap-markdown-editor

开源软件地址(OpenSource Url):

https://github.com/inacho/bootstrap-markdown-editor

开源编程语言(OpenSource Language):

JavaScript 53.6%

开源软件介绍(OpenSource Introduction):

Bootstrap Markdown Editor

Built with Grunt

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

Features

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

Screenshot

Screenshot 1

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




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap