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.
Related
I am using summernote for wysiwyg editor. I am trying to append text to the selected element.
I have tried to append the text to the .note-editable that is created by the summernote script with no luck
<script>
$('#selector').on('change', function () {
let currentTemplate = 'This will come from db';
$('.note-editable').html(currentTemplate);
$('#email_body').summernote();
});
</script>
On change, the wysiwyg editor should be filled with the text from db. This will update every time a different selection is made.
Switch your code like this:
$('#selector').on('change', function () { let currentTemplate =
'This will come from db';
$('#email_body').summernote();
$('.note- editable').html(currentTemplate);});
what you are trying is wrong. you need to get the content using the following code.
change this
$('#email_body').summernote();
to
$('#email_body').summernote('code');
You need to get the html code for summernote
code - get the HTML source code underlying the text in the editor:
$('#email_body').summernote('code');
I am trying to make up a basic text editor, and I used execCommand a lot for this.
However, I want to create a heading in such a way, so that whenever user will click on the heading button(in text editor), the execCommand will make up a new heading and should add id to the newly created heading, so that, later I can create interlinks in document with just a single click.
Let say my input in for heading text editor is:
Create a heading with id
I've tried this to create a heading with id:
document.execCommand('formatBlock', false, header).id = userSelection;
HTML output for this:
<h3>Create a heading with id</h3>
As you can see, the id is not added to the HTML output, so how can I add an id to it?
I've also tried this link but didn't get much:
How to add class or id or CSS style in execCommand formatBlock 'p' tag?
Please help :)
EDIT :
Well, I got a hack to do this:
We can add the id to the newly created tag by using the Query selector so that whenever I will create a new tag using execCommand, I will find that tag by selecting the main div(in which editing is going on), and after finding that header tag, I can simply add the id to it.
Like I used this to create a header tag in div(contenteditable="true"):
document.execCommand('formatBlock', false, header);
And to add 'id' to this newly created tag, use this:
let elemMain = $("#editor " + header);
// this will find the div with id="editor" and then find the header tag inside it.
elemMain[elemMain.length - 1].id = userSelection;
//this will add an id to the last header tag inside of div.
Well, this is just a hack to get work done, but if anyone finds out a direct way to add 'id' to tag using execCommand then most welcome :)
Adding id attribute to the <body> tag here using execCommand.
Using javascript :
var idValue = "body-element";
document.execCommand(document.body.setAttribute("id", idValue));
Using jquery :
var idValue = "body-element";
document.execCommand($('body').attr('id', idValue));
Working snippet for newly created element:
var para = document.createElement("p");
var node = document.createTextNode("This is newly created paragraph ( inspect this element and see the id.)");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
var idValue = "new_id";
document.execCommand(para.setAttribute("id", idValue));
<html>
<body>
<div id="div1">
<p id="p1">This is an old paragraph.</p>
</div>
</body>
</html>
Had the same requirement to use document.execCommand to manipulate a contenteditable element, and eventually resorted to the innerHTML option of execCommand. For example...
document.execCommand("insertHTML", false, "<div id='myId'>Hello World!</div>")
...adds the specified HTML at the insertion point, leaving the HTML element addressable by myId. The drawback to this technique is that one has to construct the HTML string. An alternative is to employ the createElement function, and then reference the outerHTML of the element node when calling execCommand...
let elemNode = document.createElement('div')
elemNode.id = 'myId'
elemNode.innerText = 'Hello World!'
document.execCommand('insertHTML', false, elemNode.outerHTML)
Note that I only tested this on Chrome.
Hope this helps anyone else finding this nook of the internet.
How to get the html of element itself using Jquery html. In the below code I would like get the input element inside div using JQuery as shwon below
<div id="content">content div</div>
<input type='text' id="scheduledDate" class="datetime" />
$(function() {
console.log($('#scheduledDate').html('dsadasdasd'));
$('#content').html($('#scheduledDate').html());
});
EDIT:
Can I get the $("#scheduledDate") as string which represent the real html code of the input box, because my final requirement is I want to pass it to some other SubView( I am using backboneJS) and eventually use that html code in a dust file.
My original requirement was to get that input field as string so that I can pass it to some other function. I know, if I keep it inside a DIV or some other container, I can get the html by using .html method of JQuery. I dont want use some other for that purpose. I am just trying to get html content of the input box itself using it's id.
If you want to move the input element into div, try this:
$('#content').append($('#scheduledDate'));
If you want to copy the input element into div, try this:
$('#content').append($('#scheduledDate').clone());
Note: after move or copy element, the event listener may need be registered again.
$(function() {
var content = $('#content');
var scheduledDate = $('#scheduledDate');
content.empty();
content.append(scheduledDate.clone());
});
As the original author has stated that they explicitly want the html of the input:
$(function() {
var scheduledDate = $('#scheduledDate').clone();
var temporaryElement = $('<div></div>');
var scheduleDateAsString = temporaryElement.append(scheduledDate).html();
// do what you want with the html such as log it
console.log(scheduleDateAsString);
// or store it back into #content
$('#content').empty().append(scheduleDateAsString);
});
Is how I would implement this. See below for a working example:
https://jsfiddle.net/wzy168xy/2/
A plain or pure JavaScript method, can do better...
scheduledDate.outerHTML //HTML5
or calling by
document.getElementById("scheduledDate").outerHTML //HTML4.01 -FF.
should do/return the same, e.g.:
>> '<input id="scheduledDate" type="text" value="" calss="datetime">'
if this, is what you are asking for
fiddle
p.s.: what do you mean by "calss" ? :-)
This can be done the following ways:
1.Input box moved to the div and the div content remains along with the added input
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
$("#content").append($inputBox);
});
2.The div is replaced with the copy of the input box(as nnn pointed out)
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
var $clonedInputBox = $("#scheduledDate").clone();
$("#content").html($clonedInputBox);
});
Div is replaced by the original input box
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
$("#content").html($inputBox);
});
https://jsfiddle.net/atg5m6ym/4485/
EDIT 1:
to get the input html as string inside the div itself use this
$("#scheduledDate").prop('outerHTML')
This will give the input objects html as string
Check this js fiddle and tell if this is what you need
https://jsfiddle.net/atg5m6ym/4496/
I have a tinymce textarea (TinyMCE 3.5.11) that contains an element like
<span id="lastreplytimeee">...</span>
I need to access and change the content of this element using the span id as selector.
I have tried things like
tinyMCE.DOM.setHTML('lastreplytime', $input.val());
None worked.
Any suggestions?
this line is within .ready:
$().ready(function() {
jQuery('.flexy_datepicker_input').datetimepicker({
lang:'tr',
format:'Y-m-d H:i:s',
dayOfWeekStart:1,
onChangeDateTime:function(dp,$input){
document.getElementById("lastreplytimeee").innerHTML = $input.val();
}
});
});
1.Maybe try it,this code gets TinyMCE content and then replace some elements (TinyMCE 5)
tinymce.get('TinyMceID').setContent(
tinymce.get('TinyMceID').getContent().replace(
$(tinymce.get('TinyMceID').dom.doc.getElementById('lastreplytimeee')).get(0).outerHTML,
`<span id="lastreplytimeee">` + newValue + `</span>`)
)
2.or use this
tinymce.get('TinyMceID').dom.setHTML("lastreplytimeee", "newValue");
document.getElementById("id") gets the reference to that particular tag.
.innerHTML is to say assign value or display values in the HTML at that particular div you are referring to above.
Try to use-
document.getElementById("lastreplytimeee").innerHTML = $input.val();
If you are using jQuery, try this-
$("#lastreplytimeee").html = $input.val();
Hope it helps :) Happy Coding!
Found the solution, tinymce requires its dom utility to access and play with an element inside it, like:
tinyMCE.activeEditor.dom.setHTML(tinyMCE.activeEditor.dom.select('selector'), 'some inner html');
I am getting html content as below:
var test='<div id="test">Raj</div>';
How can i retrieve value Raj from above html content using javascript.
It sounds like you're trying to extract the text "Raj" from that HTML snippet?
To get the browser's HTML parser to do your dirty work for you:
// create an empty div
var div = document.createElement("div");
// fill it with your HTML
div.innerHTML = test;
// find the element whose text you want
test = div.getElementById("test");
// extract the text (innerText for IE, textContent for everyone else)
test = test.innerText || test.textContent;
Or in jQuery:
test = $(test).text();
If you use jQuery (I cannot believe I just said that ;)) you can get at the content immediately you wrap it in $(test).html
Someone else will tell you how to get at the innerHTML using a selector since everybody here are jQuery gurus but me
Update: somebody just did while I was editing: javascript: extracting text from html - see comments or updates to that
var test = getElementById('test')
try that