Is it possible to use ckeditor on a form input instead of textarea, i am building a CMS and now trying to add ckeditor and majority of of fields are form input not textarea
Thanks in advance
You can use CKEditor on an element (a div, say) that has contenteditable set. In fact, by default contenteditable elements will have CKEditor editors instantiated. It seems unconventional to use a rich text editor on an input of type text but I imagine it could be done.
As far as I know CkEditor has to be created using a textarea. In saying this, I am using it in a Razor MVC view and its one of the classes in my form..
The request will be blocked though and you will get this error;
A potentially dangerous Request.Form value was detected from the
client
To get around this, you need to get the value of the CKEditor text and html encode it. You can do this
when submitting your form, intercept it on the onsubmit function:
<form id="myform" onsubmit="javascript:onFormSubmit(this);return false" >
...
</form>
Then in this onFormSubmit function
Get the value,
Set the property value to the url encoded value
Do a ajax call to your server with the data
Your function will get the CKEditor encoded value like so:
function onFormSubmit(form)
{
var editor = CKEDITOR.instances["EditorId"];
var richtextValue = editor.getData();
var urlEncodedValue = encodeURIComponent(richtextValue);
// TODO rest of code doing ajax post to submit your form and its data
// Here you need to do an ajax call to your server pass it the form data along with the url encoded CKEditor value for that property
}
Related
I have a form working with CSS selector binding and Scala-side validation. Now I want to add javascript validation either via my own jQuery code that I call or else the built-in commands like JsIf.
Here is my current code:
def create = {
"#description" #> SHtml.textarea(maintRV.is.description.get,
name => maintRV.is.description(name) ) &
"#submit" #> SHtml.onSubmitUnit(processSubmit)
}
How can I add onclick or onsubmit behavior to the SHtml.onSubmitUnit binding? I have already used Ajax forms in other parts of my code, but for this page that seems like overkill. I don't mind a regular form submit. I just want to add client-side validation.
I've combed SimplyLift, Exploring Lift and the groups and can't find it.
I have a big problem with Tapestry 5.3.6..
I have a form with a custom simple mixins that implies that form's ids couldnt' be modified :/
So i have this :
<form t:type="form" t:id="formId" t:mixins="aMixins" t:zone="zoneID">
<t:errors/>
<input t:type="TextField"/>
<a t:type="LinkSubmit" t:id="linkId"/>
</form>
<t:zone t:id="zoneID">
Something....
</t:type>
When I use the zone form attribute, the validation errors aren't displayed, how can i make the validation errors displays errors without include the form into a zone ?
I can't include this form into a zone because when my mixin is initialized, it put some listeners on some DOM elements and when i submit my form, the form is reloaded (because of the zone) and reload the mixin too, which add some more listener on new DOM elements and after the submit an event is fired which is catched by corresponding listeners, but some of listeners are linked to unexistant elements and the js crash.
Thanks a lot for your reponses
1 .
I have a form with a custom simple mixins that implies that form's ids
couldnt' be modified
This is not implied. Maybe, it's your requirement?
If not then to plug in your mixin into ajax rendering you need to make the mixin a bit more flexible.
In YourMixin class:
#InjectContainer
private ClientElement element;
void afterRender() {
String elementId = element.getClientId();
JSONObject spec = new JSONObject();
spec.put("elementId", elementId);
jsSupport.addScript("new MixinHandler(%s)", spec.toString());
}
This is just a hint, take a look at Autocomplete implementation (class, javascript) for a complete sample.
2 .
When I use the zone form attribute, the validation isn't working
This sounds doubtful.. I guess validation errors are not visible because you do not update the form itself and its <t:errors/> tag.
This can be verified if you set break points into FAILURE and SUCCESS event handlers of the form in your page (see org.apache.tapestry5.EventConstants).
I have this xml as part of the responseXml of an Ajax call:
<banner-ad>
<title><span style="color:#ffff00;"><strong>Title</strong></span></title>
</banner-ad>
When I used this jQuery(responseXml).find("title").text(); the result is "Title".
I also tried jQuery(responseXml).find("title:first-child") but the result is [object Object].
I want to get the result:
<span style="color:#ffff00;"><strong>Title</strong></span>
Please let me know how to do this in jQuery.
Thanks in advance for any help.
Regards,
Racs
Your problem is that you cannot simply append nodes from one document (the XML response) to another (your HTML page). The issue is two-fold:
You can use jQuery to append nodes from the XML document to the HTML page. This works; the nodes appear in the HTML DOM, but they stay XML nodes and therefore the browser ignores the style attribute, for example. Consequently the text will not be yellow (#ffff00).
As far as I can see, jQuery offers no built-in way to get the XML string (i.e. a serialized node) from an XML node. jQuery can handle XML documents quite well, but there is no equivalent to what .html() does in HTML documents.
So to make this work we need to extract the XML string from the XML document. Some browsers support the .xml property on XML nodes (namely, IE), the others come with an XMLSerializer object:
// find the proper XML node
var $title = $(doc).find("title");
// either use .xml or, when unavailable, an XMLSerializer
var html = $title[0].xml || (new XMLSerializer()).serializeToString($title[0]);
// result:
// '<title><span style="color:#ffff00;"><strong>Title</strong></span></title>'
Then we have to feed this HTML string to jQuery so new, real HTML elements can be created from it:
$("#target").append(html);
There is a fiddle to show this in action: http://jsfiddle.net/Tomalak/QWHj8/. This example also gets rid of the superfluous <title> element.
Anyway. If you have a chance to influence the XML itself, it would make sense to change it:
<banner-ad>
<title><span style="color:#ffff00;"><strong>Title</strong></span></title>
</banner-ad>
Just XML-encode the payload of <title> and you can do this in jQuery:
$("#target").append( $(doc).find("title").text() );
This would probably work:
$(responseXml).find("title").html();
I am trying to target a specific div with the results of a form post.
I have found the below code, but am unclear on where the URL for the page that handles the form data is specified. Any help greatly appreciated.
$("form1").submit(function() {
$.post($(this).attr("action"), $(this).serialize(), function(html) {
$("#someDiv").html(html);
});
return false; // prevent normal submit
});
For example, I want to send form id="form1" to somepage.php, and have somepage.php displayed into div id=someDiv.
In that code-snippet, $(this).attr("action") is the URL: it's taken from the action="..." attribute of the <form> element. If, for whatever reason, you don't want to use that attribute to specify the URL, you can replace $(this).attr("action") with an explicit URL (as a string).
It is defined in the action attribute of your form tag
I'm trying to set the value of a textfield using the following code:
if (ie.TextField(Find.ById("testField")).Exists)
ie.TextField(Find.ById("testField")).Value = "Test";
The code passes without raising an error, however the textfield is not filled with the value.
I get an exception when I execute the following line:
ie.TextField(Find.ById("testField")).Focus()
The textarea is a tiny_mce editor and one of the html attributes is: style="display: none;"...
Any ideas how I can modify the value of such a field using Watin?
Thanks.
First tinymce is not a textarea. tinymce hides your textarea on initialization and creates a contenteditable iframe which is then used to allow text editing, styling aso...
Second if you want to write the editors content back to the hidden textarea you may do this using
tinymce.get('testField').triggerSave();.
Another way to set the value of your textarea is:
tinymce.get('testField').getDocumentById('testField').value = 'new value';
In case you want to write content directly to your tinymce editor you may choose on of the following
tinymce.get('testField').setContent('my_new_content'); // replaces the editors content
or
tinymce.get('testField').execCommand('mceInsertContent',false, 'my_content_to_be_added'); // adds the content at the carat postion
Here is a simple way to handle this using the Watin Eval function:
var js = "tinyMCE.get('body').setContent('" + bodyCont + "')";
var s = ie.Eval(js);
'body' needs to replaced with the id of the textarea that is hidden by tinymce - do a "view source" in your browser window to find this id.