Question

Adding Rich Text

Hello,

 

Is there a way to make the feed post text box a rich textbox like the image i have attached?

Like 0

Like

3 comments
Best reply

     Hi Michael,

 

    Yes, it can be implemented via additional development.
    
    You can create a module (e.g. GlbExtendedHtmlEditModule) extending ESNHtmlEditModule with the template (tpl) from ExtendedHtmlEditModule:

 

define("GlbExtendedHtmlEditModule", ["ESNHtmlEditModule"], function() {
 Ext.define("Terrasoft.controls.GlbExtendedHtmlEditModule", {
 extend: "Terrasoft.ESNHtmlEdit",
 alternateClassName: "Terrasoft.GlbExtendedHtmlEdit",
 tpl: [
 //jscs:disable
 /*jshint quotmark: false */
 "<div id=\"{id}-html-edit\" class=\"{htmlEditClass}\" style=\"{htmlEditStyle}\">",
 "<div style=\"display: table-row;\">",
 "<div id=\"{id}-html-edit-toolbar\" class=\"{htmlEditToolbarClass}\">",
 "<div id=\"html-edit-toolbar-undo\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'undo' || tag == 'redo'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-font-family\" class=\"{htmlEditToolbarButtonGroupClass}\" style=\"{htmlEditFo" +
 "ntFamilyStyle}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'fontFamily'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-font-size\" class=\"{htmlEditToolbarButtonGroupClass}\" style=\"{htmlEditFont" +
 "SizeStyle}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'fontSize'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-font-style\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'fontStyleBold' || tag == 'fontStyleItalic' || tag == 'fontStyleUnderline'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-font-color\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'fontColor'\">",
 " <@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-highlight\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'hightlightColor'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-list\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'numberedList' || tag == 'bulletedList'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-justify\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'justifyLeft' || tag == 'justifyCenter' || tag == 'justifyRight'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-indent\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'outdentList' || tag == 'indentList'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-image\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'image'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-link\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'link'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-justify\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'htmlMode' || tag == 'plainMode'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-tools\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'maximized'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"{id}-html-edit-toolbar-table\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'table'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-addTemplate\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'addTemplate'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-addMacros\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'addMacros'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "</div>",
 "</div>",
 "<div style=\"display: table-row;\">",
 "<div id=\"{id}-html-edit-htmltext\" class=\"{htmlEditTextareaClass}\">",
 "<textarea id=\"{id}-html-edit-textarea\" style=\"border: none\"></textarea>",
 "</div>",
 "<div id=\"{id}-html-edit-plaintext\" class=\"{htmlEditTextareaClass}\" style=\"margin-bottom: 24px;\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'plainText'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "</div>",
 "<span id=\"{id}-validation\" class=\"{validationClass}\" style=\"{validationStyle}\">" +
 "{validationText}</span>",
 "</div>"
 /*jshint quotmark: true */
 //jscs:enable
 ]
 });
});

 

And replace SocialFeed (ESN):

 

define("SocialFeed", ["GlbExtendedHtmlEditModule"], function() {
 return {
 diff: /**SCHEMA_DIFF*/[
 {
 "operation": "merge",
 "name": "SocialMessageEdit",
 "values": {
 "className": "Terrasoft.GlbExtendedHtmlEdit",
 }
 }
 ]/**SCHEMA_DIFF*/
 };
});

Please find the result example attached.

Thank you for choosing Creatio!

     Hi Michael,

 

    Yes, it can be implemented via additional development.
    
    You can create a module (e.g. GlbExtendedHtmlEditModule) extending ESNHtmlEditModule with the template (tpl) from ExtendedHtmlEditModule:

 

define("GlbExtendedHtmlEditModule", ["ESNHtmlEditModule"], function() {
 Ext.define("Terrasoft.controls.GlbExtendedHtmlEditModule", {
 extend: "Terrasoft.ESNHtmlEdit",
 alternateClassName: "Terrasoft.GlbExtendedHtmlEdit",
 tpl: [
 //jscs:disable
 /*jshint quotmark: false */
 "<div id=\"{id}-html-edit\" class=\"{htmlEditClass}\" style=\"{htmlEditStyle}\">",
 "<div style=\"display: table-row;\">",
 "<div id=\"{id}-html-edit-toolbar\" class=\"{htmlEditToolbarClass}\">",
 "<div id=\"html-edit-toolbar-undo\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'undo' || tag == 'redo'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-font-family\" class=\"{htmlEditToolbarButtonGroupClass}\" style=\"{htmlEditFo" +
 "ntFamilyStyle}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'fontFamily'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-font-size\" class=\"{htmlEditToolbarButtonGroupClass}\" style=\"{htmlEditFont" +
 "SizeStyle}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'fontSize'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-font-style\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'fontStyleBold' || tag == 'fontStyleItalic' || tag == 'fontStyleUnderline'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-font-color\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'fontColor'\">",
 " <@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-highlight\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'hightlightColor'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-list\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'numberedList' || tag == 'bulletedList'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-justify\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'justifyLeft' || tag == 'justifyCenter' || tag == 'justifyRight'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-indent\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'outdentList' || tag == 'indentList'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-image\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'image'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-link\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'link'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-justify\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'htmlMode' || tag == 'plainMode'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-tools\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'maximized'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"{id}-html-edit-toolbar-table\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'table'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-addTemplate\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'addTemplate'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "<div id=\"html-edit-toolbar-addMacros\" class=\"{htmlEditToolbarButtonGroupClass}\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'addMacros'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "</div>",
 "</div>",
 "<div style=\"display: table-row;\">",
 "<div id=\"{id}-html-edit-htmltext\" class=\"{htmlEditTextareaClass}\">",
 "<textarea id=\"{id}-html-edit-textarea\" style=\"border: none\"></textarea>",
 "</div>",
 "<div id=\"{id}-html-edit-plaintext\" class=\"{htmlEditTextareaClass}\" style=\"margin-bottom: 24px;\">",
 "<tpl for=\"items\">",
 "<tpl if=\"tag == 'plainText'\">",
 "<@item>",
 "</tpl>",
 "</tpl>",
 "</div>",
 "</div>",
 "<span id=\"{id}-validation\" class=\"{validationClass}\" style=\"{validationStyle}\">" +
 "{validationText}</span>",
 "</div>"
 /*jshint quotmark: true */
 //jscs:enable
 ]
 });
});

 

And replace SocialFeed (ESN):

 

define("SocialFeed", ["GlbExtendedHtmlEditModule"], function() {
 return {
 diff: /**SCHEMA_DIFF*/[
 {
 "operation": "merge",
 "name": "SocialMessageEdit",
 "values": {
 "className": "Terrasoft.GlbExtendedHtmlEdit",
 }
 }
 ]/**SCHEMA_DIFF*/
 };
});

Please find the result example attached.

Thank you for choosing Creatio!

Bohdan Zdor,

Does this wok on Creatio hosted environments?

Michael Dorfman,

 

    Unfortunately, we do not have an experience of such functionality implementation.
     Though, it should work on Creatio hosted environments.

    Thank you. 

Show all comments