I'm using the ck-editor(4.4.6). In Ck-editor's textarea I want to update my text, for that I use setData("hai"); that text updating correctly but some plugin functionality not working after use this setData(); (eg. restrict multiple enter if I reload the page it's working correctly).
editorInstance.setData("test text");
Anyway first time and after reload the page it working fine.
ruby on rails with jquery things are I'm using.
How can I solve this?
I don't know about ck-editor(4.4.6) but i can give you a way to solve it. You have to use based on your parent class. First time it works because it was same but after that it did't find the class/your specific term/attribute. So you have to use by calling parent class/id and under your activity.
You will need to call the update element function after setting the data, this will actually set the value in the field.
And, also you will need to specify the id of the textarea as given below.
CKEDITOR.instances.id_of_textarea.setData('hai');
CKEDITOR.instances.id_of_textarea.updateElement();
Finally, I got the answer instead of set data I just add my content to CKEditor text area as link this its working fine:
$('#cke_editor1 iframe').contents().find('body').html("Your text");
Related
My current project creates user forms dynamically from a database. One of the tables defines what type of input a question should be formatted for the user. I am having difficulties getting a slider UI element working with this paradigm. SelectToUISlider, originally designed by the Filament Group, seems to be a good fit; however, I have been unsuccessful calling the UDF on the generic SELECT element from JQuery when there are more than one on a page.
If there is only a single SELECT I have no issues. If I hard-code the ID tag to be selected I have no issues. But getting it to use the ^= or |= selector has been completely unsuccessful.
Any help is appreciated.
$("select[id^='slider']").selectToUISlider();
http://jsfiddle.net/wolfphantom/zuvtpnLg/1/
As stated in the JsFiddle example you have provided it is working, isn't it?
So it seems you have a problem related to the dynamic select that gets populated at run-time after a certain operation...
So If you want to initiate the selectToUISlider on a single strip you can do is,
$(document).find("select[id^='slider']").selectToUISlider();
And i have created a Demo JsFiddle that includes a dynamic select being added in run-time.
But you want to implement selectToUISlider for each and every select individually, then why not run the loop on those element and initialize it individually.
$("select[id^='slider']").each(function(){
$(this).selectToUISlider();
});
So, the downfall, however will be, it will not work on dynamic elements, So you need to initialize those after the element is added to the DOM.
And here is the Demo JsFiddle for it.
P.S
I don't have a prior knowledge of the plugin, But I hope it will work for you.
Regards.
I am using CkEditor to edit content and calling that page via ajax. It is working fine for first page load. But when I load another page, in console I see error that Instance is already exists. So tried to replace all textarea using CKEDITOR.replaceAll(); in everypage. But Again I get same error. When I searched for this error. I came accross other stackoverflow question With answer
if(editor.instance(Instancename) {
CKEDITOR.instances.textarea.destroy();
}
But I have multiple textarea,generated randomly so I can not use that code as I don't know id or name of textarea. Anyone have better suggesation what I should do to replace textarea to ckeditor?
When you are using CKEDITOR.replaceAll()
will create an instance but you are not reloading the page, so it will not destroy.
You have to distroy it manually.
But as you said you have multiple textarea generated randomly, you can use
CKEDITOR.replaceAll('className');
All you have to do is give classes to text-area (same class in onepage) and write this code right after you appending html to div.
And use /ckeditor/adapters/jquery.js
I used AspTokenInput Which is used as AutoComplete TextBox to create Tags .
I use this Link To know How to Use it.
It's Works Fine For Me and give Result As I want.
Now I want to Make This Control Enabled or Disabled On a Button Click according To Condition.
I Use this on Button Click
AspTokenInput.Enabled = "False"
But it's not Working...
Your problem is that the jQuery Tokeninput field cannot be disabled serverside.
See (http://loopj.com/jquery-tokeninput/) for documentation on this library if you want to try and finagle the js on and off. At a glance, I don't see an enable/disable flag or method. You may need to dig into the ASPTokenInput library to see how it pulls its data source, and then enable/disable the plugin with:
$("#my-text-input").tokenInput("clear"); //disable
$("#my-text-input").tokenInput("/url/to/ASPTokenInput/Datasource/");//reenable
The problem with this approach is that it basically goes around the ASPTokenInput layer, which kind of defeats the point.
My secondary approach was to try a hack, but hiding the dropdown isn't the greatest solution (or even easy in this case), nor is having the check box swap the autocomplete input for another. Swapping text boxes is probably the simplest solution.
I was trying to remove a certain div element from my HTML using jQuery I saw this Use jquery to remove a div with no children, the jquery remove methods work perfectly fine but the problem is of Persistence,
Actually i want to permanently remove that div for that person, i was storing this in cookies but the problem is this remove method doesn't actually remove the code so when I parse through the code to store it using the cookies i store the removed code also. is there any way i can achieve a permanent removal for particular person??
Thanks
Pranay
Since many people are confused here is what I was trying to achieve http://virtser.net/inettuts/ this was demo of http://james.padolsey.com/javascript/inettuts-with-cookies/ where he extended functionality of his code by adding Cokkiee support to retain the widget positions.
This code works fine for moving editing and collapse or expanding widget. It saves everything in cookie but for delete this does't work. It delete the widget but when i try to save it in cookie since the div element is present in code it does't save the deleted item
jQuery isn't ideal for permanent removal of elements from a page as it's stateless.
Its a client side wrapper for javascript to interact with the DOM. While in theory, you can have it remove elements from the DOM based on readable cookies a particular user may have after a page has loaded, it's not ideal when server side coding could handle this without much effort.
to remove it permanently you have to use serverside language for example php
You could revert the process and add the DIV for specific users instead, leaving the data in the .js instead.
To remove DIV "permanently" you have to use serverside lang. The logic is simple:
Remove DIV from HTML
Save some info about user and removed DIV in cookies
In serverside script you have to get cookie and check did user disable any div or not. If he did your script should skip DIV generation
I am looking for some help autosaving tinyMCE. I want to save the content within tiny into its respective textarea after content has been updated. So that when I make an ajax call the content is in the textarea ready to be posted.
Currently I have this little bit of code but it only updates the text area when you press a button in tiny (like bold, italics, underline, etc). I also have the link where I found the code. Any help would be appreciated.
$('.AjaxEdit textarea.tiny').tinymce({
//other init options
//need this function to save tiny data before Ajax call
//http://www.webmasterkitchen.com/article/tinymce-ajax-form-submission/
setup : function(ed) {
ed.onChange.add(function(ed) {
tinyMCE.triggerSave();
});
}
});
You're best bet is to adjust your AJAX call so it pulls the content straight from TinyMCE or triggerSave just before the AJAX call rather than trying to constantly have the textarea in sync with the editor content. Serialising and filtering the entire document so it can be stored on every change is a major performance hit.
If you really need to keep the textarea in sync, you'd have to add DOM modification listeners to the document in the iframe that TinyMCE creates to store the content - you can retrieve it with the getDoc() function (see http://tinymce.ephox.com/documentation/api/index.html#class_tinymce.Editor.html-getDoc). You are going to have major performance problems here though.
Regards,
Adrian Sutton
http://tinymce.ephox.com
Though the question is quite old, I've came accross while searching for a plugin. At the end I've implemented my own plugin.
I have written a plugin that sends the form data to the specified url every x seconds. I have blogged it here.
In short, the idea is to create an iframe, change the target and action of the form dynamically, and submit the form to stimulate an ajax effect. Once saved, I am putting the form element into its initial state so that if the user wants to save manually he or she will not have any difficulties.
Please note that the plugin I've written is for tinymce4. You'll have to change the source code a bit for older versions.
You should take a look at this autosave plugin http://code.google.com/p/tinyautosave/
FYI, I have done it like this:
$('textarea.wysiwyg').tinymce({
...
onchange_callback : function(inst) {
// Prints the DOM element (textarea) to the console.
console.log( inst.getElement() );
// Prints the content of tinyMCE to the console.
console.log( inst.getBody().innerHTML );
}
});
Official documentation on the onchange_callback event