You won’t be able to get “Word‑like” native shapes (rectangles, arrows, flowcharts, etc.) directly inside CKEditor 4 content with the standard CKEditor.Reactive component in OutSystems 11. CKEditor 4 supports text, images, tables, etc., but there is no official or mature plugin that gives full diagramming/shape‑drawing capabilities inside the editor.

Below is what typically works in OutSystems projects with similar requirements.

1. Shape support directly in CKEditor 4

Short answer: no native support, and no stable plugin for generic shapes.

What you can do in CKEditor 4:

• Use images (PNG/SVG) of shapes created elsewhere (e.g., Draw.io, PowerPoint).
• Insert SVG snippets via the Source mode or custom plugins.
• Use inline “pseudo shapes” with HTML/CSS (e.g., colored boxes with borders).

But:

• These are not interactive like Word/PowerPoint shapes (no click‑to‑draw, drag‑resize, connector arrows, etc.).
• Maintaining a custom shape‑drawing plugin on CKEditor 4 inside OutSystems is high effort and fragile.

So if the requirement is “users click inside the editor and draw rectangles/arrows like in Word,” CKEditor 4 alone won’t meet it.

2. Integrating a diagram tool (Draw.io / diagrams.net, SVG editor, etc.)

A pattern that works well with OutSystems Reactive + CKEditor is:

Approach A – External diagram editor + image/SVG in CKEditor

1. Open a separate diagram editor

   • Use a popup/modal with an embedded diagram tool:
     • Host Draw.io/diagrams.net in an iFrame (self‑hosted version is usually better).
     • Or use another JS diagram library (e.g., jointjs, gojs, etc.) embedded in an OutSystems Screen/Web Block via a JS dependency.

2. User creates the diagram/shape

   • Within the external editor they build the shapes, arrows, flowcharts.

3. Export as image or SVG

   • From the external tool, export:
     • PNG/JPEG, or
     • SVG (preferred for PDF quality).

4. Insert into CKEditor
   Typical options:

   • Return a Data URL (base64 image) from JS back to OutSystems via a Client Action (using a JS Node that triggers an event and passes the base64 string).
   • Or store the binary in an OutSystems Entity and supply a URL to that image.

   Inside CKEditor:

   • Use the existing Image dialog/button to insert the image (URL or base64).
   • Or programmatically insert an <img> tag via CKEDITOR.instances[...].insertHtml() using a CKEditor command triggered by JS.

5. Save content as HTML

   • CKEditor.Reactive already gives you the HTML string; save it as Text or Binary (if you include large embedded images).
   • This is consistent with the patterns described in similar Q&A about rich editors where HTML is saved and later reused. User input text with formatting

Pros:

• Keeps CKEditor as your text editor.
• Uses a tool that is actually designed for diagrams.
• You get high‑quality output (especially with SVG) for PDF.

Cons:

• Diagrams are not editable inline inside the CKEditor area; users must reopen the external tool to edit.

Approach B – CKEditor as “container,” shapes managed outside

If you need tight control over shapes, a cleaner approach is:

1. Treat CKEditor as rich text only (paragraphs, bullets, formatting).
2. For shapes/diagrams:
   • Use a separate “Diagram” block or section that appears within the document flow but is actually a separate data object (e.g., an entity “DocumentSection” with type Diagram vs. Text).
3. In the UI:
   • Render diagrams as images or SVGs between CKEditor content sections.
4. When generating the final PDF:
   • Merge text (rendered from HTML) + diagrams (rendered from SVG/PNG) in the correct order.

This approach gives more control for versioning, reuse, and rendering.

3. Other editors/components with shape support

For OutSystems 11 Reactive, the Forge options (CKEditor, Froala, TinyMCE, etc.) are mostly rich text editors, not diagram editors. They generally have the same limitation: no built‑in Word‑style shapes.

If you want a single UI that has both text and shapes in one canvas:

• Typical modern solution is a page builder / canvas editor, not a classic rich text editor (e.g., GrapesJS, custom canvas, etc.).
• Embedding something like that in OutSystems is possible via JS and HTML Element widgets, but:
  • You’ll lose some of the convenience of CKEditor.Reactive.
  • You’ll have to handle persistence of a custom JSON/HTML structure yourself.
  • PDF generation becomes custom.

In practice, most OutSystems projects stick to:

• CKEditor (or similar) for text.
• A separate diagram tool integrated as described in Approach A.

4. PDF generation with shapes

For PDF generation, your pipeline typically looks like:

1. Store CKEditor content as HTML

   • Text + <img>/<svg> tags for diagrams/shapes.
     This is the same model used in other CKEditor use cases where HTML is stored and later rendered. I can place text and images in the same text area?

2. Render HTML to PDF
   Your options in OutSystems 11:

   • Use an HTML‑to‑PDF Forge component (wkhtmltopdf, headless Chrome, etc.).
   • Or call an external service (e.g., a custom API) that receives HTML and returns PDF.

3. Ensure shapes are PDF‑friendly

   • SVG is ideal: vector quality, scales well, looks crisp in PDF.
   • PNG/JPEG: also fine, but quality depends on resolution.
   • Avoid editor‑specific canvas custom rendering that doesn’t output standard HTML/SVG, otherwise the PDF engine may not render it correctly.

4. Testing & limitations

   • If using wkhtmltopdf or similar:
     • Check CSS/JS limitations (e.g., no new JavaScript at render time; all content must be static HTML at that point).
     • Ensure external images/diagrams are accessible to the rendering process (absolute URLs, or inline base64).

5. Direct answers to your questions

1. Has anyone successfully implemented shape support in CKEditor 4?

   • Not as true interactive shapes like Word/PowerPoint; only via:
     • Images (drawn elsewhere),
     • Inline SVG/HTML + CSS “shapes.”

2. Has anyone integrated Draw.io / SVG editors / other diagram tools with CKEditor?

   • Yes, with the pattern:
     • Open external editor (Draw.io/diagrams.net or another JS toolkit) in a modal/iFrame.
     • Export diagram to SVG/PNG.
     • Insert resulting image/SVG into CKEditor as standard content.
     • Store the underlying diagram JSON separately if you need editing later.

3. Would you recommend a different editor/component that provides rich text + shapes?

   • Within OutSystems Forge for O11 Reactive, there’s no “all‑in‑one” editor that truly combines rich text + diagramming like Word/PowerPoint.
   • Recommended architecture: CKEditor for text + specialized diagram tool integrated alongside it.

4. How did you handle PDF generation when shapes were included?

   • Store CKEditor HTML with <img>/<svg> for shapes.
   • Use HTML‑to‑PDF components/services to render everything.
   • Prefer SVG for diagrams to ensure good PDF quality.

Summary

• CKEditor.Reactive (CKEditor 4) cannot natively provide full shape drawing like Word/PowerPoint.
• A practical approach is to:
  • Keep CKEditor for text,
  • Integrate a separate diagram/shape tool,
  • Insert the output (image/SVG) into CKEditor,
  • Store everything as HTML and render it to PDF.

If you share whether diagrams must be editable inline in the same CKEditor area or if a separate “Edit Diagram” action is acceptable, we can narrow down a concrete implementation pattern for OutSystems Reactive (e.g., how to wire the JS, variables, and entities).