Markdown live preview in Textarea?
Are there any Javascript Markdown editing toolbars or libraries that show the live preview within the textarea and hide the formatting marks (**, ___ etc), similar to TinyMCE's implementation?
If not, how would I go about implementing this in jQuery?
I'm currently using MarkItUp, which only shows the preview after the textarea, or in a pop-up.
This post refering to 'BlueCloth' sounds close, but although im interested in general implementation a RoR version isn't very useful at this stage (I'm using Python/Zope).
I'm aware that most of the beaut开发者_StackOverflowy of Markdown is it's simple text formatting characters, but the site in question is fairly non-technical and I'm largely using the Markdown Python library for it's 'evil' html stipping abilities.
UPDATE: In response to comments, I suppose I'd be happy for the formatting marks to display if typed, but not if the toolbar is used (i.e. I'm assuming GUI users are less technical users).
Or, other toolbars have a 'source' view, which might be an option.
if you need markdown support right in textarea with no additional GUI, then textarea-markdown might be helpful
I found this library,
and here is the js file.
very easy to use, you just add the library in script tag, and use marked.parse() function
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
target.innerHTML = marked.parse("#Example");
</script>
Example
Run the snippet and write something in textarea
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<textarea id="textareaID">
# Example Title
## list
1. one
1. tow
1. three
</textarea>
<div id="content"></div>
<script>
$("#textareaID").on('input', function (e) {
document.getElementById('content').innerHTML =
marked.parse(e.target.value);
});
</script>
</body>
</html>CKEditor might be too heavy, but it is nice.
The only way you can achieve it is using an iframe.
加载中,请稍侯......
精彩评论