I'm trying to pass the input I made in a WYSIWYG editor (CK Editor) to JQuery. Currently it's blank no matter what I input.
HTML:
<textarea type='text' class="ckeditor reply" name='reply'></textarea>
<button type="button" STYLE="align: right;" class="btn btn-info reply_button yGreenButton">Submit Reply</button>
JS:
<script>
$(function()
{
$('.reply_button').click(function(){
var reply=$(this).siblings('.reply').val();
});
});
</script>
The textarea shows up as CKeditor. The current value alerted from the clicking the reply_button is blank, no matter what I put in the CKeditor textarea. How to get the actual content I input to be alerted?
Advice is hugely appreciated.
Best,
It's a CKEditor, you have to use their API:
var editor = CKEDITOR.replace( '.ckeditor' );
editor.getData();
The API docs can be found here.
You've got two options - you can use CKEditor API directly, or CKEditor adapter for jQuery.
To use CKEditor API directly, you need the editor instance. You can get it from the CKEDITOR.instances object using id or name of related textarea or automatically generated name ('editor1', 'editor2', etc). In your case:
var editor = CKEDITOR.instances.reply;
var val = editor.getData();
To use jQuery adapter, you need to load adapters/jquery.js file after ckeditor.js and then you can retrieve value easily:
var val = $( '.ckeditor' ).val();
Just like you would use normal textarea. Read more in the jQuery adapter guide and check the CKEditor with jQuery sample.
Related
Working on a project for my school building an MVC Sinatra application. I want to create a web app that can save and display back snippets/algos using ace editor.
I figured out how to (seemingly) capture form input through ace editor by hiding the input field and assigning the value from ace on change with the snippet below.
//CAPTURE/SET VALUE
var textarea = $('input[name="content"]');
editor.getSession().on("change", function () {
textarea.val(editor.getSession().getValue());
});
my form looks like this
<!--ACE EDITOR-->
<div id="editor"></div>
To open settings panel, inside editor - CTRL+Q (Windows) | CMD+Q (Mac)
<!--------------------------------------------------------->
<!--FORM-->
<form action="/ace" method="POST">
<!--normal-->
<input type="text" name="content" style="display: none;" />
<!--submit-->
<input type="submit" value="Save">
</form>
I can capture the params fine but the problem is it doen't preserve the line breaks so entering...
def something
end
into ace editor and clicking submit gives me back
"def something end"
when I would love in theory to get something like
"def something\n\nend"
or something of the sort.. you get the drift
I need to be able to somehow use the editor to capture input, and on submit assign that to an object attribute so pseudo
snippet = Snippet.new(:content => params[:content])
then be able to call that back and display back on editor in the right format
snippet.content (preserves linebreaks)
Full code and images HERE if you rather visuals.
Any help would be appreciated and if there is anything I'm missing out please let me know.. hope I've supplied sufficient info and detailed properly.
input doesn't accept newlines, you need to use textarea instead.
I need to set in ace editor this data correctly
(myCode):
<p><?php<br />// PHP code goes here<br />?></p>
i cant use
editor.setValue(myData);
becouse myData isn`t clear code (have arbitrary HTML also)
I tried this:
html
<div id="editor" v-html="myData">
</div>
js
var editor = ace.edit("editor");
editor.getSession().setMode("ace/mode/php");
How I can do this ?
My code is
printMsg : function(data) {
$("#message").html(data.bodyText);
...
}
here
data.bodyText = <strong> Test This Text ;/strong>
I am suppose to display data as Test This Text & for that I did
$("#message").html(data.bodyText);
This displayed the text correctly with jquery previous versions (1.9)
Now with jquery 1.10 it displays
<strong> Test This Text </Strong>
Can you please tell me reason for this? & any solution if you have?
are you trying to do something like this?
in jquery 1.10.1 it seems work normally
HTML
<span id='message'></span>
JS
var data = {};
data.bodyText = "<strong>Test This Text;</strong>";
$("#message").html(data.bodyText);
I have a file upload field,that is,<s:file> </s:file>. And I have a button "clear". On clicking this button, the field which has some file link should become empty.Could anyone help me with this?
My code:
<s:file id="filetestplanid2" name="testPlanDto.testFile" label="test"
tooltipIconPath="../../KY/images/common/buttons/uploadBtn.png"
title="Browse" tooltip="Browse..." cssClass="file" />
My javascript:
$('#filetestplanid2').val(null);
$('#filetestplanid2').val("");
I tried these but no luck.
Also tried:
var file = $("#filetestplanid2"); file.replaceWith(file = file.clone(true));
$('#filetestplanid2').html( $('#filetestplanid2').html() );
Assuming
<input type="button" onclick="clearFileElement('filetestplanid2');" />
Vanilla JS
function clearFileElement(fileId){
document.getElementById(fileId).value = '';
};
Demo: http://jsfiddle.net/2nxGr/
Can't make it works with jQuery but basically you have to substitute it with a clone of itself (with all the properties, gained using clone(true)).
Just stick to the plain JS version, it works like a charm.
EDIT
I've found now a very smart solution that works on every browser: https://stackoverflow.com/a/13351234/1654265
You can make it empty using Jquery too, just like this:
$("#filetestplanid2")[0].value = ""
or
$("#filetestplanid2").get(0).value = ""
I am trying to grab text generated by javascript and paste it into a forms input value field. This is what I have so far:
var txt=$('#grabemail').text();
$('#email').val(unescape(txt));
<p id="grabemail" style="color:#fff;">
<script type="text/javascript">formData.display("email")</script>
</p>
The only problem is that when the jQuery grabs the text from #grabemail it not only takes the email but it also takes 'formData.display' so I end up with:
formData.display("email")user#email.com
In the field as opposed to just the email.
I cannot edit the JS inside of the #grabemail div.
Anybody have any ideas on how to fix this?
var txt = unescape($('#grabemail').text());
$('#email').val(txt.replace('formData.display("email")',''));
have you tried this way?
txt=txt.substring(25, txt.length);
This should work.