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

Grafikart/JS-Markdown-Editor: An easy to use markdown editor with live preview a ...

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

开源软件名称(OpenSource Name):

Grafikart/JS-Markdown-Editor

开源软件地址(OpenSource Url):

https://github.com/Grafikart/JS-Markdown-Editor

开源编程语言(OpenSource Language):

JavaScript 87.5%

开源软件介绍(OpenSource Introduction):

WIPBICTBF : Work in progress but it's close to be finished

The result

DEMO

How it works

To transform a textarea in an markdown editor you just have to create a new MdEditor instance

var md = new MdEditor('#mdeditor');

You can pass options as the second parameter

var md = new MdEditor('#mdeditor', {
uploader: false, //'http://local.dev/Lab/MdEditor/app/upload.php?id=',
preview: true,
images: [
  {id: '1.jpg', url: 'http://lorempicsum.com/futurama/200/200/1'},
]
});

Options

I created options for my needs, if you have some new ideas, PR are welcomed.

  • labelClose 'Do you really want to close this window ? Every edit you did could be lost'
  • labelInsert: 'Insert', This label is used within the image uploader
  • labelDelete: 'Delete',
  • labelSuccess: 'Content saved with success', This label is used when saving using ctrl + s
  • labelImage: 'Insert your image url', This label is used within the image uploader is not availabled
  • labelConfirm: 'Do you really want to delete this picture ?'
  • preview: true, Enable the preview for the inline editor (preview is always displayed when fullscreen is enabled
  • uploader: false, false to disable the image uploader (using drag'n drop) or a string containing the REST api endpoint
  • uploaderData: {}, additional data to send when uploading (CSRF token for instance
  • ctrls: true, enable autosaving, it will submit the form using ajax (so if you have additional fields, they will be sent too)
  • images: [], an array containing initial images to display within the image uploader
  • imageURL: function(){ return el.url }, how to fetch the image URL from the image data
  • flash: function(message, type) {return window.alert(message) }, a function that display error or success message. you can replace it using jgrowl or a notification system of your choice.

Contributing

Before you can start you have to download you have to install npm dependencies, bower dependencies, then start gulp serve task

  • npm install
  • bower install
  • gulp serve

Then you can edit app/scripts/mdeditor.coffee to do some edits.

Todo

  • Rework the gulpfile.js
  • Test it on multiple browsers (only tested with chrome atm)



鲜花

握手

雷人

路过

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

请发表评论

全部评论

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

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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