JavaScript Editor
+Use the compiled ollow.js and ollow.css files directly in browser pages, CMS forms, and standalone integrations.
Basic HTML Setup
- The package exposes a core factory for browser apps and a React wrapper for controlled editor state. That makes it practical for MERN stack apps, admin dashboards, CMS forms, article workflows, and publishing tools that need clean content entry without locking into a framework-specific editor architecture.
+ The standalone browser editor uses a synced <textarea>, the compiled stylesheet, and the compiled browser script. The textarea receives the final HTML output after editing.
- Package focus: use
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
createOllowEditor in browser-driven JavaScript or TypeScript apps, and use OllowEditor from @codefortify/olloweditor/react in React-based interfaces.
+
+
+
- <form method="post">
+ <textarea
+ id="ollo-editor"
+ name="content"
+ data-theme="dark"
+ data-persist-theme="true"
+ ><h2>Article title</h2>
+<p>Start writing your story...</p></textarea>
+
+ <button type="submit">Save Article</button>
+</form>
+
+<link rel="stylesheet" href="ollow.css" />
+<script src="ollow.js"></script>Installation
-Install OllowEditor with the package manager you already use in your JavaScript or MERN stack project.
+Editor Initialization
+
+ Initialize the browser editor after the page loads. The global API is available as both OllowEditor and NationWireEditor. The editor README also documents global plugin registration with OllowEditor.registerPlugin(...).
+
+
+
+ <script>
+ document.addEventListener("DOMContentLoaded", function () {
+ OllowEditor.init("#ollo-editor", {
+ theme: "dark",
+ persistTheme: true,
+ upload: {
+ imageUrl: "/upload/image",
+ galleryUrl: "/upload/gallery",
+ attachmentUrl: "/upload/attachment",
+ allowFallback: false
+ }
+ });
+ });
+</script>
+ Confirmed editor options in the browser README include per-editor themes with light, dark, and auto, automatic textarea synchronization, and upload adapter configuration for image, gallery, and attachment flows.
+
Toolbar Features
++ The browser editor README documents a broad toolbar surface including typography, formatting, source mode, export tools, and media blocks. The table below combines the editor README and npm package feature list. +
+
+
+
+
+
+ | Feature | +Description | +
|---|---|
| Undo / Redo | History controls for editing sessions. |
| Font family and size | Approved typography controls with saved safe classes. |
| Paragraph and headings | Paragraph plus heading levels including H2, H3, and H4. |
| Bold / Italic / Underline / Strikethrough | Inline text formatting actions. |
| Links and bookmarks | Hyperlink management plus internal anchor insertion. |
| Lists and pull quotes | Bullet lists, numbered lists, and quote-style blocks. |
| HTML mode | Switch between visual editing and sanitized source mode. |
| Markdown and DOCX tools | Markdown import/export plus DOCX import/export workflows. |
| Images, galleries, YouTube embeds | Media blocks with upload and alignment support. |
| Tables and code blocks | Structured content blocks for technical and editorial content. |
| Responsive toolbars | Desktop menu bar, tablet groups, and mobile overflow drawers. |
| Keyboard shortcuts | Shortcut set for formatting, lists, sync, and modal handling. |
Image Upload
++ The browser editor supports local file insertion, URL-based image insertion, drag and drop, and backend upload endpoints. In the standalone editor, uploads are configured with the shared upload adapter. +
-
+ npm install @codefortify/olloweditor<textarea
+ id="ollo-editor"
+ name="body"
+ data-ollow-editor
+ data-image-upload-url="/upload/image"
+ data-gallery-upload-url="/upload/gallery"
+ data-attachment-upload-url="/upload/attachment">
+</textarea>
+
+
+ {
+ "url": "/media/editor/images/file.jpg"
+}
+
+{
+ "urls": [
+ "/media/editor/gallery/1.jpg",
+ "/media/editor/gallery/2.jpg"
+ ]
+}+ Confirmed adapter behavior includes automatic CSRF header lookup, optional FileReader fallback, and shared handling for image, gallery, attachment, and drag-and-drop flows. +
+Gallery Support
+The browser editor can create responsive gallery sections from multiple images.
-
+ yarn add @codefortify/olloweditor<section class="ollow-media ollow-gallery">
+ <div class="ollow-gallery-header">
+ <h3>Gallery title</h3>
+ <p>Gallery note or caption</p>
+ </div>
+
+ <div class="ollow-gallery-grid">
+ <figure>
+ <img src="image-1.jpg" alt="Gallery image 1" />
+ </figure>
+ <figure>
+ <img src="image-2.jpg" alt="Gallery image 2" />
+ </figure>
+ </div>
+</section>YouTube Embed
+The browser editor accepts standard YouTube watch, short, and embed URLs and converts them into a wrapped iframe embed.
-
+ pnpm add @codefortify/olloweditor<figure class="ollow-media ollow-embed">
+ <div class="ollow-video-wrapper">
+ <iframe
+ src="https://www.youtube.com/embed/VIDEO_ID"
+ title="YouTube video player"
+ frameborder="0"
+ allowfullscreen
+ loading="lazy">
+ </iframe>
+ </div>
+ <figcaption>Video caption</figcaption>
+</figure>Markdown Import/Export
++ The browser editor supports importing Markdown into the current content and exporting editor HTML back to Markdown. Confirmed supported Markdown structures include headings, paragraphs, links, images, lists, blockquotes, horizontal rules, inline code, fenced code blocks, and basic tables. +
+
+
+
+ const editor = OllowEditor.get("#ollo-editor");
+
+editor.importMarkdown("## Heading\n\nParagraph text", {
+ mode: "replace"
+});
+
+const markdown = editor.exportMarkdown();Export HTML
++ Export HTML uses sanitized editor content. The editor README confirms support for body-only export and full standalone HTML export with optional embedded styles. +
+
+
+
+ const html = editor.exportHTML({
+ fullDocument: true,
+ includeStyles: true,
+ title: "Article Export"
+});Export PDF
++ PDF export is browser-based. The editor generates a print-ready HTML document and relies on the browser print or save-as-PDF flow rather than producing PDF bytes directly. +
+
+
+
+ editor.exportPDF({
+ title: "Article",
+ pageSize: "A4",
+ orientation: "portrait",
+ margin: "normal"
+});
+ Limitation: PDF export depends on browser print support. To suppress browser-added headers and footers, disable them in the print dialog.
+
+ Import DOCX
++ DOCX import is client-side and expects an optional browser parser such as Mammoth.js to be available when that workflow is used. Supported formatting includes headings, paragraphs, inline formatting, lists, links, tables, and images when the parser supports them. +
+
+
+
+ OllowEditor.init("#editor", {
+ docx: {
+ enabled: true
+ }
+});
+
+editor.importDOCX(file, {
+ mode: "replace",
+ preserveFormatting: true,
+ importImages: true
+});Export DOCX
+
+ True DOCX generation depends on an optional browser-compatible exporter. If that adapter is unavailable, OllowEditor can fall back to a Word-compatible HTML document flow instead of pretending to generate a native .docx.
+
+
+
+ editor.exportDOCX({
+ filename: "article.docx",
+ title: "Article Title",
+ includeImages: true,
+ fallbackToDoc: true
+});NPM Installation
+The npm package ships the core editor, the React wrapper, the packaged stylesheet, and bundled TypeScript declarations.
+
+
+
npm install @codefortify/olloweditorCSS Import
-Import the packaged stylesheet once in the entry file or page where the editor is used.
+Import the package stylesheet once in the application entry or page where the editor is used.
style.css
@@ -200,7 +577,7 @@
CSS Import
Quick Start
-The core package mounts the editor into a selector or DOM element and returns an OllowEditorCore instance.
The npm package mounts into a selector or DOM element and returns an OllowEditorCore instance.
-
-
+
Vanilla JavaScript
-Use the package directly in a module script when you want an editor inside a plain JavaScript page or custom CMS view.
+Vanilla JavaScript Usage
-
-
+
-
-
-
-
-
-
Vanilla TypeScript
-The package ships type definitions for the core editor and React wrapper, so TypeScript can use the editor without extra ambient declarations.
+TypeScript Usage
+The npm package bundles its type declarations. No separate @types package is required.
-
- import {
+ import {
createOllowEditor,
- type OllowEditorCore,
- type OllowEditorOptions
+ type OllowEditorOptions,
+ type OllowEditorCore
} from "@codefortify/olloweditor";
+
import "@codefortify/olloweditor/style.css";
const options: OllowEditorOptions = {
- initialHTML: "<p>Typed content</p>",
- placeholder: "Start writing...",
+ initialHTML: "<p>Hello TypeScript</p>",
+ placeholder: "Write something...",
onChange: (html: string) => {
console.log(html);
}
};
-const editor: OllowEditorCore = createOllowEditor("#editor", options);
-editor.focus();
- Package Exports
-Import the package based on whether you need the browser factory, the React component, or the packaged stylesheet.
-
-
-
import { createOllowEditor } from "@codefortify/olloweditor";
-import { OllowEditor } from "@codefortify/olloweditor/react";
-import "@codefortify/olloweditor/style.css";API Reference
-The package surface is intentionally small: one core factory, one core instance type, and one React component export.
-
-
-
-
- createOllowEditor(
- selector: string | HTMLElement,
- options?: OllowEditorOptions
-): OllowEditorCoreOllowEditorOptions
-
-
-
-
- interface OllowEditorOptions {
- initialHTML?: string;
- placeholder?: string;
- readOnly?: boolean;
- className?: string;
- onChange?: (html: string) => void;
- uploadImage?: (file: File) => Promise<string> | string;
-}OllowEditorCore Methods
--
-
getHTML()returns the current editor HTML.
- setHTML(html)replaces the current editor content.
- focus()focuses the editable surface.
- destroy()tears down the editor instance and bindings.
-
React Usage
-Use the official React wrapper for controlled state and straightforward integration inside forms, dashboards, and content management views.
-
import { useState } from "react";
+ import { useState } from "react";
import { OllowEditor } from "@codefortify/olloweditor/react";
import "@codefortify/olloweditor/style.css";
@@ -353,21 +675,23 @@ React Usage
React TypeScript Usage
- In TypeScript React apps, the wrapper props line up with the package type declarations, including an optional uploadImage callback.
import { useState } from "react";
-import { OllowEditor } from "@codefortify/olloweditor/react";
-import type { OllowEditorReactProps } from "@codefortify/olloweditor/react";
+import {
+ OllowEditor,
+ type OllowEditorReactProps
+} from "@codefortify/olloweditor/react";
+
import "@codefortify/olloweditor/style.css";
-export default function EditorForm() {
+export default function App() {
const [content, setContent] = useState<string>("");
- const uploadImage: NonNullable<OllowEditorReactProps["uploadImage"]> = async (file) => {
+ const uploadImage: OllowEditorReactProps["uploadImage"] = async (file) => {
const formData = new FormData();
formData.append("image", file);
@@ -376,7 +700,7 @@ React TypeScript Usage
body: formData
});
- const data = await response.json();
+ const data: { url: string } = await response.json();
return data.url;
};
@@ -394,60 +718,30 @@ React TypeScript Usage
Next.js Usage
-
- OllowEditor uses browser APIs, so in Next.js it should be loaded on the client side with dynamic import and ssr: false.
-
+ OllowEditor uses browser APIs, so load it client-side with dynamic import and ssr: false.
import dynamic from "next/dynamic";
-import { useState } from "react";
import "@codefortify/olloweditor/style.css";
const OllowEditor = dynamic(
- () => import("@codefortify/olloweditor/react").then((mod) => mod.OllowEditor),
+ () =>
+ import("@codefortify/olloweditor/react").then((mod) => mod.OllowEditor),
{ ssr: false }
);
-export default function ArticleEditorPage() {
- const [content, setContent] = useState("");
-
- return (
- <OllowEditor
- value={content}
- onChange={setContent}
- placeholder="Write your article..."
- />
- );
-}
-
-
-
-
- React Props
-
-
- interface OllowEditorReactProps {
- value?: string;
- onChange?: (html: string) => void;
- placeholder?: string;
- uploadImage?: (file: File) => Promise<string> | string;
- readOnly?: boolean;
- className?: string;
+export default function Page() {
+ return <OllowEditor placeholder="Write in Next.js..." />;
}
MERN Stack Usage
-
- OllowEditor works well in MERN stack applications because it can run in React on the frontend and send generated HTML content to an Express, Node.js, or NestJS backend.
-
+ Confirmed npm README workflow: React frontend, OllowEditor, HTML emitted through onChange, then a backend API stores and returns content for rendering in the application.
React frontend
@@ -455,19 +749,18 @@ MERN Stack Usage
onChange HTML/content
- Express API
+ Express or Node API
- MongoDB database
+ MongoDB/database
Render in frontend/admin panel
-
- import { useState } from "react";
+ import { useState } from "react";
import { OllowEditor } from "@codefortify/olloweditor/react";
import "@codefortify/olloweditor/style.css";
@@ -502,7 +795,6 @@ MERN Stack Usage
);
}
-
-
- Express Image Upload
- README-backed upload flows return URLs to the editor. A small Express endpoint is enough for local disk or proxy-based storage.
+
+ Express Upload Example
+ The npm README documents uploadImage as a backend callback contract rather than a bundled upload provider.
- Connect this endpoint to OllowEditor using the uploadImage callback.
-
-
-
- Node.js API Integration
-
- The frontend editor only needs a URL back from your backend. That backend can be Express, a plain Node.js API route, NestJS, or any server that accepts uploads and returns a JSON payload with the stored file location.
-
-
- Typical contract: upload the file, store it using your backend strategy, then return { url: "https://..." } so the editor can place the image into the content.
-
@@ -566,9 +848,9 @@ NestJS Upload Example
- import { Controller, Post, UploadedFile, UseInterceptors } from "@nestjs/common";
+ import { Controller, Post, UploadedFile, UseInterceptors } from "@nestjs/common";
import { FileInterceptor } from "@nestjs/platform-express";
@Controller("api/uploads")
@@ -584,170 +866,402 @@ NestJS Upload Example
-
- Backend Storage Flow
-
- Frontend editor
-
- uploadImage callback
-
- backend upload API
-
- image URL
-
- editor content
+
+ API Reference
+
+
+ createOllowEditor(
+ selector: string | HTMLElement,
+ options?: OllowEditorOptions
+): OllowEditorCore
-
- OllowEditor does not force a storage provider. You can use local storage, S3, Cloudinary, Supabase Storage, DigitalOcean Spaces, or any custom backend as long as the final upload step returns a usable URL.
-
+
+
+ interface OllowEditorOptions {
+ initialHTML?: string;
+ placeholder?: string;
+ readOnly?: boolean;
+ className?: string;
+ onChange?: (html: string) => void;
+ uploadImage?: (file: File) => Promise<string> | string;
+}
+
+
+ getHTML() returns the current editor HTML.setHTML(html) replaces the current editor content.focus() moves focus into the editor surface.destroy() removes the editor instance and listeners.
-
- Toolbar Features
-
-
-
-
- Feature
- Description
-
-
-
- Bold / Italic / Underline / Strikethrough Format selected text for common writing workflows. Headings Switch between paragraph text and heading levels used in structured content. Lists Create bullet and numbered lists inside articles, admin forms, and CMS content. Links Insert hyperlinks and unlink content when references change. Images Insert uploaded images or image URLs into the editor. Gallery Create a multiple-image gallery block with title and note support. YouTube Embed Render supported YouTube URLs inside a safe embed wrapper. Tables Insert table content inside a scroll-safe wrapper for smaller viewports. Code Block Add preformatted code blocks for technical articles and developer docs. Markdown Import / Export Convert between Markdown workflows and editor HTML. Export HTML Export sanitized HTML content for downstream publishing. Export PDF Use the browser print workflow to create a PDF export. DOCX Import / Export Import Word content and export DOCX or fallback Word-compatible output. Theme Controls Switch between light, dark, and auto theme modes.
+
+ React Props
+
+
+ interface OllowEditorReactProps {
+ value?: string;
+ onChange?: (html: string) => void;
+ placeholder?: string;
+ uploadImage?: (file: File) => Promise<string> | string;
+ readOnly?: boolean;
+ className?: string;
+}
-
- Image Upload
+
+ Package Exports
+
+
+ import { createOllowEditor } from "@codefortify/olloweditor";
+import { OllowEditor } from "@codefortify/olloweditor/react";
+import "@codefortify/olloweditor/style.css";
+
+
+
+
+ pip Installation
+ The base Python package installs the packaged browser assets and framework-independent resource helpers only.
+
+
+ pip install olloweditor
+
+
+ Current README note: production PyPI publication has not been completed yet. The Python README recommends local wheel or editable installs during current development workflows.
+
+
+
+
+ Optional Extras
+ Install only the extra your Python application needs.
+
+
+
+ Django
+ pip install "olloweditor[django]"
+
+
+
+
+
+ Django REST Framework
+ pip install "olloweditor[drf]"
+
+
+
+
+
+ Flask
+ pip install "olloweditor[flask]"
+
+
+
+
+
+ FastAPI
+ pip install "olloweditor[fastapi]"
+
+
+
+
+
+ All integrations
+ pip install "olloweditor[all]"
+
+
+
+
+
+
+
+ Django Integration
- The package-level upload hook is uploadImage(file). Return a string or a promise that resolves to the final image URL and OllowEditor will insert that image into the current content.
+ The Python package includes OllowEditorWidget, OllowEditorField, staticfiles integration, and admin support. It keeps a textarea synchronized with HTML so normal Django form processing continues to work.
- const editor = createOllowEditor("#editor", {
- uploadImage: async (file) => {
- const formData = new FormData();
- formData.append("image", file);
+ from django.db import models
+from olloweditor.integrations.django import OllowEditorField
- const response = await fetch("/api/uploads/image", {
- method: "POST",
- body: formData
- });
- const data = await response.json();
- return data.url;
- }
-});
+class Article(models.Model):
+ title = models.CharField(max_length=255)
+ content = OllowEditorField()
-
- Gallery Support
- README-supported gallery blocks let content teams place multiple images into a single responsive gallery section.
-
+
+ Django Forms
+
+
+ from django import forms
+from olloweditor.integrations.django import OllowEditorWidget
-
- YouTube Embed
- Supported YouTube links are normalized into safe iframe embeds so articles can include videos without custom rendering glue.
-
+from .models import Article
-
- Table Support
- Tables render inside a scroll wrapper, which keeps wide tabular content usable on smaller screens and prevents page-level overflow.
-
-
- Code Block
- Code blocks are part of the supported block toolset and work well for engineering blogs, internal guides, and technical publishing workflows.
+class ArticleForm(forms.ModelForm):
+ content = forms.CharField(
+ widget=OllowEditorWidget(
+ options={
+ "theme": "auto",
+ }
+ )
+ )
+
+ class Meta:
+ model = Article
+ fields = ["title", "content"]
+
+
+
+ <form method="post">
+ {% csrf_token %}
+ {{ form.media }}
+ {{ form.as_p }}
+ <button type="submit">Save article</button>
+</form>
+
-
- Keyboard Shortcuts
-
-
-
-
- Shortcut
- Action
-
-
-
- Ctrl/Cmd + BBold Ctrl/Cmd + IItalic Ctrl/Cmd + UUnderline Ctrl/Cmd + KInsert or edit link Ctrl/Cmd + Shift + 7Numbered list Ctrl/Cmd + Shift + 8Bullet list Ctrl/Cmd + Shift + CCode block Ctrl/Cmd + SSync editor HTML and prevent the browser save dialog EscClose the active modal or floating toolbar
+
+ Django Admin
+
+ Once olloweditor.apps.OllowEditorConfig is installed, OllowEditorField uses OllowEditorWidget in generated ModelForms, including standard Django admin form construction.
+
+
+
+ INSTALLED_APPS = [
+ "django.contrib.admin",
+ "django.contrib.auth",
+ "django.contrib.contenttypes",
+ "django.contrib.sessions",
+ "django.contrib.messages",
+ "django.contrib.staticfiles",
+ "olloweditor.apps.OllowEditorConfig",
+]
-
- Theme Support
- README-backed theme support includes light, dark, and auto modes with optional theme persistence per editor instance.
+
+ Django REST Framework
+
+ DRF does not render the browser editor for external API clients. It accepts the HTML string generated by an OllowEditor frontend through OllowEditorHTMLField.
+
+
+
+ from rest_framework import serializers
+from olloweditor.integrations.drf import OllowEditorHTMLField
+
+
+class ArticleSerializer(serializers.Serializer):
+ title = serializers.CharField()
+ content = OllowEditorHTMLField(
+ allow_blank=True,
+ required=False,
+ )
+
+
+
+ def sanitize_article_html(value: str) -> str:
+ return trusted_html_sanitizer.clean(value)
+
+
+class ArticleSerializer(serializers.Serializer):
+ title = serializers.CharField()
+ content = OllowEditorHTMLField(
+ sanitizer=sanitize_article_html,
+ )
+
-
- Import and Export
- OllowEditor includes HTML, PDF, Markdown, and DOCX workflows for teams moving content between editors, admin panels, publishing systems, and offline review tools.
-
- - Export HTML for clean downstream rendering.
- - Export PDF through the browser print flow.
- - Import and export Markdown for technical content workflows.
- - Import DOCX with a browser-side parser when available.
- - Export DOCX through the configured runtime exporter or fallback mode.
-
+
+ Flask Integration
+ The Python package exposes a Flask extension, packaged asset blueprint, and Jinja helpers.
+
+
+ from flask import Flask, render_template, request
+from olloweditor.integrations.flask import OllowEditor
+
+
+app = Flask(__name__)
+olloweditor = OllowEditor(app)
+
+
+@app.route("/", methods=["GET", "POST"])
+def index():
+ content = ""
+
+ if request.method == "POST":
+ content = request.form.get("content", "")
+
+ return render_template("index.html", content=content)
+
-
- Markdown Import / Export
- Markdown support is intended for conversion workflows. The editor still stores and emits HTML content as its main output.
+
+ FastAPI Integration
+ The Python package includes a static mount helper and template helper registration pattern for FastAPI applications.
+
+
+ from fastapi import FastAPI, Request
+from fastapi.templating import Jinja2Templates
+
+from olloweditor.integrations.fastapi import (
+ mount_olloweditor,
+ olloweditor_assets,
+)
+
+
+app = FastAPI()
+mount_olloweditor(app)
+
+templates = Jinja2Templates(directory="templates")
+templates.env.globals["olloweditor_assets"] = olloweditor_assets
+
+
+@app.get("/")
+def index(request: Request):
+ return templates.TemplateResponse(
+ request=request,
+ name="index.html",
+ context={},
+ )
+
-
- Export HTML
- Export HTML produces sanitized editor output so you can store or render the content directly in a frontend or backend publishing pipeline.
+
+ Static Assets
+ Installing olloweditor gives the Python package three packaged frontend assets plus resource helpers.
+
+
+ olloweditor.browser.js
+olloweditor.css
+olloweditor-init.js
+
+get_static_root()
+get_asset_path(filename)
+asset_exists(filename)
+
+
+ Confirmed framework behavior: Django serves these through staticfiles, Flask through the extension blueprint, FastAPI through StaticFiles, and the base package exposes resource helpers through olloweditor.resources.
+
-
- Export PDF
- PDF export depends on browser print support and uses the native print-to-PDF flow rather than generating PDF bytes directly inside the package.
+
+ Template Helpers
+ Flask and FastAPI both expose helper functions that inject the packaged asset tags into server-rendered templates.
+
+
+ Flask
+ <head>
+ {{ olloweditor_assets() }}
+</head>
+
+
+
+ FastAPI
+ <head>
+ {{ olloweditor_assets() }}
+</head>
+
+
+
-
- Import DOCX
- DOCX import expects a browser-compatible parser such as Mammoth to be available when that workflow is used.
+
+ Python Backend Flow
+ The Python package keeps the browser editor tied to normal form posts or JSON requests instead of introducing a Python-native editing engine.
+
+ Textarea
+
+ OllowEditor browser UI
+
+ synchronized HTML
+
+ normal form post or JSON payload
+
+ Python backend
+
+
+
+ # Django
+content = request.POST.get("content", "")
+
+# Flask
+content = request.form.get("content", "")
+
+# FastAPI
+from typing import Annotated
+from fastapi import Form
+
+def create_article(
+ content: Annotated[str, Form()],
+):
+ return {"content": content}
+
-
- Export DOCX
- DOCX export depends on the configured exporter available to the editor at runtime. When a real DOCX exporter is not available, the editor can fall back to a Word-compatible document flow.
+
+ Security Notes
+
+ Because OllowEditor generates HTML, backend applications should validate and sanitize untrusted HTML before rendering it. The Python README is explicit that client-side cleanup is not a complete security boundary and that the package does not claim arbitrary HTML is safe automatically.
+
+
+ - Define allowed tags, attributes, URL schemes, image sources, and embed providers.
+ - Validate upload authorization, CSRF, MIME type, extension, file size, storage destination, and rate limits separately.
+ - Use Django
safe, Jinja |safe, Markup, or equivalent only after sanitization or explicit trust decisions.
+
Browser Support
+ The npm README lists the following modern browser targets:
- Chrome
- Edge
@@ -761,26 +1275,31 @@ Browser Support
Package Structure
- dist/
-├── olloweditor.es.js
-├── olloweditor.cjs
-├── olloweditor-react.es.js
-├── olloweditor-react.cjs
-├── olloweditor.css
-├── index.d.ts
-└── react.d.ts
+ olloweditor/
+├── src/
+│ ├── core/
+│ ├── react/
+│ ├── styles/
+│ └── types/
+├── dist/
+├── examples/
+├── website/
+├── package.json
+├── vite.config.js
+├── tsconfig.json
+└── README.md
Local Development
- For package development, clone the repository and install dependencies before starting the local development workflow.
+ The npm README documents the standard frontend development flow, and the Python README adds the Python-specific environment setup.
git clone https://github.com/CodeFortifyCloud/olloweditor.git
@@ -788,36 +1307,69 @@ Local Development
npm install
npm run dev
+
+
+ npm ci
+npm run build
+npm run typecheck
+npm test
+npm run build:python-assets
+npm run verify:python-assets
+
+cd python
+python3 -m venv .venv
+source .venv/bin/activate
+python -m pip install --upgrade pip
+python -m pip install -e ".[all,dev,test]"
+
-
- Build Package
+
+ Build
npm run build
- The build output should produce the distributable JavaScript, React, CSS, and type definition files shown in the package structure above.
+
+
+ cd python
+rm -rf build dist src/*.egg-info
+python -m build
+python -m twine check dist/*
+
Publishing
- npm login
+ npm pack --dry-run
+npm pack
+npm login
npm publish --access public
- Use semantic versioning for releases:
-
- - patch for bug fixes
- - minor for new features
- - major for breaking changes
-
+
+
+ pip install dist/olloweditor-<version>-py3-none-any.whl
+python scripts/check_wheel_contents.py dist/*.whl
+python scripts/verify_wheel_installs.py dist/*.whl
+
+ The Python README documents build and verification commands, but it does not publish a final PyPI release command in the same way the npm README does.
@@ -832,18 +1384,17 @@ License
On this page
diff --git a/website/index.html b/website/index.html
index 3ec4d1f..4222a9d 100644
--- a/website/index.html
+++ b/website/index.html
@@ -46,8 +46,18 @@
Free. Lightweight. Developer-first.
A Free, Block-Style Editor with Clean JSON Output
- OllowEditor helps JavaScript and MERN stack developers build clean, structured content with a simple and powerful editing experience for modern web applications.
+ OllowEditor helps JavaScript, MERN, and Python developers build clean, structured content with a simple and powerful editing experience for modern web applications.
+
+ npm package
+ pip package
+ JavaScript
+ Python
+ MERN
+ Django
+ Flask
+ FastAPI
+
+
+
+
+
+ Live Demo
+ Try OllowEditor
+ Write, format, insert media, and export structured content directly from the demo.
+
+
+
+
+
+
+
+
+
+
@@ -157,44 +205,145 @@ CMS & Admin Forms
-
-
-
-
- Live Demo
- Try OllowEditor
- Write, format, insert media, and export structured content directly from the demo.
+
+
+
+ Pip Package
+ OllowEditor for Python
+ Use OllowEditor in Django, Django REST Framework, Flask, and FastAPI without managing a separate npm asset pipeline.
-
-
-
-
+
+
+
+
+
+
+ Install from pip
+
+
+ The Python package ships the compiled OllowEditor browser bundle, stylesheet, and shared initialization script, then adds framework helpers for forms, templates, serializer fields, and static asset serving.
+
+
+ Python
+ Django
+ DRF
+ Flask
+ FastAPI
+ pip package
+
+
+ pip install olloweditor
+
+
+
+
+
+ Django
+
+
+ pip install "olloweditor[django]"
+
+
+
+ Django REST Framework
+
+
+ pip install "olloweditor[drf]"
+
+
+
+ Flask
+
+
+ pip install "olloweditor[flask]"
+
+
+
+ FastAPI
+
+
+ pip install "olloweditor[fastapi]"
+
+
+
+ All integrations
+
+
+ pip install "olloweditor[all]"
+
+
+
+
+
+
+
+ Django quick start
+
+ from django import forms
+from olloweditor.integrations.django import OllowEditorWidget
+from .models import Article
+
+class ArticleForm(forms.ModelForm):
+ content = forms.CharField(
+ widget=OllowEditorWidget(
+ options={
+ "theme": "auto",
+ }
+ )
+ )
+
+ class Meta:
+ model = Article
+ fields = ["title", "content"]
+
+
+
+ FastAPI helper
+
+
+ from fastapi import FastAPI
+from olloweditor.integrations.fastapi import mount_olloweditor
+
+app = FastAPI()
+mount_olloweditor(app)
+
+
+
+
+
+
+
+ Django Forms & Admin
+ Use OllowEditorWidget and OllowEditorField in Django forms, models, and admin workflows.
+
+
+
+ Django REST Framework
+ Accept OllowEditor-generated HTML through serializer fields and apply your own sanitizer when needed.
+
+
+
+ Flask Integration
+ Use the Flask extension, asset blueprint, and Jinja helpers to add OllowEditor to server-rendered forms.
+
+
+
+ FastAPI Helpers
+ Mount packaged static assets and use template helpers for FastAPI-powered pages.
+
+
+
@@ -285,12 +434,26 @@ Block Tunes
Start building with OllowEditor
- A clean, modern editor experience for your next JavaScript or MERN stack project. Install from npm, customize blocks, and ship structured content faster.
+ A clean, modern editor experience for your next JavaScript, MERN, or Python project. Install from npm or pip, customize blocks, and ship structured content faster.
+
+
+
+ npm i @codefortify/olloweditor
+
+
+
+
+
+ pip install olloweditor
+
+
+
+
diff --git a/website/script.js b/website/script.js
index 0a4c41b..9dc46da 100644
--- a/website/script.js
+++ b/website/script.js
@@ -3,8 +3,12 @@ document.addEventListener("DOMContentLoaded", () => {
if (!text) return false;
if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
- await navigator.clipboard.writeText(text);
- return true;
+ try {
+ await navigator.clipboard.writeText(text);
+ return true;
+ } catch (_error) {
+ // Fall through to the textarea fallback on permission or browser failures.
+ }
}
const fallbackTextarea = document.createElement("textarea");
@@ -195,6 +199,7 @@ document.addEventListener("DOMContentLoaded", () => {
if (!(button instanceof HTMLButtonElement)) return;
const originalLabel = button.textContent ? button.textContent.trim() : "Copy";
+ let resetTimeoutId = null;
button.addEventListener("click", async () => {
const explicitCopy = button.getAttribute("data-copy");
@@ -212,9 +217,13 @@ document.addEventListener("DOMContentLoaded", () => {
const copied = await copyTextToClipboard(textToCopy);
if (!copied) return;
+ if (resetTimeoutId) {
+ window.clearTimeout(resetTimeoutId);
+ }
button.textContent = "Copied!";
- window.setTimeout(() => {
+ resetTimeoutId = window.setTimeout(() => {
button.textContent = originalLabel;
+ resetTimeoutId = null;
}, 1500);
} catch (_error) {
// Swallow clipboard failures to avoid noisy console errors on unsupported browsers.