Part of the Developer Toolbox Series.
Related Tools:
"Expand Message HTML Editor +" Tool for Email Notifications
"Expand Message HTML Editor +" Tool for Email Templates
Here's a tool to help Knowledge article editors expand the article editor to a useful size.
The default height of an HTML field editor is controlled by the "editor.height" attribute on the Dictionary Entry of the field:
Every user will see the control set to that height until they change the height by clicking either the - or + icon at the top-right of the control:
Clicking either icon will change the height AND create/update a User Preference record for that particular field.
The + icon allows users to expand the height of the control, but for some reason is limited to a maximum height of either just 435 pixels, or whatever is listed in the User Preference record for the field, whichever is greater. Now the User Preference record is only set by both of those icons when they are clicked, so there's not much flexibility in how to set that preference. The resize control at the bottom-right of the control is also limited to those maximums:
So I created a Form button UI Action that will simply keep adding 60 pixels to the height of the control without limits:
I use 60 because that is also what the - and + icons use. The + icon may not be active when the maximum height is reached, but the UI Action still is. It will expand the editor and create/update the User Preference record so that the height remains the same the next time you open a record.
Here are the UI Action details:
Name: Expand Article Editor +
Table: Knowledge [kb_knowledge]
Order: -1,000
Action name: u_fpc_expand_article_editor
Hint: Expand the height of the Article editor (FPC)
Form button: Checked
Onclick: uFpcExpandArticleEditor();
Isolate script: false VERY IMPORTANT, may have to switch to List view to set
Script:
function uFpcExpandArticleEditor() {
var tableName = g_form.getTableName();
var fieldName = "text";
var fullFieldName = tableName + "." + fieldName;
var fieldLabel = g_form.getLabelOf(fieldName);
var change = 60;
var preferenceName = "tinymce_height." + fullFieldName;
//find the div via the field label (not the best way)
var editor = document.getElementById("element." + fullFieldName);
if (editor) {
var div = editor.querySelector('[role="application"]');
if (div) {
var height = parseInt(div.style.height) || 300; //default to 300 if we can't get the height for some reason
var newHeight = height + parseInt(change);
//expand the height of the div
div.style.height = newHeight + "px";
//then save the height for next time
setPreference(preferenceName, newHeight);
}
}
}
NOTE: It seems, in versions prior to Vancouver, the maximum height of 435 is used when a record is reloaded instead of the new value in the User Preference. You can expand the control again, but that 435 limit will be used the next time a record is opened.
I've attached an XML file for the UI Action record so you can just import it into your instance. As always, try it out in your company's development instance first, or better yet, your own personal development instance.
