¿Qué es el paquete jQuery de TinyMCE?

Question

Se me ha pedido que use el editor TinyMCE en un proyecto. En la página de descarga, hay un paquete principal, y luego un paquete de jQuery

This package contains special jQuery build of TinyMCE and a jQuery integration plugin. 
tinymce_3_3_7_jquery.zip 

¿Cuál es la acumulación de jQuery TinyMCE? ¿Es solo TinyMCE con las mismas características construidas sobre jQuery? ¿Es estándar TinyMCE pero con algún tipo de complemento que facilita la manipulación de TinyMCE con jQuery? ¿Algo más? Una rápida búsqueda en Internet me dijo "¡es un pequeño MCE con la funcionalidad de jQuery!", Pero tengo curiosidad por saber qué significa.

Answer 1

El plugin jquery le permite usar la sintaxis jquery para adjuntar TinyMCE a un área de texto. Aquí hay un ejemplo de código que ilustra cómo convertir un control de área de texto a un editor wysiwyg, al mismo tiempo que se activan varias opciones de TinyMCE.

<!-- Load jQuery --> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
     google.load("jquery", "1.3"); 
</script> 

<!-- Load jQuery build --> 
<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> 
<script type="text/javascript"> 
tinyMCE.init({ 
     // General options 
     mode : "textareas", 
     theme : "advanced", 
     plugins : "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", 

     // 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,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak", 
     theme_advanced_toolbar_location : "top", 
     theme_advanced_toolbar_align : "left", 
     theme_advanced_statusbar_location : "bottom", 
     theme_advanced_resizing : true, 

     // Example content CSS (should be your site CSS) 
     content_css : "css/example.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 : "Some User", 
       staffid : "991234" 
     } 
}); 
</script> 

<form method="post" action="somepage"> 
     <textarea name="content" style="width:100%"> 
     </textarea> 
</form> 

Es también muy simple para recuperar o actualizar el código HTML WYSIWYG usando el plugin de jQuery.

// Will change the contents of an textarea with the ID "someeditor" 
$('#someeditor').html('Some contents...'); 

// Will change the contents all text areas with the class tinymce 
$('textarea.tinymce').html('Some contents...'); 

// Gets the contents from a specific editor 
alert($('#someeditor').html()); 

Answer 2

Significa que este paquete no contiene ninguna función de javascript que ya esté cubierta por jQuery. es decir, jQuery("selector") para encontrar elementos dom.

Answer 3

La respuesta de Bob Negro es correcto.

Además, el paquete jquery disminuye el tamaño de las descargas de TinyMCE, modificando el código TinyMCE para usar las funciones de JQuery siempre que sea posible (eliminando las implementaciones de tinymce del paquete).

Answer 4

Aquí está el código fuente de un ejemplo del uso del paquete de tinqueces jquery (link). Tinymce ahora está en la versión 4, pero este ejemplo es de la versión 3.x:

<!-- Load jQuery --> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
     google.load("jquery", "1.3"); 
</script> 

<!-- Load jQuery build --> 
<script type="text/javascript" src="../../js/tinymce_3_x/jscripts/tiny_mce/jquery.tinymce.js"></script> 
<script type="text/javascript"> 
     $(function() { 
       $('textarea.tinymce').tinymce({ 
         // Location of TinyMCE script 
         script_url : '../../js/tinymce_3_x/jscripts/tiny_mce/tiny_mce.js', 

         // General options 
         theme : "advanced", 
         plugins : "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", 

         // 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,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak", 
         theme_advanced_toolbar_location : "top", 
         theme_advanced_toolbar_align : "left", 
         theme_advanced_statusbar_location : "bottom", 
         theme_advanced_resizing : true, 

         // Example content CSS (should be your site CSS) 
         content_css : "css/content.css", 

         // Drop lists for link/image/media/template dialogs 
         template_external_list_url : "lists/template_list.js", 
         external_link_list_url : "lists/link_list.js", 
         external_image_list_url : "lists/image_list.js", 
         media_external_list_url : "lists/media_list.js", 

         // Replace values for the template plugin 
         template_replace_values : { 
           username : "Some User", 
           staffid : "991234" 
         } 
       }); 
     }); 
</script> 

<form method="post" action="somepage"> 
     <textarea id="content" name="content" class="tinymce" style="width:100%"> 
     </textarea> 

     <!-- Some integration calls --> 
     <a href="javascript:;" onmousedown="$('#content').tinymce().show();">[Show]</a> 
     <a href="javascript:;" onmousedown="$('#content').tinymce().hide();">[Hide]</a> 
     <a href="javascript:;" onmousedown="$('#content').tinymce().execCommand('Bold');">[Bold]</a> 
     <a href="javascript:;" onmousedown="alert($('#content').html());">[Get contents]</a> 
     <a href="javascript:;" onmousedown="alert($('#content').tinymce().selection.getContent());">[Get selected HTML]</a> 
     <a href="javascript:;" onmousedown="alert($('#content').tinymce().selection.getContent({format : 'text'}));">[Get selected text]</a> 
     <a href="javascript:;" onmousedown="alert($('#content').tinymce().selection.getNode().nodeName);">[Get selected element]</a> 
     <a href="javascript:;" onmousedown="$('#content').tinymce().execCommand('mceInsertContent',false,'<b>Hello world!!</b>');">[Insert HTML]</a> 
     <a href="javascript:;" onmousedown="$('#content').tinymce().execCommand('mceReplaceContent',false,'<b>{$selection}</b>');">[Replace selection]</a> 
</form> 

Espero que esto ayude.