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);
});
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');
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 would like to modify one tag using javascript. I have a textbox to introduce a postcode and a button to find car parks near the position. The HTML tag is the following:
<script src="http://en.parkopedia.co.uk/js/embeds/mapView.js" data-Location="http://en.parkopedia.co.uk/parking/ST84JF/" data-options="l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2" data-size="750:400" type="text/javascript"></script>
I have two questions:
Can I modify the data-location to add the text write inside the textbox to search in that location?
Can I activate the script only when the button is clicked using javascript or jquery? The main problem here is that the should be inside the HTML code and I don't know how to put it inside the javascript file.
Code updated:
function find(){
$("script[id=script_map]").remove()
var search = document.getElementById('box_txt').value ;
$("<script />", {
"src":"http://en.parkopedia.co.uk/js/embeds/mapView.js",
"data-location":"http://en.parkopedia.co.uk/parking/" + search,
"data-options":"l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2",
"data-size":"750:400",
"id":"script_map",
"type":"text/javascript"
}).appendTo("#divId")
}
Try modifying data-location of script element before appending script element to body at click event of button element . Could alternatively use $.getScript() to retrieve script from external source
$("button").click(function() {
var val = $("input").val();
// Can I activate the script only when the button is clicked
$("<script />", {
"src":"http://en.parkopedia.co.uk/js/embeds/mapView.js",
// Can I modify the data-location to add the text write inside the textbox
// to search in that location?
"data-location":"http://en.parkopedia.co.uk/parking/ST84JF/" + val,
"data-options":"l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2",
"data-size":"750:400",
"type":"text/javascript"
}).appendTo("body")
})
Yes the data-location is simply a custom attribute i believe so just use
document.getElementById("SCRIPTTAGID").setAttribute("data-location", "newValue");
As far as activating the script to execute when a button is pressed you will need to encapse it in a function then call the function in the onClick event of the button.
i want to add a images on the fly with event click and it not replace the currenly something inside div.
my currently code look like this.
HTML
<div id="btn"><img src="images/Leviathan.png"></div>
<div id="ctn" contenteditable="true"></div>
JavaScript
<script>
var btn = document.getElementById('btn');
var ctn = document.getElementById('ctn');
btn.addEventListener('click', function(){
ctn.innerHTML = btn.innerHTML;}, false);
</script>
my currently code is it replaces what i have add to div. let's say inside div. there's a text "Stackoverflow is awesome". when i clicked on images it replace to . it not just add "Stackoverflow is awesome <img src="foo.jpg">"
nb: Answer it on JavaScript not JQuery. thank you for reading :)
Use a +
ctn.innerHTML += btn.innerHTML;
You could use appendChild() http://www.w3schools.com/jsref/met_node_appendchild.asp
var ctn = document.getElementById('ctn');
ctn.appendChild(document.getElementById('btn'));
(Maybe it's better to assign the id to the img tag, then)
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.