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");
Related
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 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.
The following var is only working in my script when the text is hard coded in the textarea (e.g. London):
script
var thought = $('textarea[name=search]').val(); //...used in object literal
html
<textarea rows="5" name="search" type="text" id="term">London</textarea>
I'd like to be able to type a search term into the textarea and search for it but it's not working?
I've tried all of the answers below with no luck!? I've therefore included the following in the object literal. It pulls the hard coded value from the textarea (like before) but it doesn't pull a value that is typed in the textarea normally? I thought this might be easier to resolve the problem (the feed not working when the search term is typed in)
search: $('textarea[name=search]').val(),
I'm following this tutorial below for a twitter feed with jquery but adding a textarea to search for terms,topics,hashtags etc is proving difficult to figure out.
Twitter Feed with Jquery linky
Do with keyup or change event of textarea
$("textarea[name='search']").keyup(function(e){
var currentText=this.value;
});
You have a couple options, either search using a click event on some button called Search, or use a change / keyup event to grab the new value each time the field is updated, and perform the search that way:
$("#term").keyup(function() {
console.log(this.value); //theres your value!
});
As stated before, if you use it like this, it will be stored in the thought var and you can call it from whatever function you're using.
Since your method calls it one time probably before you edit it.
At least that is what I'm guessing since your code is obviously not complete ;).
var thought = '';
$('textarea[name=search]').keyUp(function(){
thought = $(this).val();
});
Just add jquery and use below code.
<html>
<head>
//import jquery here
<script>
$(document)
.on("click", "#btn", function(event) {
var thought = $('textarea[name=search]').val();
alert(thought);
});
</script>
</head>
<body>
<textarea rows="5" name="search" type="text" id="term"></textarea>
<input type="button" id="btn" value="click me">
</body>
I want to replace all {baseurl} keywords to proper url in TinyMCE editor. How can i do that?
For example if user will add HTML in editor <img src="{baseurl}/image.jpg" /> i want to see this image in TinyMCE editor - so this will be replaced to <img src="http://mydomain.com
/image.jpg" />
Any ideas?
Here is the code that will replace your editor content. But you will need to do this action at the correct time.
var editor = tinymce.get('my_editor_id'); // use your own editor id here - equals the id of your textarea
var content = editor.getContent();
content = content.replace(/{\$baseurl}/g, 'http://mydomain.com');
editor.setContent(content);
With this solution I was able to modify the content on-the-fly, without replacing the content as whole:
tinymce.init({
setup: (editor)=>{
editor.on('init', ()=>{
$(editor.contentDocument).find('a').prop('title', 'my new title');
});
}
});
Maybe it helps someone :)
I used a very simple code working good with me
tinymce.get("page-content").setContent(''); // 'page-content' as the textarea id
tinymce.get("page-content").execCommand('mceInsertContent', !1, 'New content data');
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 />");