Keikai Doc PE is a lightweight rich text editor component. It provides essential text editing capabilities and HTML content manipulation.

This component enables Java developers to efficiently implement rich text editing functionality in their web applications, with comprehensive support for text formatting, tables, lists, and other standard editing features. It also offers a smooth upgrade path to the full-featured Keikai Doc EE, making it easy to scale up when more advanced capabilities are needed.

<zk>
    <div sclass="docDemo">
        <groupbox closable="false" style="margin-bottom: 20px; min-width: max-content;">
            <caption>Toolbar Config</caption>
            <radiogroup>
                <attribute name="onCheck"><![CDATA[
                doc.setCustomConfigurationsPath(self.getSelectedItem().getValue());
                saveBtn.visible=true;
                editBtn.visible=false;
                doc.readonly=false;
            ]]></attribute>
                <div sclass="radio-config">
                    <radio label="Default ToolBar Config" checked="true"/>
                    <radio label="Simple ToolBar Config" value="/demo/doc/SimpleToolBar.json"/>
                    <radio label="Multi ToolBar Config" value="/demo/doc/MultiToolBar.json" class="multiConfig"/>
                </div>
            </radiogroup>
        </groupbox>
        <div sclass="contentArea">
            <attribute name="onDoubleClick"><![CDATA[
                                if(doc.readonly) {
                                    saveBtn.visible=true;
                                    editBtn.visible=false;
                                    doc.readonly=false;
                                    doc.customConfigurationsPath=docConfig.getSelectedItem().getValue();
                                }
                            ]]></attribute>
            <document id="doc" class="doc" height="100%">
                <attribute name="value"><![CDATA[
        <h2>Meeting Notes: Product Development</h2>
        <p><b>Date:</b> May 16, 2024</p>
        <img src="https://www.zkoss.org/resource/img/price/Features.svg"/>
        <h3>Key Decisions</h3>
        <p style="text-align:justify">The team has agreed to focus on delivering the core functionality first, with additional features to be developed in future releases. <span style="color:red">Deadline for MVP is September 18th</span>.</p>
        <blockquote>Note: All teams must submit their resource requirements by next Friday.</blockquote>
        <h3>Action Items</h3>
        <table border="1" style="width:100%">
            <tr>
                <th>Task</th>
                <th>Assigned To</th>
                <th>Due Date</th>
            </tr>
            <tr>
                <td>Finalize UI mockups</td>
                <td>Design Team</td>
                <td>June 22</td>
            </tr>
            <tr>
                <td>Complete API documentation</td>
                <td>Development Team</td>
                <td><span style="background-color:yellow">July 30</span></td>
            </tr>
            <tr>
                <td>Prepare marketing materials</td>
                <td>Marketing Team</td>
                <td>August 15</td>
            </tr>
        </table>
        <h3>Next Steps</h3>
        <ol>
            <li>Weekly status updates via email</li>
            <li>Follow-up meeting scheduled for <u>January 29th</u></li>
            <li>Share meeting notes with <a href="mailto:stakeholders@example.com">all stakeholders</a></li>
        </ol>
        <br>
    ]]></attribute>
            </document>
        </div>

        <div style="display: flex;flex-direction: row-reverse; margin-top:20px">
            <button id="saveBtn" label="Save" class="doc-btn">
                <attribute name="onClick"><![CDATA[
                                editBtn.visible = true;
                                saveBtn.visible = false;
                                doc.readonly = true;
                                doc.customConfigurationsPath = "/demo/doc/EmptyToolBar.json";
                            ]]></attribute>
            </button>
            <button id="editBtn" label="Edit" visible="false" class="doc-btn">
                <attribute name="onClick"><![CDATA[
                                saveBtn.visible=true;
                                editBtn.visible=false;
                                doc.readonly=false;
                                doc.customConfigurationsPath=docConfig.getSelectedItem().getValue();
                            ]]></attribute>
            </button>
        </div>
        <style src="/demo/doc/style.css"/>
    </div>
</zk>