I am using summernote text editor. I want to get html formatted of text edited in editor. In summernote editor toolbar having a code view button. when click on the button we can see the html code of edited text. Now, I want html code to get as string or stored in variable. How it possible?
Please help me.
reference : github code is https://github.com/summernote/summernote
Add the below lines to index.html
<div class="container">
<div id="summernote" class="summernote"><p>Hello World</p></div>
<input type="submit" value="submit" onclick="myFunction()"/>
<script>
function myFunction() {
var MyDiv2 = document.getElementsByClassName('note-editable');
m = MyDiv2[0];
alert(m.innerHTML);
}
</script>
You have method summernote with argument 'code' for this.
Example:
<div class="summernote"></div>
<script>
$('.summernote').summernote();
</script>
Then Type something in field created from div and type in console:
$('.summernote').summernote('code')
You should see the same result as in example in #john answer
Related
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>
I have one <textarea> tag in my website where the user can put there HTML code and see its preview. My problem is when the user enter code below mention in my <textarea> my preview functionality getting fail :
<html>
<textarea>Some code to show</textarea>
</html>
So question is how can I escape this html code in my <textarea> tag as I know the problem is coming because </textarea> tag.
Any solution on this please.
Edit
Question is about using </textarea> within a textarea.
Problem visible here: http://jsfiddle.net/hrP6F/
EDIT: for your purpose this would do:
<textarea>
Outside Textarea
<textarea>Inside Textarea</textarea>
</textarea>
source: How can I embed a textarea inside of another textarea in HTML?
Or use contenteditable like someone already mentioned -> click
FIRST ANSWER: Im not sure I understand perfectly but still. You want to display the code inside text area somewhere else for instance?
You could do that on click like this (I reckon you are not statically putting nested text areas in html?):
HTML:
<textarea id="textarea" >Something code to show</textarea>
<button onclick="show()">show</button>
<div id="showArea"></div>
JS:
function show(){
var t = document.getElementById('textarea').value;
document.getElementById('showArea').innerHTML = t;
}
This is of course if what you want is to display html that is inside textarea. you could also put another textarea inside first one and it will work.
If you want the results to display dynamically you could use
<textarea id="textarea" onkeyup="show()">Something code to show</textarea>
This works even if you put your code (html and text area) inside text area - it displays it, I tested it
You can add a output div for preview purpose. Below is the jQuery script
HTML
<textarea placeholder="Enter your html"><b>test</b></textarea>
Run
<div class="op"></div>
JS
$('.run').click(function(){
$('.op').html($('textarea').val());
return false;
});
DEMO
I was making an HTML code editor, I tested all of the HTML tags I know and they all work, except for script tags.
When I type <script>something</script> into the text area and click a button, the script doesn't execute.
Please help! Here is the code:
<span id="finishedProduct">
<p>When you enter code, your finished product will be here! Don't worry, if you make a mistake you can fix it later!</p>
</span>
<form name="userCode">
<textarea name="userCode" cols="90" rows="20" placeholder="Type your code here"></textarea></br>
<button type="button">Run Code!</button>
</form>
<script>
function makeCode() {
var userCode=document.forms["userCode"]["userCode"].value;
document.getElementById('finishedProduct').innerHTML = userCode;
}
</script>
Here is the working code:
<span id="finishedProduct">When you enter code, your finished product will be here! Don't worry, if you make a mistake you can fix it later!
</span>
<form name="userCode">
<textarea name="userCode" cols="90" rows="20" placeholder="Type your code here"></textarea>
<br/>
<button type="button" onClick="makeCode()">Run Code!</button>
</form>
<script type="text/javascript">
function makeCode() {
var userCode=document.forms["userCode"]["userCode"].value;
document.getElementById('finishedProduct').innerHTML = userCode;
}
</script>
Here's a link to the JSFiddle: http://jsfiddle.net/Q2qLF/. I've removed some broken HTML, such as; a button shouldn't be contained in a anchor tag, I've added a 'onclick' in your button that will call the 'makeCode()' function and I've added the 'type="text/javascript"' into your script tag as this maximises compatibility.
Please let me know if you need any more help
I've updated my JSFiddle http://jsfiddle.net/Xanco/Q2qLF/1/
Now there are 2 textareas, one for the HTML and one for the Javascript. i've also created a new function called 'makejs', this takes the value of the Javascript textarea and runs it through a 'eval' - this executes the Javascript passed to it.
I've put the answer in a Fiddle here: http://jsfiddle.net/joshnicholson/P8eh9/
I'm not sure why you're wrapping the button element inside an anchor, but I would do it a slightly different way.
Here is the revised javascript:
var myButton = document.getElementById("btnRunCode");
myButton.addEventListener("click", makeCode);
function makeCode() {
var userCode=document.forms["userCode"]["userCode"].value;
document.getElementById('finishedProduct').innerHTML = userCode;
}
I added an id of "btnRunCode" to your button element, just to make things easier for me. See the Fiddle.
Below is my code.
HTML :
<div id="vis">
</div>
JavaScript:
$('#vis').find('.set_texts').wrapInner('<div class="new_text">');
($('#vis').find('.new_text').text("NEW TEXT VALUE"));
When I run this code in 'inspect element' I can see the below code as output but nothing is showing in the browser. I want to show 'NEW TEXT VALUE' in the browser,how?
<div id="vis">
<div class="new_text">NEW TEXT VALUE</div>
</div>
<text> is not a valid HTML tag, you can use <div>,<p>,<span>... instead:
$('#vis').find('.set_texts').wrapInner('<span class="new_text">');
$('#vis').find('.new_text').text("NEW TEXT VALUE");
instead of this
$('#vis').find('.set_texts').wrapInner('<text class="new_text">');
use this
$('#vis').find('.set_texts').wrapInner('<span class="new_text">');
first you need to change html.
html:
<div id="vis">
<div class="set_texts"></div>
</div>
you do not have .set_texts element in your selected div(#vis). so wrapInner() is not adding any div.
you also have extra ) in the second line of jquery.
try this jquery:
$(document).ready(function(){
$('#vis').find('.set_texts').wrapInner('<div class="new_text">');
$('#vis').find('.new_text').text("NEW TEXT VALUE");
});
working demo
let me know if you have any question.
I am trying to make a similar bit of code like at the bottom of this page to leave a comment. I have the basic code but the output does not register new lines (or HTML, but that isn't important). I have the function below called on key-up on the text field. Any help would be greatly appreciated. Thanks
Here is the whole page (Now working)
<html>
<body>
<form>
<textarea id="text" onkeyup="outputText()"></textarea>
</form>
<div id="outputtext" style="width:500px;">
</div>
</body>
<script type="text/javascript">
function outputText()
{
var text = document.getElementById('text').innerHTML;
document.getElementById('outputtext').innerHTML = (text + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1<br>$2');
}
</script>
</html>
document.getElementById('outputtext').innerHTML = (text + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1<br>$2')
Have you tried getting the textarea contents as
var text = document.getElementById('text').value; instead?
I think it's good for you to take a look at how tools like jQuery can make your live easier in this kind of cases. Your particular question is a bit unclear however...can you give us more details?
You can use the <pre> (preformatted) tag so that html and carriage returns are represented without doctoring the field input
html:
<input id="text" type="text" />
<pre id="outputtext"></pre>
jQuery:
$(document).ready(function () {
$('#text').keyup(function () {
$('#outputtext').html($(this).val());
});
});