I am using tinyMCE 3.9.3. The page has already three tinyMCE. When a user clicks the hyperlink with id add_line a new tinyMCE should appear but for some reason it appears only a textarea. The id format of the new textarea is comment+int (for example the first new textarea has id comment4, the second one comment5...).
I tried to convert statically the first new textarea (comment4) to a tinyMCE but I failed.
This is the init of tinyMCE:
tinyMCE.init({
//General options
mode : "textareas",
language : "<?=$_SESSION['interface_lang'];?>",
valid_elements : '*[*]',
forced_root_block: false ,
theme : "advanced",
plugins: "style,table,template","bold,italic,underline,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,outdent,indent,cut,copy,paste,undo,,redo,link,unlink,image,cleanup,help,code,hr,removeformat,formatselect,fontselect,fontsizeselect,styleselect,sub,sup,forecolor,backcolor,forecolorpicker,backcolorpicker,charmap,visualaid,anchor,newdocument,blockquote,separator",
theme_advanced_buttons1 : "formatselect,fontsizeselect,styleselect,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,cut,copy,paste,undo,redo,link,unlink,template",
theme_advanced_buttons2 : "bullist,numlist,image,hr,|,tablecontrols",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Skin options
skin : "o2k7",
skin_variant : "silver",
content_style: ".mce-content-body {font-size:15px;font-family:Arial,sans-serif;}",
// Example content CSS (should be your site CSS)
//content_css : "css/editor.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "/js/template_list.js",
external_link_list_url : "/js/link_list.js",
external_image_list_url : "/js/image_list.js",
media_external_list_url : "/js/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "xxx",
staffid : "xxx"
},
template_templates : [
{
title : "Template",
src : "request_templ/tbl_detail3.html",
description : "Approfondimenti"
},
]
});
That what happen when I click the hyperlink:
$(document).on("click","#add_line",function(){
var num=parseInt($(this).attr("rel"))+1;
$.post("post.php",{new_line:num,req:$(this).attr("req")},
function(data){
$("#table_answer").parent().append(data);
$( "#part"+num ).autocomplete({
source: availableTags2
});
});
$(this).attr("rel",num);
tinyMCE.remove('#comment4'); //here the problem
tinyMCE.init('#comment4');
});
In post.php the new textarea is created:
if(isset($_REQUEST['new_line'])){
$n=$_REQUEST["new_line"];
$text="<tbody class='body_parts' rel=".$n."><tr class='line_add".$n."'>";
$text.="<td><input class='input_parts ui-autocomplete-input' id='part".$n."' placeholder='".$interface["tbl_namep"]." ".$n."'></td>";
$text.="<td><input class='input_parts' id='reference".$n."' placeholder='".$interface["tbl_rif"]." ".$n."'></td>";
$text.="<td><input class='input_parts' id='price".$n."' placeholder='".$interface["tbl_prixt"]." ".$n."'></td>";
$text.="<td><input class='input_parts' id='operation".$n."' placeholder='".$interface["tbl_codopet"]." ".$n."'></td>";
$text.="<td><input class='input_parts' id='description".$n."' placeholder='".$interface["tbl_libt"]." ".$n."'></td>";
$text.="<td><input class='input_parts' id='time".$n."' placeholder='".$interface["tbl_tempt"]."".$n."'></td>";
$text.="<td rowspan='2'><a rel='tps|".$_REQUEST["req"]."' class='new_fft'><img src='images/icons/add_line.png' style='width:20px'>".$interface["lbl_fft_tps"]."</a><br><a rel='pce|".$_REQUEST["req"]."' class='new_fft'><img src='images/icons/add_line.png' style='width:20px'>".$interface["lbl_fft_pce"]."</a></td>";
$text.="</tr>";
$text.="<tr class='line_add".$n."'>";
$text.="<td style='height: 70px'>".$interface["lbl_comment"]."</td>";
$text.="<td style='height: 70px' colspan=5><textarea style='width: 99%' class='input_parts' id='comment".$n."' placeholder='".$interface["tbl_comment"]." ".$n."'></textarea></td>"; //here the new textarea
$text.="<td rowspan='2' style='border:0'><a class='down'><img src='images/down.png'></a><a class='up'><img src='images/up.png'></a><a class='delete_line' rel='".$n."'><img src='images/icons/trash_red.png'></a></td>";
$text.="</tr></tbody>";
echo $text;
}
So how can create a new tinyMCE dinamically? Can help?
Well finally I must answer myself:
$(document).on("click","#add_line",function(){
var num=parseInt($(this).attr("rel"))+1;
$.post("post.php",{new_line:num,req:$(this).attr("req")},
function(data){
$("#table_answer").parent().append(data);
var comment_id = 'comment' + num;
tinyMCE.execCommand('mceAddControl', true, comment_id); //here
$( "#part"+num ).autocomplete({
source: availableTags2
});
});
$(this).attr("rel",num);
I used the function execCommand that transformed the textarea into a tinyMCE.
Related
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);
}
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/
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>
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.
And it won't save.
I use the media plugin to insert a video from youtube.
The movie shows up in preview.
I press insert.
This is what ed.execCommand('mceInsertContent', false, h); outputs in media.js: <img src="http://127.0.0.1:8000/media/admin/tinymce/jscripts/tiny_mce/plugins/media/img/trans.gif" class="mceItemFlash" title="src:'http://www.youtube.com/v/b7wJejHIFEc&feature',width:'376',height:'302'" width="376" height="302" align="" /> when I press insert/submit.
I see a yellow box inside the editor.
I check the source html and all I see is a <p> </p> where the move embed stuff should be.
I save and the yellow box is gone.
Here is my current tinymce init script:
tinyMCE.init({
// General
mode: 'none',
theme: 'advanced',
skin: 'grappelli',
dialog_type: 'window',
browsers: 'gecko,msie,safari,opera',
editor_deselector : 'mceNoEditor',
language: "en",
relative_urls: false,
plugins: 'advimage,advlink,fullscreen,paste,searchreplace,grappelli,grappelli_contextmenu,media',
// callbackss
file_browser_callback: 'CustomFileBrowser',
// Layout
width: 410,
height: 500,
indentation: '10px',
object_resizing: false,
// Accessibility
cleanup_on_startup: true,
accessibility_warnings: false,
remove_trailing_nbsp: true,
fix_list_elements : true,
remove_script_host: true,
// theme_advanced
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_buttons1: "formatselect,styleselect,|,bold,italic,underline,|,bullist,numlist,blockquote,|,undo,redo,|,link,unlink,|,image,media,|,fullscreen,|,grappelli_adv",
theme_advanced_buttons2: "search,|,pasteword,charmap,|,code,|,table,cleanup,grappelli_documentstructure",
theme_advanced_buttons3: "",
theme_advanced_path: false,
theme_advanced_blockformats: "p,h2,h3,h4,pre",
theme_advanced_styles: "[all] clearfix=clearfix;[p] small=small;[img] Image left-aligned=img_left;[img] Image left-aligned (nospace)=img_left_nospacetop;[img] Image right-aligned=img_right;[img] Image right-aligned (nospace)=img_right_nospacetop;[img] Image Block=img_block;[img] Image Block (nospace)=img_block_nospacetop;[div] column span-2=column span-2;[div] column span-4=column span-4;[div] column span-8=column span-8",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
theme_advanced_resizing_use_cookie : true,
theme_advanced_styles: "Image left-aligned=img_left;Image left-aligned (nospace)=img_left_nospacetop;Image right-aligned=img_right;Image right-aligned (nospace)=img_right_nospacetop;Image Block=img_block",
// Adv (?)
advlink_styles: "intern=internal;extern=external",
advimage_update_dimensions_onchange: true,
// grappelli
grappelli_adv_hidden: false,
grappelli_show_documentstructure: 'on',
// elements
/*
valid_elements : [
'-p,','a[href|target=_blank|class]','-strong/-b','-em/-i','-u','-ol',
'-ul','-li','br','img[class|src|alt=|width|height]','-h2,-h3,-h4','-pre','-blockquote','-code','-div'
].join(','),
extended_valid_elements: [
'a[name|class|href|target|title|onclick]',
'img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]',
'br[clearfix]',
'-p[class<clearfix?summary?code]',
'h2[class<clearfix],h3[class<clearfix],h4[class<clearfix]',
'ul[class<clearfix],ol[class<clearfix]',
'div[class]',
'object[align<bottom?left?middle?right?top|archive|border|class|classid'
+ "|codebase|codetype|data|declare|dir<ltr?rtl|height|hspace|id|lang|name"
+ "|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
+ "|onmouseout|onmouseover|onmouseup|standby|style|tabindex|title|type|usemap"
+ "|vspace|width]",
'param[id|name|type|value|valuetype<DATA?OBJECT?REF]',
'embed[src|type|width|height|flashvars|wmode]',
'address'
].join(','),
valid_child_elements : [
'h1/h2/h3/h4/h5/h6/a[%itrans_na]', 'table[thead|tbody|tfoot|tr|td]',
'strong/b/p/div/em/i/td[%itrans|#text]', 'body[%btrans|#text]'
].join(',')
*/
// custom cleanup
// setup: function(ed) {
// // Gets executed before DOM to HTML string serialization
// ed.onBeforeGetContent.add(function(ed, o) {
// // State get is set when contents is extracted from editor
// if (o.get) {
// // Remove empty paragraphs (because this is bad)
// tinymce.each(ed.dom.select('p', o.node), function(n) {
// alert(n.firstChild);
// ed.dom.remove(n);
// });
// // Remove douple spaces
// // o.content = o.content.replace(/<(strong|b)([^>]*)>/g, '');
// }
// });
// }
});
Edit:
Ok I added cleanup: false to my init script. And now, all I get in my source is this:
<img src="http://127.0.0.1:8000/media/admin/tinymce/jscripts/tiny_mce/plugins/media/img/trans.gif" _mce_src="/media/admin/tinymce/jscripts/tiny_mce/plugins/media/img/trans.gif" class="mceItemFlash" title="src:'http://www.youtube.com/v/b7wJejHIFEc&feature',width:'376',height:'302'" width="376" height="302" align="">
This also shows up in my HTML.
Should TinyMCE not replace this with some embed code, or do I need to do that myself with some javascript?
Solution :
Update tinymce to latest release (3.3.9.2), along with all the plugins. I turned cleanup back on and now it works.