TinyMCE: Text Counter not working on readonly toggle - javascript

I have TinyMCE on my website which works fine.
Recently I added the functionality of readonly toggle.
For the readonly toggle I added a field "mytext_readonly".
TinyMCE is initialized in readonly mode, and stays in readonly if the value in "mytext_readonly" is 'readonly', otherwise it becomes editable.
The functionality is working as I want it, except the textcounter isn't working.
The problem is onKeyUp event is not working.
Text counter works if I click on B I U etc on the toolbar(means onExecCommand is working)
I want to know why onKeyUp is not working? And what shall I do to make it work?
tinyMCE.init({
mode : "exact",
elements : "mytext",
debug : false,
nowrap : false,
cleanup_on_startup : true,
fix_nesting : true,
force_br_newlines : true,
force_p_newlines : false,
gecko_spellcheck : true,
forced_root_block : '' ,
readonly : true,
setupcontent_callback : "myCustomSetupContent",
plugins : "preview",
plugins : "AtD,preview",
atd_button_url : "/tinymce-new/jscripts/tiny_mce/plugins/atd-tinymce/atdbuttontr.gif",
atd_css_url : "/tinymce-new/jscripts/tiny_mce/plugins/atd-tinymce/css/content.css",
tab_focus : ':next',
theme : "advanced",
theme_advanced_buttons1_add : "AtD",
theme_advanced_buttons1 : "bold,italic,separator, justifyfull,bullist,numlist,|,charmap,|,undo,redo,|",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
/* the URL of proxy file */
atd_rpc_url : "/common-scripts/tinymce-new/jscripts/tiny_mce/plugins/atd-tinymce/server/proxy.php?url=",
/* set your API key */
atd_rpc_id : "flinstone",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
valid_elements : ""
+"p,"
+"br,"
+"i/em,"
+"ul,"
+"li,"
+"ol,"
+"b/strong,"
+"marquee,"
+"sub,"
+"sup,"
+"table[border|width|height|align],"
+"tr[rowspan|width|height|align|valign],"
+"th,"
+"td[colspan|rowspan|width|height|align|valign]",
setup : function(ed) {
ed.onKeyUp.add(function(ed) {
textCounter('mytext','Charcount',4000);
});
ed.onExecCommand.add(function(ed) {
textCounter('mytext','Charcount',4000);
});
}
});
function myCustomSetupContent(editor_id, body, doc) {
var desc = document.getElementById('item_description').value;
desc = unescape(desc);
if (desc)
{
desc = desc.replace(/''/ig,"'");
desc = desc.replace(/&/ig,'&');
tinyMCE.get('mytext').setContent(desc);
}
textCounter('mytext','Charcount',4000);
if (document.getElementById('mytext_readonly') && document.getElementById('mytext_readonly').value == 'readonly') {
//do nothing
}
else
tinyMCE.get('mytext').getBody().setAttribute('contenteditable', true);
}

Related

Fancybox - how can I show thumbnails by default?

How can I show these thumbnails by default?
Live code example here
I am using Fancybox api for open lightbox by click.
$.fancybox.defaults.buttons = ["zoom", "thumbs", "close" ];
$('.fancybox-btn').click(function () {
$.fancybox.open([
{
src : 'http://placehold.it/300x200?text=1',
opts : {
thumb : 'http://placehold.it/300x200?text=1'
}
},
{
src : 'http://placehold.it/300x200?text=2',
opts : {
thumb : 'http://placehold.it/300x200?text=2'
}
}
]);
});
Add thumbs : { autoStart : true, }, option to second argument of $.fancybox.open:
{
loop : false,
thumbs : {
autoStart : true,
},
}

jsTree disable checkbox not working

I am using jsTree latest version in one of my application.
I want certain checkboxes to be disabled by default.
For that i am referring this.
I have following jstree code:
$("#"+"div_"+aspectid).jstree({
'core' : {
"themes" : { "icons" : false },
'data' : {
'url' : 'include/ajax.php?option=constructtree',
'data' : function (node) {
return { aspectcode : aspectcode, geographylevel : geographylevel };
}
}
},
"types" :
{
"types" : {
"disabled" : {
"check_node" : false,
"uncheck_node" : false
}
}
},
"plugins" : ["themes","html_data","ui","crrm","types", "checkbox"],
"checkbox" : { "two_state" : true }
});
I have added rel=disabled in the li tags
<li id=$childvalue[code] rel='disabled'>
I am not getting any errors and i am able to check and uncheck the node.
What could be the issue?
provide filddler for same.
Inorder to disable check box and make it not to check and uncheck use "onclick= return false"
This functionality has been changed in more recent versions of jstree.
With 3.2, to disable a checkbox set the data-jstree attribute on the LI tag.
<li data-jstree={ "checkbox_disabled": true }>

jQuery Simple Dialog Events

I have a simpledialog2 box, its fully functional but im trying to work out a way to call a function when its been loaded.
For example i have
$('<div>').simpledialog2({
mode : 'blank',
animate : false,
transition : 'none',
// dialogAllow : true,
// dialogForce : true,
headerText : 'Statement Metadata',
blankContent : "HTML HERE"
});
After HTML HERE has been loaded what event is fired? Or how can i call javascript once the simpledialog2 is fuly ready?
Similar to pageshow event handler...
Try the following:
$('<div>').simpledialog2({
mode : 'blank',
animate : false,
transition : 'none',
// dialogAllow : true,
// dialogForce : true,
headerText : 'Statement Metadata',
blankContent : "HTML HERE",
callbackOpen: function() {
var me = this;
alert('opened');
setTimeout(function() {me.close();},2000);
}
});
Fiddle:
http://jsfiddle.net/ykHTa/62/

swfupload check if flash installed

I am using swfupload and wanted to notify the user that they need flash installed for this to work.
I found this: http://swfupload.org/forum/generaldiscussion/2140 although have no idea where I need to implement this.
This is my code:
<script type="text/javascript">
var upload0, upload1, upload2, upload3, upload4, upload5;
window.onload = function () {
upload{$smarty.section.r.index} = new SWFUpload({
// Backend settings
upload_url: "{$REQUEST_URL}{if $swfcallbackid}/id/{$swfcallbackid}{/if}?swfcb={$row.formname}&{php}echo session_name();{/php}={php}echo session_id();{/php}",
file_post_name: "{$row.formname}",
post_params: {"{php}echo session_name();{/php}" : "{php}echo session_id();{/php}"},
// Flash file settings
file_size_limit : "500MB",
file_types : "{$row.mask|default:"*"}", // valid file type mask
file_types_description : "{$row.mask_desc|default:"All Files"}",
file_upload_limit : "0",
file_queue_limit : "1",
// Event handler settings
//swfupload_loaded_handler : swfUploadLoaded,
file_dialog_start_handler: fileDialogStart,
file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
//upload_start_handler : uploadStart, // I could do some client/JavaScript validation here, but I don't need to.
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
// Button Settings
button_image_url : "{$HOME}/webapp/shared/swfupload/XPButtonUploadText_61x22.jpg",
button_placeholder_id : "{$row.formname}_button",
button_width: 63,
button_height: 23,
button_window_mode: "TRANSPARENT",
// Flash Settings
flash_url : "/webapp/shared/swfupload/Flash/swfupload.swf",
custom_settings : {
progressTarget : "{$row.formname}_progress",
cancelButtonId : "{$row.formname}_cancel",
filenameDisplayId : "{$row.formname}"
},
// Debug settings
debug: false
});
}
</script>

render tiny mce from javascript using innerHTML

I have a javascript code like this.
after_add_content_for_popup = "<div><div><textarea name='notes' rows='10' cols='17' class='rich' id='parent_note_content'>"+notecontent+"</textarea></div><div style='float:right;margin-left:20px;padding-left:10px;'><input id='submitbutton' class='flat_btn' style='margin-top:5px;' type='button' title='Edit category note' value='Save' name='submitbutton' onclick=\"update_category_note('P','"+categoryid+"','"+noteidnew+"');\"></div></div>";
document.getElementById('parent_insert_div').innerHTML='';
document.getElementById('parent_insert_div').innerHTML = after_add_content_for_popup;
but it shows only the textarea not the tinymce editor.
You don't appear to be adding TinyMCE in the first place. Please look at the sample code on this page:
http://fiddle.tinymce.com/
Note the code used to add TinyMCE with various options:
tinyMCE.init
({
// General options
mode : "textareas",
theme : "advanced",
plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
width: "100%",
height: "400"
});
So, after including the TinyMCE JS files, you have to also initialize TinyMCE using the code above or something like it.

Categories

Resources