WMD - get markdown text - javascript

I'm using markdown editor in my app.
$(document).ready(function () {
var converter = Markdown.getSanitizingConverter();
var editor = new Markdown.Editor(converter);
editor.run();
});
<div class="wmd-panel">
<div id="wmd-button-bar"></div>
<textarea class="wmd-input" id="wmd-input" rows="7" cols="30"></textarea>
</div>
<div id="wmd-preview" class="wmd-panel wmd-preview" name="Content"></div>
Initially, the textarea field is empty. After I enter some text, everything works as expected:
Firebug shows such html structure:
Now I need to get entered pure markdown text: **where** is it ?. I need it because I think it should be stored in the database (and later retrieved from database and converted to html when showed to the user). I have no idea how can it be reached. How can I get it ?

They've have some Docs which might be helpful to you.
The fancy way would probably be to catch the preConversion event in the event-chain:
converter.hooks.chain('preConversion', function(markdown) {
// Do something wonderful with you markdown variable, and then return it.
return markdown;
});
The less fancy way, but working as expected would be to just retrieve the value of the value parameter of the textarea.
var textarea = document.getElemetById('wmd-input');
var markdown = textarea.value;

Related

HTML Textarea text to XML

I have a HTML Textarea in which the list appears like this :
jack=rider
steven=conrad
nancy=gagan
I have to create a button, which once pressed it should show the text in XML any way, In a file or in the same textbox.
<list1>jack=rider</list1>
<list2>steven=conrad</list2>
and so on.
The coding has to in javascript. Please help.
I don't get completely this question, by the way if your aim was to turn a HTML document object, and whatever contents it has in XML, this is pretty straightforward if you have the right tools. We are using Wicked Google Xpath here, a pure JS implementation of the DOM Level 3 XPath specification.
So let's see how it works here, this can help you to build your contents from HTML code, but again, I'm not sure if this was your objective:
var console = {
log: function(s) {
document.getElementById("console").innerHTML += s + "<br/>"
}
}
console.log("XML:installing parser...");
wgxpath.install(window)
console.log("XML:Parser installed.");
console.log("XML:Evaluating XPath...");
var expression = window.document.createExpression('//*[#id="contents"]');
console.log("XML:Evaluating XPath text");
var result = expression.evaluate(document,
XPathResult.STRING_TYPE);
console.log("XML:Contents <br><br>" + result.stringValue);
console.log("<br><br>XML:DONE.");
var expressionXML = window.document.createExpression('//*[#id="contents"]/node()');
console.log("XML:Evaluating XPath node()");
var resultXML = expression.evaluate(document,
XPathResult.ANY_TYPE);
console.log("XML:Contents <br><br>" + resultXML.iterateNext().textContent);
console.log("<br><br>XML:DONE.");
<script src="https://github.com/google/wicked-good-xpath/releases/download/1.3.0/wgxpath.install.js"></script>
<div id="console" />
<div id="contents" style="display:none;"><textarea rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>
</div>

Tinymce get content

I try to get the content of tinymce, like this:
var hallo = tinyMCE.activeEditor.getContent();
alert(hallo);
but every time I get this message:
Uncaught TypeError: Cannot read property 'getContent' of null
I am using tinymce 4.
Thank you
You can get tinyMCE content by calling the the method triggerSave in the following way
tinyMCE.triggerSave();
after declaring this method you can get the contents by selector for example:-
var contents = $("#myTextArea").val();
or
var contents = tinyMCE.get('myTextArea').getContent();
Cannot read property 'getContent' of null often means that TinyMCE is unable to find your textbox which means there is something wrong in the reference to textarea's class.
<form method="post" action="somepage">
<textarea id="myTextArea" class="mceEditor">I should buy a boat. </textarea>
</form>
<button onclick="content()">Get content</button>
Take note of mceEditor class which we will now inform the TinyMCE editor about :
<script type="text/javascript">
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "mceEditor" //<<<----
});
</script>
And now simply get the contents of that textbox on the button click.
function content() {
alert(tinyMCE.get('myTextArea').getContent());
}
Here is working DEMO
Further to Shabaz's answer...
For TinyMCE version 4.1.9, I discovered the following:
tinyMCE.get('bobt').getContent(); and tinymce.get('bobt').getContent(); BOTH WORK (that is, uppercase the MCE does not matter)
bobt in my example code is an ID, not a class
The triggerSave() call is unnecessary - all that is important is for the textarea to have an ID, and to use the ID in the get('#YOUR_ID').getContent() call.
Full Example Code (non run-able):
$(function(){
$('button').click(() => {
//tinyMCE.triggerSave();
const out3 = tinyMCE.get('bobt').getContent(); //*MUST* be an ID, not a class
alert(out3);
$('#out').html(out3);
});
});
<textarea id="bobt" class="tinymce"></textarea>
<div id="outx"><button>Get it</button></div>
<div id="out"></div>

How to output a variable in Javascript to a textarea in HTML?

I have got a variable in javascript called 'signature'
var signature;
//(Data is here)
document.write(signature)
In HTML, I have the following:
<div id="siggen">
<textarea id="content" cols="80" rows="10"></textarea>
What i want is when i click generate button the variable signature appers in text area. Can anyone help?
I think you need like:
var signature = "Hello";
function addVal(){
document.getElementById('content').value = signature
}
<div id="siggen">
<textarea id="content" cols="80" rows="10"></textarea>
<button id="btnClick" onclick="addVal()">Click</button>
You can use JQuery :
$("#content").val(signature)
See val-vs-text-for-textarea
Your question is not quite clear but I assume you want to do something like this.
First in your html add a textarea and a button with these properties. Use disabled only if you want to make the text area disabled.
<textarea disabled id="displaytext"></textarea>
<button onclick="buttonFunction()">Click !</button>
Now in your javascript file, write the buttonFunction() to display the value in signature variable in the text area.
var signature = "This is the content to display";
function buttonFunction() {
document.getElementById("displaytext").innerHTML = signature;
}
This is the result. The text will be displayed when you click the button.

Coffee script access to input value

I am new to javaScript, coffee script, jQuery and the UI tech in general. I am trying to accomplish really simple thing - read a value from the input field but so far with no luck. My code is pretty simple:
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" value="Hello">
</div>
From coffee script I am trying to read the value as follows:
jQuery ($) ->
$field = $('.ui-widget input')
text=$field.val
alert #{ text }
But so far with no luck, but contrary via $field.val("Bye") works just fine.
Could someone please put some shed on that?
Thx
Parameter less function calls require parentheses.
text=$field.val
Is translated to
var text;
text = $field.val;
Notice that you are getting a function reference to val
Adding the parans:
text=$field.val()
Becomes
var text;
text = $field.val();
Returning the result of the function rather then the function itself.

jquery to take in the typed text in a textarea and pass it to a backend handler (perl, php, etc..)

I have a very simple 'textarea' in html:
<div id="textarea">
<textarea rows="20" cols="45" autofocus wrap>
</textarea>
</div>
With 2 buttons:
<div class="buttonbox">
<a class="button" href="#"><span id="spButton">Solve Problems</span></a>
<a class="button" href="#"><span id="pmfButton">Pull My Finger</span></a>
</div>
I am trying to understand the jQuery to allow the button 'spButton', when pressed following text entered into the 'textarea', to be captured and passed, in a var to the backend, in my case perl. I have seen/tested some XHR handler cases for image transfer, and they work fine, but thought that simple text would be far more... well... simple? I am not able to grab the typed text at all, only the static text that I had placed within the 'textarea' tags? Clearly I am missing something.
In the following attempt, I am not able to extract the 'var' to even print the text entered in an alert:
$(function() {
$('#spButton').click(function() {
var inText = $('textarea#textarea').val();
alert(inText);
});
});
The above, while appearing to be syntactically(questionable) correct, does not return any typed text from the 'textarea' to the alert, it is simply a bank alert popup with 'undefined' as the text? I have also tried '.text()' however that only grabs any text encapsulated within the 'textarea' tags. You can get a look at what I have done so far (very little) here: https://github.com/gmconklin/zephyr
Apparently I need a rep to post pics? Hmm nonsensical, but I cannot provide screenshots due to this limitation, apologies.
Thanks for any assistance.
-G
When you write:
var inText = $('textarea#textarea').val();
That means a textarea with id textarea.
What you want is a textarea inside a div with id textarea. That is this:
var inText = $('#textarea textarea').val();

Categories