refactory-id / bootstrap-markdown Goto Github PK

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

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?

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

This markdown editor is vulnerable to xss attacks especially the preview feature.

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?

please see to update with bootstrap 3 less variables and other changes...

It's possible to externalize into the options each english sentence to translate properly?

I want to disable the preview functionality (and button), how can I do this?

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.

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.

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 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.

Bootstrap Markdown saves contents in LocalStorage.
How can i disable it?

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 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 ?

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.

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.

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.

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.

Create a NuGet package for bootstrap-markdown, for easier installation and updates.

It makes it impossible to use the file "as is", it must be copied to the project which makes it harder to follow changes.

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 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 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?

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.

As it says in the subject: enable and or something similar.

see title

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' }

I want to build an external "Save" button. Is it possible to trigger an event (save) from outside, so the onSave hook gets fired?

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.

Ref http://blog.getbootstrap.com/2013/07/27/bootstrap-3-rc1/

Can you please provide the option of placing the controls neither top or bottom ?

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.

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.

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?

The text ***hello*** should be _hello_. But the text becomes *hello*

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.

Is it possible to make the editor resizable like the default textarea ?

Currently, pressing tab on a form can take you into a bootstrap-markdown textarea, but not out of it.

could you please do that? - thx a lot

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.

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.

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.

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

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.

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.

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?