Simple Block Based Editor for Opencart
Challenges with Third-Party Editors
OpenCart has always used third-party editors. Perhaps due to their complexity, updates can be quite challenging. If there are new updates to the third-party library, it can affect the operation of OpenCart, which is why I wanted to replace this editor.
Exploring a Simpler Solution
A block-based editor is simpler, so I tried Editor.js. It is quite a good editor to use, but the third-party still cannot meet the update needs of OpenCart. Additionally, the third-party loads many unnecessary features, which increases loading time. Therefore, I spent a week writing a simple block-based editor.
Reducing Dependency on Third-Party Libraries
Since this is for internal admin use, security is not a priority. The main goal is to remove third-party code, as OpenCart relies too much on third parties. Besides the editor, there are also jQuery, Bootstrap, and Twig. I hope OpenCart can avoid relying too much on third-party libraries in the future. However, removing jQuery also took a week, but fortunately, with the help of artificial intelligence, I was finally able to remove it all and use native ECMAScript (JavaScript).
Features of the New Editor
This simple editor outputs standard and clean HTML code, and general document styles can be modified. It can be used in full screen. The original OpenCart hid the textarea, but I changed it to be visible for user convenience. All HTML tags are displayed at the top of the blocks, allowing users to know which HTML tags are being used.
Draft Storage Functionality
This simple editor also includes draft storage; when users click to create HTML code, it will be saved in local storage. Initially, I wanted to save automatically at intervals, but that would burden the user’s device memory. When users reopen the editor, it will prompt them with saved drafts, allowing them to click to restore or clear the draft.
Customizable Blocks for Flexibility
All blocks in this editor can be removed or added, and they can be moved up and down. The editor is divided into three blocks: General, Image, and Table. Each block has different options; for example, the General block can convert to other HTML tags, h tags, or list tags. The Image block allows users to upload images and remove or change captions. The Table block can remove or add new rows and columns.
Simplicity and Maintenance Focus
This editor uses native ECMAScript and CSS, with no third-party code. Since this editor is used internally in OpenCart, it does not need powerful or complex features. The main goal is to make maintenance and updates easier. Here, everyone can take a look at the effects of this editor.
Join the conversation and leave a comment with your perspective.
Comment Policy
We welcome and encourage comments on our site, but we ask that you keep your comments respectful and relevant. Here are a few guidelines for commenting:
Stay on topic: Please keep your comments relevant to the article you are commenting on.
Respect our community: Comments that include profanity, hate speech, or personal attacks will not be tolerated. Comments that are solely promotional or spammy in nature will also be deleted.
Be constructive: We encourage thoughtful discussion and constructive criticism, but please keep your comments respectful and focused on the topic at hand.
Use your real name: We encourage commenters to use their real name or a consistent screen name when commenting. Anonymous comments will be deleted.
Moderation: We reserve the right to moderate, edit, or delete any comments that violate our policy.
- All comments must be relevant to the topic of the site post.
- Comments that are spam or solely promotional in nature will be deleted. The policy of deleting spam or promotional comments is an important measure for maintaining a healthy online community. It ensures that the discussion remains genuine and focused on the topic at hand, rather than being hijacked for personal gain. By upholding such policies, websites and platforms can foster productive and respectful discussions, which ultimately benefits all users involved.
- Comments containing profanity, hate speech, or personal attacks will not be tolerated. Online communities and social media platforms have strict policies on comments containing profanity, hate speech, or personal attacks, as they can be detrimental to the mental well being of individuals and destroy the foundation of the community. Members who engage in such behavior risk facing consequences, including removal from the community, and may have their accounts suspended or terminated altogether. To ensure a safe and respectful environment for all members, it is crucial to report such behavior and discourage it as much as possible.
- Comments that infringe upon intellectual property rights, such as copyright or trademark violations, will not be allowed. It is important to recognize and respect the intellectual property rights of others to avoid potential legal issues related to infringement. If you are unsure whether your comment or content may infringe on someone else's intellectual property rights, it is recommended that you seek legal advice or obtain permission from the copyright or trademark owner before sharing the content.
- Comments that disclose personal information, such as phone numbers or email addresses, will not be allowed.
- Comments that are off-topic or contain irrelevant material will be deleted. To avoid having comments deleted as off-topic or irrelevant, it is important to take the time to read and understand the discussion or content being presented, and to ensure that any comments made are directly related to the subject matter at hand. Additionally, it is important to be respectful and constructive in your comments, and to avoid posting any material that could be considered spam or abusive. This will help to ensure that the conversation and content remain relevant and valuable for all those who are participating in or accessing it.
- The author reserves the right to delete any comments for any reason without notice.
Repeat offenders who violate the comment policy may be banned from commenting on the site. Repeat offenders who regularly engage in negative and disruptive behavior or who violate the comment policy may face a ban, which could be temporary or permanent, from commenting on a website or social media platform. This is a measure that is taken when other corrective measures have failed, as it helps to promote positive and healthy online conversations and maintain a respectful community for all users.
Read in new window