OllowEditor Documentation

<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>

<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>

const editor = window.OllowEditor.create(
  document.getElementById("editor"),
  {
    theme: "auto",
    persistTheme: true,
    upload: {
      imageUrl: "/api/uploads/images",
      galleryUrl: "/api/uploads/galleries",
      attachmentUrl: "/api/uploads/attachments",
      allowFallback: false
    },
    plugins: {
      callout: true
    }
  }
);

const editor = window.OllowEditor.create(
  document.getElementById("editor"),
  {
    upload: {
      imageUrl: "/api/uploads/images",
      galleryUrl: "/api/uploads/galleries",
      attachmentUrl: "/api/uploads/attachments",
      allowFallback: true
    }
  }
);

import express from "express";
import multer from "multer";

const app = express();
const upload = multer({ dest: "uploads/" });

app.post("/api/uploads/images", upload.single("image"), async (req, res) => {
  const url = `/uploads/${req.file.filename}`;
  res.json({ url });
});

app.post("/api/uploads/galleries", upload.array("image"), async (req, res) => {
  const urls = req.files.map((file) => `/uploads/${file.filename}`);
  res.json({ urls });
});

app.post("/api/uploads/attachments", upload.single("file"), async (req, res) => {
  const url = `/uploads/${req.file.filename}`;
  res.json({ url });
});

from django.http import JsonResponse
from django.views.decorators.http import require_POST
from django.core.files.storage import default_storage

@require_POST
def upload_image(request):
    file = request.FILES.get("image")
    if not file:
        return JsonResponse({"error": "No image uploaded"}, status=400)
    path = default_storage.save(f"editor/images/{file.name}", file)
    return JsonResponse({"url": default_storage.url(path)})

@require_POST
def upload_gallery(request):
    files = request.FILES.getlist("image")
    urls = []
    for file in files:
        path = default_storage.save(f"editor/gallery/{file.name}", file)
        urls.append(default_storage.url(path))
    return JsonResponse({"urls": urls})

@require_POST
def upload_attachment(request):
    file = request.FILES.get("file")
    if not file:
        return JsonResponse({"error": "No file uploaded"}, status=400)
    path = default_storage.save(f"editor/attachments/{file.name}", file)
    return JsonResponse({"url": default_storage.url(path)})

from fastapi import FastAPI, UploadFile, File
from fastapi.responses import JSONResponse
from pathlib import Path
import shutil

app = FastAPI()
UPLOAD_DIR = Path("uploads")
UPLOAD_DIR.mkdir(exist_ok=True)

@app.post("/api/uploads/images")
async def upload_image(image: UploadFile = File(...)):
    file_path = UPLOAD_DIR / image.filename
    with file_path.open("wb") as buffer:
        shutil.copyfileobj(image.file, buffer)
    return {"url": f"/uploads/{image.filename}"}

@app.post("/api/uploads/attachments")
async def upload_attachment(file: UploadFile = File(...)):
    file_path = UPLOAD_DIR / file.filename
    with file_path.open("wb") as buffer:
        shutil.copyfileobj(file.file, buffer)
    return {"url": f"/uploads/{file.filename}"}

<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>

<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>

const editor = OllowEditor.get("#ollo-editor");

editor.importMarkdown("## Heading\n\nParagraph text", {
  mode: "replace"
});

const markdown = editor.exportMarkdown();

const html = editor.exportHTML({
  fullDocument: true,
  includeStyles: true,
  title: "Article Export"
});

editor.exportPDF({
  title: "Article",
  pageSize: "A4",
  orientation: "portrait",
  margin: "normal"
});

OllowEditor.init("#editor", {
  docx: {
    enabled: true
  }
});

editor.importDOCX(file, {
  mode: "replace",
  preserveFormatting: true,
  importImages: true
});

editor.exportDOCX({
  filename: "article.docx",
  title: "Article Title",
  includeImages: true,
  fallbackToDoc: true
});

npm install @codefortify/olloweditor

import "@codefortify/olloweditor/style.css";

import { createOllowEditor } from "@codefortify/olloweditor";
import "@codefortify/olloweditor/style.css";

const editor = createOllowEditor("#editor", {
  initialHTML: "<p>Hello OllowEditor</p>",
  placeholder: "Start writing...",
  onChange: (html) => {
    console.log(html);
  }
});

<div id="editor"></div>

<script type="module">
  import { createOllowEditor } from "@codefortify/olloweditor";
  import "@codefortify/olloweditor/style.css";

  const editor = createOllowEditor("#editor", {
    initialHTML: "<p>Hello OllowEditor</p>",
    placeholder: "Start writing...",
    onChange: (html) => {
      console.log(html);
    }
  });
</script>

import {
  createOllowEditor,
  type OllowEditorOptions,
  type OllowEditorCore
} from "@codefortify/olloweditor";

import "@codefortify/olloweditor/style.css";

const options: OllowEditorOptions = {
  initialHTML: "<p>Hello TypeScript</p>",
  placeholder: "Write something...",
  onChange: (html: string) => {
    console.log(html);
  }
};

const editor: OllowEditorCore = createOllowEditor("#editor", options);

import { useState } from "react";
import { OllowEditor } from "@codefortify/olloweditor/react";
import "@codefortify/olloweditor/style.css";

export default function App() {
  const [content, setContent] = useState("");

  return (
    <OllowEditor
      value={content}
      onChange={setContent}
      placeholder="Write your article..."
    />
  );
}

import { useState } from "react";
import {
  OllowEditor,
  type OllowEditorReactProps
} from "@codefortify/olloweditor/react";

import "@codefortify/olloweditor/style.css";

export default function App() {
  const [content, setContent] = useState<string>("");

  const uploadImage: OllowEditorReactProps["uploadImage"] = async (file) => {
    const formData = new FormData();
    formData.append("image", file);

    const response = await fetch("/api/uploads/image", {
      method: "POST",
      body: formData
    });

    const data: { url: string } = await response.json();
    return data.url;
  };

  return (
    <OllowEditor
      value={content}
      onChange={setContent}
      placeholder="Write your article..."
      uploadImage={uploadImage}
    />
  );
}

import dynamic from "next/dynamic";
import "@codefortify/olloweditor/style.css";

const OllowEditor = dynamic(
  () =>
    import("@codefortify/olloweditor/react").then((mod) => mod.OllowEditor),
  { ssr: false }
);

export default function Page() {
  return <OllowEditor placeholder="Write in Next.js..." />;
}

import { useState } from "react";
import { OllowEditor } from "@codefortify/olloweditor/react";
import "@codefortify/olloweditor/style.css";

export default function BlogCreateForm() {
  const [content, setContent] = useState("");

  async function handleSubmit(event) {
    event.preventDefault();

    await fetch("/api/posts", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        title: "My first post",
        content
      })
    });
  }

  return (
    <form onSubmit={handleSubmit}>
      <OllowEditor
        value={content}
        onChange={setContent}
        placeholder="Write your blog post..."
      />

      <button type="submit">Save Post</button>
    </form>
  );
}

import express from "express";

const app = express();

app.use(express.json());

app.post("/api/posts", async (req, res) => {
  const { title, content } = req.body;

  // Save title and content to MongoDB using your model.
  // Example:
  // await Post.create({ title, content });

  res.json({
    success: true,
    message: "Post saved successfully"
  });
});

import express from "express";
import multer from "multer";

const app = express();
const upload = multer({ dest: "uploads/" });

app.post("/api/uploads/image", upload.single("image"), async (req, res) => {
  // Store the uploaded file and generate a public URL.
  const url = `/uploads/${req.file.filename}`;
  res.json({ url });
});

import { Controller, Post, UploadedFile, UseInterceptors } from "@nestjs/common";
import { FileInterceptor } from "@nestjs/platform-express";

@Controller("api/uploads")
export class UploadController {
  @Post("image")
  @UseInterceptors(FileInterceptor("image"))
  uploadImage(@UploadedFile() file: Express.Multer.File) {
    return {
      url: `/uploads/${file.filename}`
    };
  }
}

createOllowEditor(
  selector: string | HTMLElement,
  options?: OllowEditorOptions
): OllowEditorCore

interface OllowEditorOptions {
  initialHTML?: string;
  placeholder?: string;
  readOnly?: boolean;
  className?: string;
  onChange?: (html: string) => void;
  uploadImage?: (file: File) => Promise<string> | string;
}

interface OllowEditorReactProps {
  value?: string;
  onChange?: (html: string) => void;
  placeholder?: string;
  uploadImage?: (file: File) => Promise<string> | string;
  readOnly?: boolean;
  className?: string;
}

import { createOllowEditor } from "@codefortify/olloweditor";
import { OllowEditor } from "@codefortify/olloweditor/react";
import "@codefortify/olloweditor/style.css";

pip install olloweditor

from django.db import models
from olloweditor.integrations.django import OllowEditorField


class Article(models.Model):
    title = models.CharField(max_length=255)
    content = OllowEditorField()

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"]

<form method="post">
    {% csrf_token %}
    {{ form.media }}
    {{ form.as_p }}
    <button type="submit">Save article</button>
</form>

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "olloweditor.apps.OllowEditorConfig",
]

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,
    )

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)

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={},
    )

olloweditor.browser.js
olloweditor.css
olloweditor-init.js

get_static_root()
get_asset_path(filename)
asset_exists(filename)

# 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}

MEDIA_URL = "/media/"
MEDIA_ROOT = BASE_DIR / "media"

OLLOWEDITOR = {
    "UPLOADS_ENABLED": True,
    "UPLOAD_REQUIRE_LOGIN": True,
    "UPLOAD_PERMISSION": None,
    "IMAGE_UPLOAD_PATH": "olloweditor/images/%Y/%m/",
    "GALLERY_UPLOAD_PATH": "olloweditor/gallery/%Y/%m/",
    "ATTACHMENT_UPLOAD_PATH": "olloweditor/attachments/%Y/%m/",
    "MAX_IMAGE_SIZE": 10 * 1024 * 1024,
    "MAX_GALLERY_FILES": 20,
    "MAX_ATTACHMENT_SIZE": 25 * 1024 * 1024,
    "MAX_IMAGE_PIXELS": 40_000_000,
    "ALLOWED_IMAGE_EXTENSIONS": [
        "jpg",
        "jpeg",
        "png",
        "gif",
        "webp",
    ],
    "ALLOWED_ATTACHMENT_EXTENSIONS": [
        "pdf",
        "doc",
        "docx",
        "xls",
        "xlsx",
        "ppt",
        "pptx",
        "txt",
        "zip",
    ],
    "ALLOW_BASE64_UPLOADS": False,
}

from django.conf import settings
from django.conf.urls.static import static
from django.urls import include, path


urlpatterns = [
    path(
        "olloweditor/",
        include("olloweditor.integrations.django.urls"),
    ),
]

if settings.DEBUG:
    urlpatterns += static(
        settings.MEDIA_URL,
        document_root=settings.MEDIA_ROOT,
    )

<img src="/media/olloweditor/images/2026/07/generated.png">

<img src="data:image/png;base64,...">

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,
    )

from django.urls import path

from olloweditor.integrations.drf import (
    OllowEditorAttachmentUploadView,
    OllowEditorGalleryUploadView,
    OllowEditorImageUploadView,
)


urlpatterns = [
    path(
        "api/olloweditor/upload/image/",
        OllowEditorImageUploadView.as_view(),
    ),
    path(
        "api/olloweditor/upload/gallery/",
        OllowEditorGalleryUploadView.as_view(),
    ),
    path(
        "api/olloweditor/upload/attachment/",
        OllowEditorAttachmentUploadView.as_view(),
    ),
]

from rest_framework import serializers
from olloweditor.previews import extract_olloweditor_text


class ArticleSerializer(serializers.ModelSerializer):
    preview = serializers.SerializerMethodField()

    def get_preview(self, obj) -> str:
        return extract_olloweditor_text(
            obj.content,
            max_length=140,
        )

from flask import Flask, g
from olloweditor.integrations.flask import OllowEditor


def upload_user_is_authenticated() -> bool:
    return getattr(g, "user", None) is not None


def upload_user_has_permission() -> bool:
    user = getattr(g, "user", None)
    return bool(user and user.can_upload)


app = Flask(__name__)
app.config.update(
    OLLOWEDITOR_UPLOADS_ENABLED=True,
    OLLOWEDITOR_UPLOAD_AUTH_REQUIRED=True,
    OLLOWEDITOR_AUTH_CHECK=upload_user_is_authenticated,
    OLLOWEDITOR_PERMISSION_CHECK=upload_user_has_permission,
    OLLOWEDITOR_UPLOAD_PERMISSION_REQUIRED=True,
    OLLOWEDITOR_UPLOAD_ROOT="./media",
    OLLOWEDITOR_MEDIA_URL="/media/",
)

olloweditor = OllowEditor(app)

<!doctype html>
<html lang="en">
  <head>
    {{ olloweditor_assets() }}
  </head>
  <body>
    <form method="post">
      {{ olloweditor_textarea("content", article.content) }}
      <button type="submit">Save</button>
    </form>
  </body>
</html>

from fastapi import FastAPI
from fastapi.templating import Jinja2Templates

from olloweditor.integrations.fastapi import OllowEditorFastAPI


async def require_user() -> bool:
    return True


async def require_upload_permission() -> bool:
    return True


app = FastAPI()
templates = Jinja2Templates(directory="templates")

olloweditor = OllowEditorFastAPI(
    uploads_enabled=True,
    upload_root="./media",
    media_url="/media/",
    auth_required=True,
    auth_dependency=require_user,
    permission_dependency=require_upload_permission,
)
olloweditor.init_app(app, templates=templates)

{
  "success": true,
  "type": "gallery",
  "files": [
    {
      "url": "/media/olloweditor/gallery/one.png",
      "name": "one.png",
      "size": 12345
    },
    {
      "url": "/media/olloweditor/gallery/two.png",
      "name": "two.png",
      "size": 23456
    }
  ]
}

{
  "success": false,
  "error": {
    "code": "invalid_file_type",
    "message": "This file type is not allowed."
  }
}

olloweditor/
├── src/
│   ├── core/
│   ├── react/
│   ├── styles/
│   └── types/
├── dist/
├── examples/
├── website/
├── package.json
├── vite.config.js
├── tsconfig.json
└── README.md

git clone https://github.com/CodeFortifyCloud/olloweditor.git
cd olloweditor
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]"

npm run build

cd python
rm -rf build dist src/*.egg-info
python -m build
python -m twine check dist/*

npm pack --dry-run
npm pack
npm login
npm publish --access public

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