on site sample question
HTML
<textarea id="txt"></textarea>
<input type="button" value="click me" onclick="clk();" id="btn"/>
this text area is a ckeditor
SCRIPT
function clk()
{
alert($("#txt").html());
alert($("#txt").val());
alert($("#txt").text());
// alert($("#txt").innerhtml());
}
$(document).ready(function(){
editor = CKEDITOR.replace( 'txt',{language : 'en',on :{}} );
});
this code alert ' ' how can get innerhtml txt??
on site smaple question
Edit
when edit txt and click on btn then val() alert' '
The textarea is replaced by an iframe ( in a textarea I don't think you can put image ).
This seems to be an answer about how to get content from cke iframe : Get CKEditor content? - jQuery
Try this it will alert something if you have anything in the textarea. Since it is an input element it will have value property so just use val() method.
$("#txt").val();
you have to use getData() to get the innerhtml from CKEditor
click here
$('#txt).val(); works only for simple textarea. And you want to text CKEditor-textarea. See here stackoverflow.com/questions/4826036/get-ckeditor-content-jquery. Looks like your question is related to it.
to get inner text of textarea like .html() method you can use this code to replace \n with
$("#txt").val().replace('\n',"<br />");
Related
I have the following which is fine, it does convert the <p> tags into <br> and wrap the whole text in a <p>. however I am seeing the html tags <p> and <br> inside the text area, how can I only see the line breaks without to see the html tags in it?
<textarea id ="usp-content"><textarea>
$(blurbt).find('p').each(function(){
$( this ).replaceWith( $( this ).text() + "<br/>" );
});
$(blurbt).wrapInner("<p></p>");
var pOnly = $(blurbt).html();
$('#usp-content').text(pOnly);
I'd simply would like to paste the plain text while keeping the line breaks visually not with the <br>
You don't need to use a contenteditable="true".
You can simple do the following:
Change $('#usp-content').text(pOnly); to:
$('#usp-content').val(pOnly.replace(/<br[\s\/]*>/gm, "\n"));
To reverse this incase you are sending the content of the textarea to server side and want html markup, simply use:
var data = $('#usp-content').val().replace(/\\n/gm, "<br>");
We cannot render the html inside a textarea we need to use a contenteditable in a div, see SO Answers here. Therefore in my case I will have to place a div with html formatted and set the textarea as hidden to get the same value as per what user sees.
<div contenteditable="true"></div>
I would like to make a textarea and a div near it similar to what you use in the "ask question" page here in stackoverflow.
You type a text in the textarea and the text is rendered live under the textarea.
I'd like to make this to convert "live" some codes like "a024" typed in the textarea to symbols in the div.
Do I need to use javascript to get this feature?
Thanks.
Yes. That was called DHTML for Dynamic HTML at the beginning of JavaScript.
You will have to use Javascript to create this behavior.
You can get the value of an element with something like:
var source = document.getElementById("sourceTextarea").value;
and set text in a destination element with something like:
document.getElementById("destinationDiv").innerText = "some text";
In your HTML you will have to use :
<textarea id="sourceTextarea"></textarea><div id="destinationDiv"></div>
You will definitely need Javascript to achieve this goal.
You can make use of the 'onkeyup' property of the textarea to bind a javascript function the keyup event.
Once you do this, you can process the texarea value to replace whatever you need to.
function updateMyDiv() {
var myTextarea = document.getElementById("myTextarea");
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = myTextarea.value;
}
<html>
<body>
<textarea id="myTextarea" onkeyup="updateMyDiv()">
</textarea>
<div id="myDiv">
</div>
</body>
</html>
I try to use the same ckeditor replace several time in a ajax form:
... <textarea id="textareaId"></textarea> ...
And a javascript code
CKEDITOR.replace('textareaId');
$('#textareaId').val("first");
CKEDITOR.replace('textareaId');
$('#textareaId').val("second");
Can somepody know why id does not show "second" instead of "first" in the textarea with ckeditor? And how to get the correct value $('#textareaId').val()?
Thank you
I think you should force destroying instance before replace again.
var editor = CKEDITOR.instances['textareaId'];
if (editor) {
editor.destroy(true);
}
CKEDITOR.replace('textareaId');
Ids should be unique, so (I don't use CKEditor btw so no clue what this is trying to achieve but am explaining how ids should be used):
<textarea id="textareaId"></textarea>
<textarea id="textareaId2"></textarea> <!-- changed id -->
CKEDITOR.replace('textareaId');
$('#textareaId').val("first");
CKEDITOR.replace('textareaId2'); /* new id for text area */
$('#textareaId2').val("second");
I have a textarea with CKEditor (bbCode Plugin).
<textarea id="editor1" name="conteudo" class="form-control" rows="3" required></textarea>
This is my CKEditor instance:
$( document ).ready( function() {
$( 'textarea#editor1' ).ckeditor();
} );
I'm making a JSON request that takes a value and I want this value to be modified in this textarea, I tried with jQuery but not worked !
Below is my attempt:
video_id = "lLi1Lx2xTKI";
$.getJSON('http://gdata.youtube.com/feeds/api/videos/'+video_id+'?v=2&alt=jsonc',function(data,status,xhr){
description = data.data.description;
// Attempt here
$("#editor1").html(description);
});
UPDATE
I tried using '.val()' and not worked!
You can't simply add text to the CKEDITOR via jQuery, instead go with api given by CKEDITOR
CKEDITOR.instances.editor1.setData(data.data.description);
Here your code looks like
$.getJSON('http://gdata.youtube.com/feeds/api/videos/'+video_id+'?v=2&alt=jsonc',function(data,status,xhr){
CKEDITOR.instances.editor1.setData(data.data.description);
});
Fiddle
Instead of writing the description directly into the text area, try the CKEditor setData method. You can find a description of it here:
http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-popup
also be sure that your description variable does have a value, I'd use a temporary alert(description); for this but you may be able to do it with a javascript debugger also.
keeping it simple and short, this is my code and I want to have the text content from the text input field to be shown in another div(showcontent)..although no jQuery error is flagging in my firebug..but still it is not showing content in the lower div, let me know what I am doing wrong ?
Also let me know the correct function for this type of functionality if keyup is not appropriate for handling this?
<form>
<input type="text" name="usertext" placeholder="Enter text" id="usertext" />
</form>
<div id="showcontent"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
jQuery(document).ready(function(){
jQuery('#usertext').keyup(function(){
var mytext = jQuery('#usertext').text();
jQuery('#showcontent').html(mytext);
});
});
</script>
I tried jQuery('#usertext').on('keyup',function(){...}); but no help :(
There is proble in reading text from input box
use this
var mytext = jQuery('#usertext').val();
if u are using jquery to get the value of a textbox then u should always use val() method and if u want to get the text inside a span or a div u should use text() method..so u should write your code int the following way
$('#usertext').keyup(function(){
//B.T.W $(this) refers to the current element ie the textbox
$('#showcontent').text($(this).val());
});