Develop Reference

How can I getting textarea value using javascript and ckeditor4 [duplicate]

I'm a learner as far as JS goes and although I've spent a good few hours reading through tutorials which has helped lots but I'm still having problems figuring out exactly how I find out what a user is typing into a ckeditor textarea.
What I'm trying to do is have it so that when someone types into the textarea, whatever they type appears in a div in a different part of the page.
I've got a simple text input doing that just fine but because the text area is a ckEditor the similar code doesn't work.
I know the answer is here: ckEditor API textarea value but I don't know enough to figure out what I'm meant to do. I don't suppose anyone fancies helping me out?
The code I've got working is:
$('#CampaignTitle').bind("propertychange input", function() {
$('#titleBar').text(this.value);
});
and
<label for="CampaignTitle">Title</label>
<input name="data[Campaign][title]" type="text" id="CampaignTitle" />
and
<div id="titleBar" style="max-width:960px; max-height:76px;"></div>

I'm still having problems figuring out exactly how I find out what a
user is typing into a ckeditor textarea.
Ok, this is fairly easy. Assuming your editor is named "editor1", this will give you an alert with your its contents:
alert(CKEDITOR.instances.editor1.getData());
The harder part is detecting when the user types. From what I can tell, there isn't actually support to do that (and I'm not too impressed with the documentation btw). See this article:
http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html
Instead, I would suggest setting a timer that is going to continuously update your second div with the value of the textarea:
timer = setInterval(updateDiv,100);
function updateDiv(){
var editorText = CKEDITOR.instances.editor1.getData();
$('#trackingDiv').html(editorText);
}
This seems to work just fine. Here's the entire thing for clarity:
<textarea id="editor1" name="editor1">This is sample text</textarea>
<div id="trackingDiv" ></div>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
timer = setInterval(updateDiv,100);
function updateDiv(){
var editorText = CKEDITOR.instances.editor1.getData();
$('#trackingDiv').html(editorText);
}
</script>

At least as of CKEDITOR 4.4.5, you can set up a listener for every change to the editor's contents, rather than running a timer:
CKEDITOR.on("instanceCreated", function(event) {
event.editor.on("change", function () {
$("#trackingDiv").html(event.editor.getData());
});
});
I realize this may be too late for the OP, and doesn't show as the correct answer or have any votes (yet), but I thought I'd update the post for future readers.

Simply execute
CKEDITOR.instances[elementId].getData();
with element id = id of element assigned the editor.

You could integrate a function on JQuery
jQuery.fn.CKEditorValFor = function( element_id ){
return CKEDITOR.instances[element_id].getData();
}
and passing as a parameter the ckeditor element id
var campaign_title_value = $().CKEditorValFor('CampaignTitle');

i found following code working for ckeditor 5
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
editor.model.document.on( 'change:data', () => {
editorData = editor.getData();
} );
} )
.catch( error => {
console.error( error );
} );

Well. You asked about get value from textarea but in your example you are using a input. Anyways, here we go:
$("#CampaignTitle").bind("keyup", function()
{
$("#titleBar").text($(this).val());
});
If you really wanted a textarea change your input type text to this
<textarea id="CampaignTitle"></textarea>
Hope it helps.

you can add the following code :
the ckeditor field data will be stored in $('#ELEMENT_ID').val() via each click. I've used the method and it works very well. ckeditor field data will be saved realtime and will be ready for sending.
$().click(function(){
$('#ELEMENT_ID').val(CKEDITOR.instances['ELEMENT_ID'].getData());
});

var campaignTitle= CKEDITOR.instances['CampaignTitle'].getData();

Generating CKEDITOR does not work on for loop statement using javascript

It is possible to create a ckeditor using for loop statement in javascript? Everytime I generate a ckeditor within textarea, the ckeditor is not show up. Any idea. Thank you.
<script type="text/javascript">
for(var index = 1; index <= 4; index++ ){
str += '<textarea class="ckeditor" name="answer[]"></textarea>';
}
</script>
Sample Image:

Looking at the ckeditor5 readme, it appears that you need to have the HTML textarea(s) already inserted and then call the create method for each textarea, passing its id as the parameter. I pulled this from the readme:
In your HTML page add an element that CKEditor should replace:
<textarea name="content" id="editor"></textarea>
Load the classic editor build (you can choose between CDN, npm and zip downloads):
<script src="https://cdn.ckeditor.com/ckeditor5/<version>/classic/ckeditor.js"></script>
Call the ClassicEditor.create() method:
<script>
ClassicEditor .create(
document.querySelector( '#editor' )
) .catch( error => { console.error( error ); } );
</script>
You’re ready to go!
So, following those instructions, you should be able to call create for each textarea, in your loop, as long as it's been added to the document before you call create().
Edit: If you really want to use an older version of ckeditor, it looks like a previous question mentions using .replace() or .replaceClass()

Shrinking a Table in JavaScript

Never used JavaScript Before and I'm trying to fix this form in share point.
I want this text box to be small (like 1 row), until the user clicks it and then it should expand into a larger text box with like 10 rows. I apologize if this has been answered before, I don't even know what I should be looking for. Here is code I have that doesn't work, but does pop up an error message(I did not write this code):
alert(DescriptionID);
document.getElementById(DescriptionID).addEventListener("onmouseover", function(){
document.getElementById(DescriptionID).rows= "10";
});
document.getElementById(DescriptionID).addEventListener("onmouseout", function(){
document.getElementById(DescriptionID).rows= "1";
});
EDIT:
Here is what the current code will display:
EDIT2:
Thanks to a ton of help from you guys/gals I am close to finished! I can now understand it significantly better at least! Here is a picture of the code. The object is actually an "ms-formbody" ???
AND ANOTHER EDIT:
So here is the error i'm getting after using Johhny's code:

If you are using jQuery, this might work for you:
HTML:
<textarea id="expandingTextarea" rows="1">Enter Text</textarea>
JavaScript:
$(document).ready(function() {
$('#expandingTextarea').on('mouseover', function() {
$(this).attr('rows', '10');
});
$('#expandingTextarea').on('mouseout', function() {
$(this).attr('rows', '1');
});
});
I created an example here.
Update:
Using a click event to change/toggle to row count:
$(document).ready(function() {
$('#expandingTextarea').on('click', toggleExpand);
function toggleExpand() {
var oldRowCount = $(this).attr('rows');
var newRowCount = parseInt(oldRowCount) === 1 ? 10 : 1;
$(this).attr('rows', newRowCount);
}
});
Demo here.

In fact, you don't need JS to achieve what you want. CSS can do it for you.
<!--html-->
<textarea class="descr">This is description</textarea>
/*css*/
.descr {height: 20px;}
.descr:hover, .descr:focus {height: 120px;}

alter the height instead of the "rows" property.
open up the page in chrome, open the developer tools (View->Developer->Developer Tools) and then use "inspect" to select the text area you want to manipulate.
try playing around with the css of that element. then, write your javascript to change just the property that you want.
https://developer.chrome.com/devtools

The code you showed looks fine but DescriptionID should contain the ID of the description box. You can check what it is by right clicking on the description form and clicking "inspect element". Then assign var DescriptionID = "someID" at the beginning of the code.
Also, you might consider altering the height, not the rows.
If the form doesn't have an ID, look for an option to change the HTML and add one. If you don't have such an option, it's still possible to achieve what you want to do but you have to look beyond getElementById.

How can I append Form text to a URL in JQuery, in the following example:

I've seen a few similar posts, but nothing explains a method which fits into my example.
I'm looking to take what has been typed into a Form with the ID "searchbox", and append it to the following script:
Form:
<form method="get">
<span><input type="text" class="search rounded" placeholder="Search..." id='searchbox' autofocus></span>
</form>
JQuery:
$(function(){
$('input[type="text"]').keyup(function(){
var searchText = $(this).val().toLowerCase();
var appendedText= $(this).val();
$('ul > li > a').each(function(){
var currentLiText = $(this).attr('class')
showCurrentLi = currentLiText.indexOf(searchText) !== -1;
$(this).toggle(showCurrentLi);
if (event.which == 13 || event.keyCode == 13) {
chrome.tabs.create({url:'http://www.exampletestsite.com/'+appendText});
return false;
}
return true;
});
});
Most of the code simply filters a list of preset options, pressing enter will load the url appended with the typed text instead of using a clickable preset.
I'm trying to set the 'appendedtext' variable to get what has been typed into the search field, and on Enter press, load a URL with the appended text.
I thought this var would work, but it doesn't:
var appendedText= $('#searchbox').val();
I'm pretty sure I'm just an idiot though, since this seems incredibly simple. Any help would be really appreciated.
EDIT: Added form format for clarity. Fixed code snippet, added some information about the code.

The line var appendedText= $('#searchbox').val(); works perfectly well, as you can see in this fiddle (passing the event parameter isn't necessary, and certainly isn't the root of the problem). However, I got rid of the form and span elements, and the chrome.tabs stuff, so I suspect your issue lies in one of those.
I'm not sure how to help if that's not the actual problem, but as far as jQuery and .val() go, everything's fine.

It turns out my issue was with the $('input[type="text"]').keyup(function(){, specifically 'keyup'. Keyup would clear my searchbox content by default before sending the data which appended to the url. I merely changed it to keydown and everything worked perfectly.
Thanks for all your suggestions.

Is there a way to style textarea content as the user types with javascript and css?

I'm curious if there's a way to style content in a textarea as a user types.
For example:
<textarea>abcdefghijklmnopqrstuvwxyz</textarea>
Could I highlight all the vowels in the above textarea string on screen using javascript? But still only send the string when the form is submitted?

You can use a div with contentEditable attribute instead of textarea and to do the highlighting there.
https://developer.mozilla.org/en-US/docs/HTML/Content_Editable
You will still need to copy the content of this div to a hidden field of a form if you need to post it.

try this
<div contenteditable="true">
This text can be edited by the user.
</div>

give some id to textarea and bind its onkeyup event with jquery function.something like this
$('#id_of_textarea').bind('keyup', function() {
//for displaying vowels on screen
var str=$('#id_of_textarea').val();
var total_findVowels="";
for (var i = 0; i < str.length; i++) {
if (str.charAt(i).match(/[a-zA-Z]/) != null) {
// findVowels
if (str.charAt(i).match(/[aeiouAEIOU]/))
{
total_findVowels=total_findVowels+str.charAt(i);
}
}
//use some label to display all vowels
$("#some_lbl").text(total_findVowels);
}//for
} );

You can see one of those questions for some inspiration. They talk specifically about live syntax highlighting so is it not exactly what you are asking about but maybe close enough, and syntax highlighting seems to be a more common problem so it's easier to find some ready solutions:
Textarea that can do syntax highlighting on the fly?
Are there any JavaScript live syntax highlighters?
https://stackoverflow.com/questions/1505761/textarea-with-syntax-code-highlighting
Live text color change in javascript

If beeing precise and answer only your question:
There is no way to do it, but as others said there are other ways to solve your task

I use the following snipplet:
$( "#yourtextarea" ).bind( "keyup input paste", parseAndReplaceContent );
My parseAndReplaceContent function calls jQuery's $( "#yourtextarea" ).val() to access and modify the data.