Develop Reference

How To fetch the value of a DIV

I have integrated froala editor on my HTML page. I need to fetch the data I have written inside the div with its HTML properties.
Below is my code:
html
<button>
click
</button>
<div id="froala-editor-br">
The editor can use <code>BR</code> tags. When ENTER key is hit, a <code>BR</code> tag is inserted.
</div>
js code
$('div#froala-editor-br').froalaEditor({
enter: $.FroalaEditor.ENTER_BR
});
$("button").click(function(){
var chk = $('#froala-editor-br').html();
alert(chk);
});
And here is the working jsfiddle
If you press the click button, it is fetching the froala code, not the code I am entering.

Just replace your code with below script.
$("button").click(function(){
var chk = $('#froala-editor-br').froalaEditor('html.get');
alert(chk);
});
Here is the documentation link.
getHTML

Just need to update selector in the one line inside button click function to:
var chk = $('#froala-editor-br .fr-element').html();

The froala editor adds its own divs dynamically and wraps many elements. If you want only the text inside the resulting editor, you need to change your selector.
So, your selector should be $('#froala-editor-br .fr-view') instead.
As in:
$("button").click(function() {
var chk = $('#froala-editor-br .fr-view').text();
alert(chk);
});
As mentioned in the comments, #Smit Raval's answer uses the API for the froala editor and it seems like a better option to use that instead.

Pure JS code
let button = document.querySelector("button");
let div = document.getElementById("froala-editor-br");
button.addEventListener("click", function(e){
alert(div.innerHTML);
});

Make html() include content typed into textarea

I've got webpage with this structure:
<div id="report_content">
Some information
<textarea name="personal"></textarea>
<b>Other information</b>
<textarea name="work"></textarea>
</div>
After writing some text in the textareas, I use jquery to get the entire html. The result is that the textareas are empty, as if I hadn't written anything inside.
I'm guessing it's because they do not accept html, but I need to get the html including textarea's content.
The only solution I've found so far is to convert textareas to divs and then assign them the textarea content.
Is there any other way to avoid this conversion?

The problem is that .html() will not get the value (which is what the content people type into the textearea will go into). You can set the innerHTML to what the value is before getting the full html, like this...
JSFiddle
$('textarea').each(function () {
$(this).html($(this).val());
});
var html = $("#report_content").html();
console.log(html);
or... with less jquery wrapping...
var html = $("#report_content").find("textarea").each(function () {
this.innerHTML = this.value;
}).end().html();
console.log(html);

jQuery: pasting contents as plain text

Using information on the internet, I got this far:
http://codepen.io/anon/pen/EeoFw
$('textarea').bind('paste', function () {
var element = this;
setTimeout(function () {
var text = $(element).val();
console.log("Paste")
}, 100);
});
It seems to work just fine, but I was wondering what event I can trigger to basically put a "clean" version of the pasted text into the text area instead of the copied contents. This includes if text was pasted from HTML, Word or other sources. Is there a way to strip out tags and such without too much hassle? I'm guessing I'm looking for some kind of regex solution but I haven't been able to find one.

Put the styled content into a hidden div, and retrieve its innerText. If your styled content is in text:
a=document.createElement('div');
a.innerHTML=text;
b=a.innerText;

How to get the content of a Tinymce textarea with JavaScript

i have an array of content then how we get content of Tinymce textarea in javascript

I solved it with code:
// Get the HTML contents of the currently active editor
tinyMCE.activeEditor.getContent();
// Get the raw contents of the currently active editor
tinyMCE.activeEditor.getContent({format : 'raw'});
// Get content of a specific editor:
tinyMCE.get('content id').getContent()
the activeEditor is current editor,but i use tinyMCE.get('editor1').getContent() can not get the value of my editor, hope it can help you
Tinymce API: http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent

lets say your mce textarea instance is:
<textarea id="editor1" ....></textarea>
then you get the content as follows:
var content = tinyMCE.getContent('editor1');
if you mean you have multiple instances of mce editor on one page and you want to get content then try this approach:
var inst, contents = new Object();
for (inst in tinyMCE.editors) {
if (tinyMCE.editors[inst].getContent)
contents[inst] = tinyMCE.editors[inst].getContent();
}
the above code adds each editor content into an array

I had the same problem. I have solved using this code:
tinyMCE.get('editor1').getContent();
Source: spocke is the author

You may use:
tinymce.get(editorid).getContent();

In my case (v4.3.12), none of the above worked, so I did a workaround:
Html code:
<div id="wrapper">
<textarea id="editable_container" name="editable_container"></textarea>
</div>
JQuery code:
var iframe = $('#editable_container_ifr');
var editorContent = $('#tinymce[data-id="editable_container"]', iframe.contents()).html();
console.log(editorContent);
Where editable_container is my tinyMCE editor's placeholder textarea, the editable area's iframe id is generated from adding a _ifr postfix to the placeholder's id, and the content-editable container (which contains the formatted text), has an id tinymce with a data-id attribute of the placeholder's id.

Use the getContent() method from the TinyMCE API.
Let’s say you have initialized the editor on a textarea with id=”myTextarea”. First access the editor using that same id, then call getContent(). For example:
var myContent = tinymce.get('myTextarea').getContent();
Or, instead of accessing the editor by id, you can access the active editor:
var myContent = tinymce.activeEditor.getContent();
If want to get the TinyMCE content without the HTML tags, you can pass in a parameter to indicate that you want the result in plaintext. For example:
var myContent = tinymce.get('myTextarea').getContent({format: 'text'});
More info and examples here: https://www.tiny.cloud/blog/how-to-get-content-and-set-content-in-tinymce.

tinymce.get('editorId').setContent(response.data);

This work for me for version 4 (9.8):
var Content = tinyMCE.editors['Your_ID'].getContent();

tinymce.activeEditor.getContent();

For version 4.1.9, this is what worked for me:
$(function(){
$('button').click(() => {
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>
Notes:
.get() requires an ID, not a class
tinymce.get() or tinyMCE.get() both work -- uppercasing the MCE does not matter

If you are more familiar with (and are using the jquery wrapper), you can also do this using this:
$('#editor1').tinymce().getContent();
Where (editor1) is your selector.

Write inside text area with Javascript

I am trying to write something in text area when I click on a link.
function writeText(txt){
document.getElementById("writeArea").innerHTML = txt;
}
I would like to pass html tag in place of txt as parameter to this function so that I can get image, link etc inside text area. Is it possible in Javascript? || JQuery will be good?
Pre-thanks.

Or if jquery tag was there for a reason:
$('#writeArea').val(txt);

You should use value:
document.getElementById("writeArea").value = txt;

If you want to render some images and anchor tags on the screen then don't use a textarea. Use any other container like <div>, <span>, <p> etc.
$("#yourelementid").html(yourtext);
will put the text (in your case HTML) inside the element with id yourelementid
HTML
<p id="para1"></p>
jQuery
var txt = "<a href='http://www.google.com'>Google</a>";
$("#para1").html(txt);
See a working sample

You can easily do it in jQuery if you just want to set the text of a textarea:
$("#yourid").val("hello");
See it working: http://jsfiddle.net/quQqH/
If you're looking to have HTML in it then it needs to be a container element (such as a div).
// Html
<div id="yourid"></div>
//JavaScript
$("#yourid").html('My link');
Otherwise, another option is to have a Rich Text Editor (like Yahoo Editor) so that it renders the HTML that's in the textarea input - this will make it user editable. This is slightly more complicated, as you'll need to include the correct files to make the editor work. Then just do something like the following:
var myEditor = new YAHOO.widget.SimpleEditor('yourid', {
height: '200px',
width: '350px',
toolbar: 0 // Hides the toolbar
});
myEditor.render();
$("#yourid").val("Click for <a href='http://yahoo.com'>Yahoo</a>");
You can see this working: http://jsfiddle.net/quQqH/1/. In this case, I've removed the toolbar by setting it to 0 but it is customisable to show different buttons, etc. Just remove that line to display the default toolbar.

just give like this
$("#ID").val("<img src='images/logo.png' />");

If you want to write long text in the textarea, you can use this way:
HTML
<textarea id="theId"></textarea>
jQuery
var a = 'Test textarea content. Google" ';
$("#theId").val(a);
JS FIDDLE