Replace Existing Opencart Editor to New Block Based Editor
In the latest version of OpenCart(4.0.2.3), there are four pages that use the editor. In previous versions, only the product and information pages used the editor. Therefore, changing the editor won’t be too complicated. You just need to replace the two important and commonly used pages first. First, download the two files (file name: blockeditor.css and blockeditor.js) for this block based editor, JavaScript(25.59kB 46.6KB) and CSS(7.61KB 16.1KB). Then upload these two files to admin/view/javascript/.
Next, you need to find the form templates for the product and information pages in admin/view/template/catalog/.
Block Based Editor Information Page
Open and edit file information_form.twig and find line 48:
<textarea name="information_description[{{ language.language_id }}][description]" placeholder="{{ entry_description }}" data-oc-toggle="ckeditor" data-lang="{{ ckeditor }}" class="form-control">{{ information_description[language.language_id] ? information_description[language.language_id].description }}</textarea>
replace with this code:
<div id="editor{{ language.language_id }}{{ information_id }}" class="editor"> <button type="button" class="fullscreen">Fullscreen</button> <div id="blocks{{ language.language_id }}" class="blocks"></div> <div class="bottombar"> <button type="button" data-editor="editor{{ language.language_id }}{{ information_id }}" class="addBlock">+</button> <button type="button" data-editor="editor{{ language.language_id }}{{ information_id }}" class="addImg">+Image</button> <button type="button" data-editor="editor{{ language.language_id }}{{ information_id }}" class="addVideo">+Video</button> <button type="button" data-editor="editor{{ language.language_id }}{{ information_id }}" class="addTable">+Table</button> <button type="button" data-editor="editor{{ language.language_id }}{{ information_id }}" data-box="input-description{{ language.language_id }}{{ information_id }}" class="generate">Generate</button> </div> <textarea id="input-description{{ language.language_id }}{{ information_id }}" name="information_description[{{ language.language_id }}][description]" placeholder="{{ entry_description }}" class="results form-control" data-editor="editor{{ language.language_id }}{{ information_id }}">{{ information_description[language.language_id] ? information_description[language.language_id].description }}</textarea> </div>
replace with this latest updated code:
<div id="editor{{ language.language_id }}{{ information_id }}" class="editor" aria-label="Rich text editor"> <div class="editormenu"> <button type="button" accesskey="p" class="preview" aria-modal="true" data-editor="editor">Preview</button> <button type="button" accesskey="f" class="fullscreen" data-editor="editor">Fullscreen</button> </div> <div id="blocks{{ language.language_id }}" class="blocks"></div> <div class="bottombar"> <button type="button" accesskey="n" data-editor="editor{{ language.language_id }}{{ information_id }}" class="addBlock">+</button> <button type="button" accesskey="i" data-editor="editor{{ language.language_id }}{{ information_id }}" class="addImg">+Image</button> <button type="button" accesskey="v" data-editor="editor{{ language.language_id }}{{ information_id }}" class="addVideo">+Video</button> <button type="button" accesskey="t" data-editor="editor{{ language.language_id }}{{ information_id }}" class="addTable">+Table</button> <button type="button" accesskey="g" data-editor="editor{{ language.language_id }}{{ information_id }}" data-box="input-description{{ language.language_id }}{{ information_id }}" class="generate">Generate</button> </div> <textarea id="input-description{{ language.language_id }}{{ information_id }}" name="information_description[{{ language.language_id }}][description]" placeholder="{{ entry_description }}" class="results form-control" data-editor="editor{{ language.language_id }}{{ information_id }}">{{ information_description[language.language_id] ? information_description[language.language_id].description }}</textarea> </div>
Then insert 2 file Block Based Editor url into the file, find at line 174:
<script type="text/javascript"><!-- $('textarea[data-oc-toggle=\'ckeditor\']').ckeditor({ language:'{{ ckeditor }}' }); //--></script>
Replace the block based editor 2 file links.
<link href="view/javascript/blockeditor.css" rel="stylesheet" /> <script type="text/javascript" src="view/javascript/blockeditor.js"></script>
Done replacing the editor for the information form. You can now try using the new block editor in your admin panel.
Block Based Editor Product Page
Open and edit file product_form.twig and find line 72:
<textarea name="product_description[{{ language.language_id }}][description]" placeholder="{{ entry_description }}" id="input-description-{{ language.language_id }}" data-oc-toggle="ckeditor" data-lang="{{ ckeditor }}" class="w-100 position-relative">{{ product_description[language.language_id] ? product_description[language.language_id].description }}</textarea>
Replace with this code:
<div id="editor{{ language.language_id }}{{ product_id }}" class="editor"> <button type="button" class="fullscreen">Fullscreen</button> <div id="blocks{{ language.language_id }}" class="blocks"></div> <div class="bottombar"> <button type="button" data-editor="editor{{ language.language_id }}{{ product_id }}" class="addBlock">+</button> <button type="button" data-editor="editor{{ language.language_id }}{{ product_id }}" class="addImg">+Image</button> <button type="button" data-editor="editor{{ language.language_id }}{{ product_id }}" class="addVideo">+Video</button> <button type="button" data-editor="editor{{ language.language_id }}{{ product_id }}" class="addTable">+Table</button> <button type="button" data-editor="editor{{ language.language_id }}{{ product_id }}" data-box="input-description{{ language.language_id }}{{ product_id }}" class="generate">Generate</button> </div> <textarea id="input-description{{ language.language_id }}{{ product_id }}" name="product_description[{{ language.language_id }}][description]" placeholder="{{ entry_description }}" id="input-description-{{ language.language_id }}" class="results w-100 position-relative">{{ product_description[language.language_id] ? product_description[language.language_id].description }}</textarea> </div>
replace with this latest updated code:
<div id="editor{{ language.language_id }}{{ product_id }}" class="editor" aria-label="Rich text editor"> <div class="editormenu"> <button type="button" accesskey="p" class="preview" aria-modal="true" data-editor="editor">Preview</button> <button type="button" accesskey="f" class="fullscreen" data-editor="editor">Fullscreen</button> </div> <div id="blocks{{ language.language_id }}" class="blocks"></div> <div class="bottombar"> <button type="button" accesskey="n" data-editor="editor{{ language.language_id }}{{ product_id }}" class="addBlock">+</button> <button type="button" accesskey="i" data-editor="editor{{ language.language_id }}{{ product_id }}" class="addImg">+Image</button> <button type="button" accesskey="v" data-editor="editor{{ language.language_id }}{{ product_id }}" class="addVideo">+Video</button> <button type="button" accesskey="t" data-editor="editor{{ language.language_id }}{{ product_id }}" class="addTable">+Table</button> <button type="button" accesskey="g" data-editor="editor{{ language.language_id }}{{ product_id }}" data-box="input-description{{ language.language_id }}{{ product_id }}" class="generate">Generate</button> </div> <textarea id="input-description{{ language.language_id }}{{ product_id }}" name="product_description[{{ language.language_id }}][description]" placeholder="{{ entry_description }}" class="results form-control" data-editor="editor{{ language.language_id }}{{ product_id }}">{{ product_description[language.language_id] ? product_description[language.language_id].description }}</textarea> </div>
Find in same template start line 1456 select this code:
<script type="text/javascript"><!-- $('textarea[data-oc-toggle=\'ckeditor\']').ckeditor({ language: '{{ ckeditor }}' });
Replace this code:
<link href="view/javascript/blockeditor.css" rel="stylesheet" /> <script type="text/javascript" src="view/javascript/blockeditor.js"></script> <script type="text/javascript"><!--
Done replacing the editor for the product form. Now can testing new block based editor at product form in your admin panel. Visit The Editor on Github for live demo.
Key Functionalities of the Editor
Elevate your OpenCart admin experience with simple user-friendly block-based rich text editor, designed to transform your content management process! Transform your content management today!
- Block-Based Editing: Effortlessly organize your content into distinct blocks, allowing for easy management and rearrangement of text, images, and multimedia elements.
- Rich Text Formatting: Access a wide range of formatting options, including headings, lists, links, and more, to craft visually engaging content without the need for HTML coding.
- User-Friendly Interface: Our intuitive design caters to users of all skill levels, making it simple to navigate and utilize the editor’s powerful features.
- Seamless Integration: This editor is specifically designed to integrate flawlessly with the OpenCart admin panel, providing a cohesive user experience.
- Responsive Design: Enjoy the flexibility of a fully responsive editor, enabling efficient content creation on both desktop and mobile devices.
We'd love to hear from you! Leave a comment with your thoughts.
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