Page 1 of 1

WYSIWYG HTML editor en Dynaforms

Posted: Sun Nov 15, 2015 10:54 pm
by rcsalazar77
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

Re: WYSIWYG HTML editor en Dynaforms

Posted: Wed Mar 23, 2016 10:32 am
by karlosKamacho
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

Re: [SOLVED] WYSIWYG HTML editor en Dynaforms. How to

Posted: Thu Jun 28, 2018 5:43 am
by vktRus
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.

Re: WYSIWYG HTML editor en Dynaforms

Posted: Thu Jun 28, 2018 11:44 pm
by amosbatto
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?

Re: WYSIWYG HTML editor en Dynaforms

Posted: Fri Jun 29, 2018 3:11 am
by vktRus
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.