NOTICE: All information contained herein is, and remains
the property of TechnoCore.
The intellectual and technical concepts contained
herein are proprietary to TechnoCore and dissemination of this information or reproduction of this material
is strictly forbidden unless prior written permission is obtained
from TechnoCore.
This document breaks down how the ObjFieldTinymce.py component works. Its primary purpose is to provide a rich, WYSIWYG (What You See Is What You Get) editor for markdown content within a web form, leveraging the TinyMCE JavaScript library.
The fundamental design pattern is to enhance a standard HTML <textarea> with a powerful editor while ensuring the edited content can be submitted as part of a form. This is achieved by using two <textarea> elements:
name attribute that the server-side code will process.When the user types or formats text in the TinyMCE editor, a JavaScript event listener captures the changes and continuously synchronizes the content into the hidden textarea.
The Python script defines a class ObjFieldElement that inherits from a base class WebFormElement.WebFormElement. This inheritance provides it with the necessary structure and methods to function as a form field within the broader framework.
class ObjFieldElement(WebFormElement.WebFormElement):
# ...
__init__ MethodThe constructor sets up the component's initial state and, most importantly, includes the necessary JavaScript library for TinyMCE.
_IsA = "TinymceField".self.add_resource_script("https://cdn.jsdelivr.net/npm/tinymce@5/tinymce.min.js") tells the framework's resource manager to add the TinyMCE library to the web page from a Content Delivery Network (CDN). This avoids having to host the library locally.RenderElement MethodThis is the core method that generates the HTML and JavaScript for the editor.
<textarea> elements as described in the Core Concept.
{self.Name}{self.FieldUuid}) that the TinyMCE script will use to target it.name attribute ({self.Name}) for form submission.tinymce.init({...}): This function call aconfigs and activates the editor.selector: '#{self.Name}{self.FieldUuid}': This tells TinyMCE which element to transform.plugins and toolbar_mode: These options configure the features and appearance of the editor.setup: function (editor) { ... }: This is the most critical part of the client-side logic. It sets up a callback function.
editor.on('change', function () { ... }): This registers an event listener. Whenever the content inside the TinyMCE editor changes, the function is executed.document.getElementById('{self.Name}').value = editor.getContent();: This line takes the current content from the editor (editor.getContent()) and updates the value of the hidden textarea, ensuring the form data is always current.In essence, ObjFieldTinymce.py is a self-contained component that renders a sophisticated WYSIWYG editor. It cleverly decouples the user-facing editor from the underlying form data field, using JavaScript to bridge the two, providing a seamless editing experience while maintaining standard form functionality.