Adding HTML Content within an Input Text Area
- Former user (Deleted)
All asset types are defined using RXT files in WSO2 Governance Registry. By default, WSO2 G-Reg does not support HTML content within text input fields of an RXT file. However, you can extend WSO2 G-Reg to add HTML content within a text input field using the WSO2 G-Reg extension model. For an example, follow the steps below to add HTML content to the Description field, which you view in the screen when adding a REST service.
Create a file with the name
default_table.hbsby adding the following content in it.<h2 class="field-title"> <a data-toggle="collapse" href="#collapse{{label}}" aria-expanded="false" class="collapsing-h2" > <i class="cu-btn-exp-col btn-collapsed">{{label}}</i> </a> </h2> <div class="collapse in" id="collapse{{label}}"> {{#eachField this.fields}} <div class="row padding-bottom-lg"> <div class="col-sm-2 text-right">{{label}}</div> {{#if_equal this.name.name "description"}} <div class="col-sm-10">{{{value}}}</div> {{else}} <div class="col-sm-10">{{value}}</div> {{/if_equal}} </div> {{/eachField}} </div> </div>The above code uses triple mustaches to unescape HTML in the value of the text field.
- Add the
default_table.hbsfile to the<G-REG_HOME>/repository/deployment/server/jaggeryapps/publisher/extensions/assets/restservice/themes/default/partials/directory. Add the following code block to the
<G-REG_HOME>/repository/deployment/server/jaggeryapps/store/extensions/assets/restservice/asset.jsfile, to eliminate any<script>tags in HTML content in the G-Reg Store for security concerns.asset.renderer = function(ctx) { var decoratorApi = require('/modules/page-decorators.js').pageDecorators; return { pageDecorators: { sanitizedDescription: function(page) { if (page.assets && page.assets.attributes && page.assets.attributes.overview_description ){ var descriptionInfo=page.assets.attributes.overview_description; var SCRIPT_REGEX = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi; while (SCRIPT_REGEX.test(descriptionInfo)) { descriptionInfo = descriptionInfo.replace(SCRIPT_REGEX, ""); } } } } }; };Add the following code block to the
<G-REG_HOME>/repository/deployment/server/jaggeryapps/publisher/extensions/assets/restservice/asset.jsfile, to eliminate any<script>tags in HTML content in the G-Reg Publisher for security concerns.asset.renderer = function(ctx) { var decoratorApi = require('/modules/page-decorators.js').pageDecorators; return { pageDecorators: { sanitizedDescription: function(page) { if(page.assets.tables && page.assets.tables[0] && page.assets.tables[0].fields && page.assets.tables[0].fields.description && page.assets.tables[0].fields.description.value){ var descriptionInfo=page.assets.tables[0].fields.description.value; var SCRIPT_REGEX = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi; while (SCRIPT_REGEX.test(descriptionInfo)) { descriptionInfo = descriptionInfo.replace(SCRIPT_REGEX, ""); } } } } }; };If you want to add the content to a field that appears for REST Services in WSO2 G-Reg Store also, create a file with the name
asset-attributes.hbsby adding the following content, and add that file to the<G-REG_HOME>/repository/deployment/server/jaggeryapps/store/extensions/assets/restservice/themes/store/partials/directory.<div class="table-responsive"> <div class="col-lg-12"> <h4>Overview</h4><hr> <div class="col-lg-12 table table-striped table-hover divrow"> <div class="col-lg-2">Name</div> {{#if name}} <div class="col-lg-10">{{name}}</div> {{else}} <div class="col-lg-10">{{assetName}}</div> {{/if}} </div> <div class="col-lg-12 divrow"> <div class="col-lg-2">Version</div> <div class="col-lg-10">{{version}}</div> </div> <div class="col-lg-12 divrow"> <div class="col-lg-2">{{t "Description"}}</div> <div class="col-lg-10">{{{this.attributes.overview_description}}}</div> </div> </div> {{#if lifecycle}} <div class="col-lg-12"> <h4>Lifecycle</h4><hr> <div class="col-lg-12 table table-striped table-hover divrow"> <div class="col-lg-2">Name :</div> <div class="col-lg-10">{{lifecycle}}</div> </div> <div class="col-lg-12 divrow"> <div class="col-lg-2">State :</div> <div class="col-lg-10">{{lifecycleState}}</div> </div> </div> {{/if}} {{#if isDependentsPresent}} <div class="col-lg-12"> <h4>Associations</h4><hr> <div class="col-lg-12 table table-striped table-hover divrow"> {{#each dependencies}} <div class="col-lg-2 ">Dependencies :</div> <div class="col-lg-10"><a href="../../../assets/{{this.associationType}}/details/{{this.associationUUID}}">{{this.associationName}}</a></div> {{/each}} </div> <div class="col-lg-12 divrow"> {{#each dependents}} <div class="col-lg-2">Dependents :</div> <div class="col-lg-10"><a href="../../../assets/{{this.associationType}}/details/{{this.associationUUID}}">{{this.associationName}}</a></div> {{/each}} </div> </div> {{/if}} </div>Re-start the WSO2 G-Reg server.
Log in to the G-Reg Publisher using the following URL and admin/admin credentials: https://<G-REG_HOST>:<G-REG_PORT>/publisher
Create a new REST service using the G-Reg Publisher by adding the following HTML content for the text field of Description as shown below.
<p><strong><span style="font-size: medium;">HTML ImprovedCode</span></strong></p> <p>Improved HTML look with more features like:</p> <ol> <li><span style="background-color: #ffff00;">Code highlighting</span></li> <li>Auto-indenting</li> <li><span style="color: #ff0000;">Color Change</span></li> <li><span style="text-decoration: underline;">Underline</span></li> <li>Line Number</li> </ol> <p style="text-align: left;"> </p>
Viewing the content added using HTML
Follow the steps below to view the Description field updated for the REST Service which you created in step 7 above.
- Log in to the G-Reg Publisher using the following URL and admin/admin credentials: https://<G-REG_HOST>:<G-REG_PORT>/publisher
- Select REST Services from the main menu of G-Reg Publisher as shown below.
- Select the corresponding asset, which you created above as shown below.
You view the content you added for the Description filed using HTML as shown below.