Un foro de discusión para nuestra comunidad de hispano hablante

Moderator: amosbatto

By rcsalazar77
#784367
Saludos,
Procesmaker permite la creación de algunos elementos de un form a traves de su Dynaform con html5, pero dentro de los elementos no existe un editor: WYSIWYG HTML. Requiero que el contenido que se ingresa en una forma permita la creación de tablas, pegado de imagenes, justificación, tipo de letra, etc. Esto es factible hacerlo con un WYSIWYG HTML.
Es posible de alguna manera tener un WYSIWYG HTML en dynaforms? o puedo convertir un elemento de dynaforms (por ejemplo un textarea) en un WYSIWYG HTML?

Gracias por su ayuda,
Att,
Roberto
By karlosKamacho
#784937
Hola, bueno processMaker utiliza los Output Documents.
te dejo estos link's para q los puedas revisar y espero que sea la solución que buscas.
    [1] http://wiki.processmaker.com/3.0/Output_Documents
    [2] http://wiki.processmaker.com/index.php/New_WYSIWYG_HTML_Editor#Plugin_Grid_Wizard
#814952
How to insert TinyMCE on all textarea in dynaform?
( PM 2.8 )
Insert custom js in head. gulliver/system/class.headPublisher.php line 254
Code: Select all
         $head .= "       <script type=\"text/javascript\" src=\"/js/tinymce/jscripts/tiny_mce/tiny_mce_src.js\"></script>\n";
         $head .= "       <script type=\"text/javascript\">\n";
         $head .= "           tinymce.init({\n";
         $head .= "               //selector: \"textarea\",\n";
         $head .= "               //plugins: \"autoresize, fullpage, fullscreen\",\n";
         $head .= "               //toolbar: \"fullpage_hide_in_source_view\",\n";
         $head .= "               //plugins: \"advhr,advimage,advlink,advlist,autolink,autoresize,contextmenu,directionality,emotions,example,example_dependency,fullpage,fullscreen,iespell,inlinepopups,insertdatetime,layer,legacyoutput,lists,media,nonbreaking,noneditable,pagebreak,paste,preview,print,save,searchreplace,style,tabfocus,table,template,visualblocks,visualchars,wordcount,xhtmlxtras,pmSimpleUploader,pmVariablePicker,pmGrids,style\",\n";
         $head .= "               mode: \"exact\",\n";         
         $head .= "               elements: \"form[TASK_PRIM],form[music_TASK_PL_PRIM],form[TASK_PRIM_OUT]\",\n";
         $head .= "               //editor_deselector: \"form[REDIRECT_TO_PRIM]\",\n";
         $head .= "               //verify_html: false,\n";
         $head .= "               //popup_css : \"/js/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/dialog.css\",\n";
         $head .= "               theme: \"advanced\",\n";
         $head .= "               skin : \"o2k7\",\n";
         $head .= "               skin_variant : \"silver\",\n";
         $head .= "               \n";
         $head .= "               // Theme options\n";
         $head .= "               //theme_advanced_buttons1 : \"save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect\",\n";
         $head .= "               theme_advanced_buttons1 : \"bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist\",\n";
         $head .= "               //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\",\n";
         $head .= "               theme_advanced_buttons2 : \"undo,redo,|,link,unlink,code,|,insertdate,inserttime,preview,|,forecolor,backcolor,|,hr,removeformat,|,outdent,indent,blockquote\",\n";
         $head .= "               //theme_advanced_buttons3 : \"tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen\",\n";
         $head .= "               //theme_advanced_buttons4 : \"insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage\",\n";
         $head .= "               theme_advanced_toolbar_location : \"top\",\n";
         $head .= "               theme_advanced_toolbar_align : \"left\",\n";
         $head .= "               theme_advanced_statusbar_location : \"bottom\",\n";
         $head .= "               theme_advanced_resizing : \"true\",\n";
         $head .= "               width: \"110mm\"\n";
         $head .= "           });     \n";
         $head .= "       </script>\n";
Result: the editor is displayed. New Field ID = field_id_old + '_ifr'
elements — ID textareas. OR rem 'mode' and 'elements' and unrem 'selector' for all textareas.
User avatar
By amosbatto
#814967
vktRus, Nice trick.
Have you had any problems with the TinyMCE altering the field properties in the HTML so the Dynaform doesn't display its data correctly?
User avatar
By vktRus
#814970
amosbatto wrote: Thu Jun 28, 2018 11:44 pm Have you had any problems with the TinyMCE altering the field properties in the HTML so the Dynaform doesn't display its data correctly?
If use /js/tinymce/jscripts/tiny_mce/tiny_mce_src.js — no problem.
If use /js/tinymce/jscripts/tiny_mce/tiny_mce.js — after submit error "A[x] is undefined"
PM 2.8
And now I think as the next step of the form to show instead of textarea+tinymce only formatted text. JS+outerHTML?

Add to JS on Dynaform:
Code: Select all
var primfields = [
  'TASK_PRIM',
  'music_TASK_PL_PRIM',
  'TASK_PRIM_OUT',
  'TASK_RESULT_PRIM'
];
primfields.forEach(function(item, i, primfields) {
  if (getField(item).value != '') getField(item).outerHTML = getField(item).value;
});
TinyMCE can not find textarea now. Show formatted text only.
Task doesnt have any users.

Amosbatto: One more thing if you can help me with.[…]

Just guide me to implement this?

Hi, I have a text control (rfq_segment) and I wan[…]

Genial!!! gracias. :D i need to translate an[…]