refactory-id / bootstrap-markdown Goto Github PK
View Code? Open in Web Editor NEWBootstrap plugin for markdown editing
License: Apache License 2.0
Bootstrap plugin for markdown editing
License: Apache License 2.0
could you please do that? - thx a lot
I have included bootstrap-markdown.js and bootstrap-markdown.min.css files in my project. I thought I do not need to include any other files. Here is the code which is in my template file:
<textarea class="form-control" name="description" data-provide="markdown" rows="10"> </textarea>
......
<script src="/javascripts/bootstrap-markdown.js"></script>
The preview button is not working. Should I be including any other file? I have bootstrap-markdown.js v2.5.0. Thank you for your help.
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.
Hello toopay,
In some cases, i have to uoload the editor and make the textarea returns to the origin status.
Since i use two editor for my website,bootstrap makrdown editor and UEditror,I must switch between them.
Could you tell me that how can i do that?
thanks advanced.
Maybe this is more of an issue with rails-assets, but the version specified in bower.json
is ~3.1.1
, which forces me to use 3.1.1 for my entire project. Is there a way that this dependency could be loosened, or do I have to fork the repo to get this to work?
The text ***hello***
should be _hello_. But the text becomes *hello*
I want to disable the preview functionality (and button), how can I do this?
I want to change the alert box which shows up to insert HyperLink. How do i change or customize it?
I may like to use something like http://bootboxjs.com/ for the popup.
When I add my own buttons, they are added after the preview button. How to place them before please ?
Currently, pressing tab on a form can take you into a bootstrap-markdown textarea, but not out of it.
It's a problem with AngularJS. For some reason angular strips the markdown chars when they are inserted using buttons (B, I, H) after form submit.
When adding markdown by hand, for example bold ** before and after the word, markdown is not removed.
Adding a blank line below the word wrapped in markdown makes it work and markdown is there when I check it in controller's submit method.
When you edit it would be very cool if the text would be hightlighted. For example when you add a title the text can be a little bit stronger. This will help to see the structure of the text.
Very nice editor thanks.
I think this is a very common usecase:
when we have:
<div data-provide="markdown-editable">
<h3>This is some editable heading</h3>
<p>Well, actually all contents within this "markdown-editable" context is really editable. Just click anywhere!</p>
</div>
we want ability to show the editor on click and hide just the editor (not the edited content) on blur
When using the system undo/redo after have used the toolbar buttons, the content in the textarea becomes messed up.
I am not using LESS, and the produced, minimalized CSS is not a big help...
I am trying to change the background color of the text field and the background of the button bar.
Which classes do I need to override?
Hey there, I wish to make the markdown editor show/hidden on button click.
To make it visible i wrote the following code with in the click trigger
$("#article").markdown({autofocus:true,savable:false,iconlibrary:'fa'});
but when i try to use the $('#article').showEditor()
toggle api. it gives the following error
TypeError: Object [object Object] has no method 'showEditor'
.
When the editor is in preview mode clicking on the disabled buttons will submit the form.
It should just ignore the click as the button is in fact disabled.
It makes it impossible to use the file "as is", it must be copied to the project which makes it harder to follow changes.
I know I can 'force' a line break by ending a line with two or more spaces and then a return, but, Is there any way to treat returns as br's and keep paragraphs separated by a blank line?
Hi,
The system does not convert the markdown when I click the preview button:
Step 1 : http://www.world-lolo.com/images/uploads/image.num1394627726.of.world-lolo.com.png
Step 2 (on preview button clic) : http://www.world-lolo.com/images/uploads/image.num1394627720.of.world-lolo.com.png
Can you help me ?
Thanks
I want to build an external "Save" button. Is it possible to trigger an event (save) from outside, so the onSave hook gets fired?
It's possible to externalize into the options each english sentence to translate properly?
see title
First, thanks for a nice addon, just what I was looking for, mostly :-)
I've been playing with it a little bit and finally understood it's hardcoded to support both markdown-js and toMarkdown JavaScript libraries. I saw how I could hook into onShow, etc. and was partly able to get things done, but!
In my case, I'm storing markdown in the db (couchdb, not that it matters) and when displaying a page, the markdown gets converted on the server to html and that's what's shown to the user.
When I edit, I don't want (or don't trust) toMarkdown, I much prefer to ask my db for the actual markdown. A quick ajax request gets that done, and I'm able to setContent with the markdown I just got. So good so far, but I feel it would be better if I could hook myself inplace of toMarkdown to make that ajax request under the hood. One thing is toMarkdown expects html content whereas my ajax call will take the document ID.
Finally, I'd like to use marked instead of markdown-js for the preview on the client side, but I can imagine cases where this would be another ajax call. I think it would be a nice option to be able to specify both functions we want to use as callbacks, instead of having those 2 hardcoded.
I'm ready to work on this if it's clear enough and if you find the idea interesting.
This markdown editor is vulnerable to xss attacks especially the preview feature.
Create a NuGet package for bootstrap-markdown, for easier installation and updates.
Hey, I wasn't able to find it if it exists, but it would be awesome to be able to remove the predefined buttons.
Disabling and hiding via css is stupid, but that's what I'm doing atm.
I'm seeing behavior where the last markdown enabled textarea in a form takes the focus on document ready.
This is undesirable. I want either the first input element in my form to take focus or an input element that I specified to take focus.
Fortunately, I already had a internal jquery plugin that auto-focuses the first "relevant" input field. My current workaround is to make sure the markdown plugin runs before my plugin, but this shouldn't be a necessity.
please see to update with bootstrap 3 less variables and other changes...
Can you please provide the option of placing the controls neither top or bottom ?
Don't no why you removed those other js files on latest versions, but when trying to use without markdown.js & to-markdown.js files, the editor does not parse the markdown syntax. Adding them to script fixed it.
So why was it removed? Is there any additional options required that I need to set to work without these 2 js files? There is no doc regarding this, so confused.
Bootstrap Markdown saves contents in LocalStorage.
How can i disable it?
I'd like to be able to disable and remove buttons permanently. disableButtons()
works, but upon closing a preview window, the disabled buttons are re-enabled. Of course I could add in the hooks to re-disable it, but this seems like something that could help others if it were added.
Having this as a data attribute would be especially helpful but not required.
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
I'm integrating RequireJS into my workflow (which seems to be a bad idea), and it appears bootstrap-markdown fails to find/work with chjj/marked:
//config.js
requirejs.config(
shim: {
"marked": {
exports: "marked"
},
"bootstrap": {
deps: ["jquery"],
exports: "$.fn.popover"
},
"bootstrap-markdown": {
deps: ["jquery", "marked"],
exports: "$.fn.markdown"
}
},
baseUrl: "/public/js",
paths: {
bootstrap: "../components/bootstrap/dist/js/bootstrap.min",
"bootstrap-markdown": "../components/bootstrap-markdown/js/bootstrap-markdown",
jquery: "../components/jquery/dist/jquery",
marked: "../components/marked/lib/marked",
requirejs: "../components/requirejs/require",
}
});
The page itself requires everything in the right order:
require(['config'], function (config) {
require(['jquery', 'bootstrap', 'marked', 'bootstrap-markdown'],
function ($, _a, marked, _c) {
$(document).ready(function () {
$('textarea.use-md').markdown();
});
});
});
Watching some custom logging I've added to RequireJS, I see that marked
is loaded prior to bootstrap-markdown, and that it appears to call the required AMD setup as well. If I fake it out with a window.marked = marked
call prior to using bootstrap-markdown, everything works again.
Does bootstrap-markdown not use marked in an AMD friendly fashion?
Is it possible to make the editor resizable like the default textarea ?
I've found that when submitting a form with the editor still in preview mode, the textarea data is not submitted with the form.
Looking into the source code, I see that the textarea is removed entirely from the DOM, with its contents saved into a class property. Is there a reason for this approach, vs. simply using .hide() and .show() on the textarea?
If that is the solution, I'm happy to make the modifications & submit a pull request for them to get this working.
If you do something like:
$("#post-content").markdown({
iconlibrary: 'fa',
disabledButtons: ['Image']
});
on a text area, write something, click preview then click preview again the image icon becomes enabled again.
A clarification is needed on http://toopay.github.io/bootstrap-markdown/, I think, that the libs to-markdown
and markdown-js
are real dependencies, and at the top of the page. Further a real cnp example would be greatly appreciated by more than me, I think, because what I had to resort to was look at the source on the aforementioned page.
I use data-provide="markdown-editable", but content don't have markdown style !
.post-content-text(data-provide="markdown-editable" data-savable="true")
= note.content
thank u
I am using this with Angular JS, and as it is a textarea element, this generally works well...However, if I use the buttons to update the markdown text (i.e. add bold/italics, etc), this is not picked up by the AngularJS event loop.
bootstrap-markdown.js v1.1.4,when I move mouse to the editor,the B button will be selected,and click the input area will place a strong string in it.
I've attempted setting up bootstrap-markdown in sinatra/haml from both the tar and zip files. Neither seems to work. The buttons do not display.
Bootstrap 3.1.1
toopay-bootstrap-markdown-v2.4.0-0-g16dfaa8.tar
HAML:
%html
%head
%script{:type=>'text/javascript', :src=>"/js/bootstrap-markdown.js"}
%script{:type=>'text/javascript', :src=>"https://github.com/evilstreak/markdown-js"}
%script{:type=>'text/javascript', :src=>"https://github.com/chjj/marked"}
%link(rel="stylesheet" type="text/css" href="/css/bootstrap-markdown.min.css")
%body
%form
%input{type: 'textarea', 'data-provide' => 'markdown', rows: 10, name: 'content' }
Great tool! On your demo page, four spaces indicates a code block. When I implement on my side, it just becomes a paragraph. Not sure why? Could it be an issue with markdown.js? The rest of the preview rendering is great.
Green on JavaScript...
As you provided at the bottom of this page, I assume I can only use the APIs by passing a call back function to
$('#some-div-or-textarea').markdown({
...
, callback: function(e){
...
e.getContent();
}})
But how can I get the e
outside the markdown({})
?
What I want is to send the modified text to the server.
Any help?
It took me 20 minutes to realize why bootstrap-markdown preview wasn't working (it just rendered the markdown in a different font without any formatting): it needs markdown.js. It might be an idea to list all dependencies in the documentation page.
As it says in the subject: enable and or something similar.
hi,
i've tried version 1.1.1 installed with bower, then i tried installing latest version, the i downloaded package from website.
the markdown editor is shown, but the preview doesn't change the md to html.
i'm using it on a textarea with data-provide="markdown"
do i need to configure something or add another library?
thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.