在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):tibastral/markdownify开源软件地址(OpenSource Url):https://github.com/tibastral/markdownify开源编程语言(OpenSource Language):JavaScript 87.5%开源软件介绍(OpenSource Introduction):MarkdownifyThe simplest markdown editor with built in cloudinary image upload. Based on CodeMirror for the editor and Marked for the preview. Demo:tibastral.github.io/markdownify Usage:Lets say you have a textarea you want to markdownify. Install with bower:bower install jquery.markdownify <textarea class='markdown' id="markdown"></textarea> $('.markdown').markdownify(); You can then add buttons for convenience of your users. You need to encapsulate your links (or buttons) in a item with the 'markdownify-menu' class. The data-target attribute is the id of the textarea you want to control. <div class='markdownify-menu' data-target='markdown'>
<a class='btn--insert' data-prefix='*' data-suffix='*' href='javascript:void(0)'>i</a>
<a class='btn--insert' data-prefix='**' data-suffix='**' href='javascript:void(0)'>b</a>
<a class='btn--insert' data-prefix='# ' href='javascript:void(0)'>h1</a>
<a class='btn--insert' data-prefix='## ' href='javascript:void(0)'>h2</a>
<a class='btn--insert' data-prefix='> ' href='javascript:void(0)'>quote</a>
<a class='btn--insert' data-prefix='* ' href='javascript:void(0)'>list</a>
<a class='btn--insert' data-prefix='1. ' href='javascript:void(0)'>1.</a>
<a class='btn--insert' data-type='link' href='javascript:void(0)'>link</a>
</div> To upload an image directly to cloudinary, you can add add a param to markdownify : $('.markdown').markdownify(
cloudinary: {
// create an account on cloudinary and put here your cloud name
cloudName: 'YOUR_CLOUD_NAME',
// get your unsigned uploading key
// http://cloudinary.com/blog/direct_upload_made_easy_from_browser_or_mobile_app_to_the_cloud)
unsignedUploadingKey: 'YOUR_UNSIGNED_UPLOADING_KEY'
}
); OptionsIf you want the preview toggle, add this after your markdown editor HTML: <div class='markdown-preview'></div>
<a class='btn--preview' href='javascript:void(0)' data-target='markdown'>preview</a> If you want the edit/preview button text to be different, modify the following: Change Edit button text: Add the following attribute to the preview button: data-toggle-text='edit-non-default-text' Change Preview button text: Modify the default text that's within the tag: <a class='btn--preview' href='javascript:void(0)' data-target='markdown'>edit me here</a> The code is extracted from mipise.com and extensively used in jobboardmaker.com |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论