Liferay 7.4, providing users with a flexible yet controlled environment for content creation is crucial. One way to achieve this is by allowing filtered HTML tags in the editor, enabling users to include specific tags while maintaining security and consistency. In this blog post, we'll explore how to modify an editor's configuration in Liferay 7.4 to allow filtered HTML tags, ensuring a balance between customization and security.
Requirement
By default, Liferay's Blog Editor restricts users from using HTML tags and attributes, limiting their ability to customize content. However, there are cases where users may need to include HTML elements for styling or functionality purposes. Enabling HTML tags and attributes in the Blog Editor enhances the content creation experience, empowering users to create richer and more dynamic blog posts.
Steps to Extend the Editor’s Configuration
Let's delve into the steps required to override the default content editor in Liferay 7.4 to allow HTML tags and attributes:
Step 1: Create an OSGI Module
Begin by creating a new module in your Liferay workspace using the Liferay Workspace Gradle plugin:
blade create -t mvc-portlet -p com.st.training.customeditor -c CustomContentEditor custom-content-editor
Replace com.st.training.customeditor with your desired package name.
Step 2: Implement Custom Editor Configuration
Now, we'll implement the custom Blog Editor functionality to allow HTML tags and attributes. In the 'src' directory of the module, create a unique package name. Then, within this package, develop a new Java class that implements the EditorConfigContributor interface. After creating class, the below code is a sample of what class definition could look like when modifying an editor’s configuration:
@Component(
property = {
"editor.config.key=contentEditor", "editor.name=alloyeditor",
"javax.portlet.name=com_liferay_blogs_web_portlet_BlogsPortlet",
"javax.portlet.name=com_liferay_blogs_web_portlet_BlogsAdminPortlet",
"service.ranking:Integer=" + Integer.MAX_VALUE
},
service = EditorConfigContributor.class
)
Step 3: Override populateConfigJSONObject method to allow set of tags, attributes and properties of specified HTML elements.
@Override
public void populateConfigJSONObject(
JSONObject jsonObject, Map<String, Object> inputEditorTaglibAttributes,
ThemeDisplay themeDisplay,
RequestBackedPortletURLFactory requestBackedPortletURLFactory) {
}
This function modifies the original configuration JSON object by incorporating a new configuration. It has the capability to adjust or remove the original configuration, as well as any additional configurations introduced by another EditorConfigContributor. The configuration object contains settings tailored for direct use by the editor, potentially differing from configurations used by other editors in Liferay DXP. As of now, this function lacks functionality. You'll be adding the required logic shortly.
In this class, we're overriding the default Blog Editor configuration to allow all HTML tags and attributes using CKEditor's `allowedContent` configuration option.
jsonObject.put("allowedContent","");
Step 4: Deploy and Test
Build and deploy your custom module to your Liferay instance. Once deployed, users will be able to use HTML tags and attributes freely in the Blog Editor, enhancing their content creation experience.
Things to take care
Security Risks: Allowing HTML tags and attributes may pose security risks if not properly managed. Enterprises must deploy rigorous validation and sanitization procedures to address potential security vulnerabilities effectively.
Complexity: Enabling HTML editing capabilities introduces complexity, particularly for non-technical users who may inadvertently introduce formatting errors or security vulnerabilities.
Content Consistency: Allowing users to insert arbitrary HTML may result in inconsistencies in content formatting and styling across the platform, impacting the overall visual coherence and branding.
Conclusion
By overriding the default Blog Editor in Liferay 7.4 to allow HTML tags and attributes, organizations can provide users with more flexibility and control over their content formatting. This customization empowers users to create richer and more dynamic blog posts while still adhering to the platform's security standards. With Liferay's customization capabilities, organizations can tailor the platform to suit their specific needs and enhance the content creation experience for users.
Unlock limitless possibilities with our comprehensive Liferay Portal Development Services. Explore how we can elevate your digital experience today!
