WYSIWYG Editor for User Content Implementation on Website

WYSIWYG Editor Implementation for User Content on Website

When users publish reviews, comments, posts, or articles with formatting — you need an editor they can master without instructions. The challenge is: content must be safe on output, formatting — predictable, and the editor — not slow down the page.

Choosing an Editor

For user content, three options depending on requirements:

Quill — simple, ~200 KB, delta-format. Good for comments and short texts with basic formatting.

TipTap (based on ProseMirror) — extensible, TypeScript-first, rich extension ecosystem. Suitable for articles, documents.

Lexical (Meta) — most performant, tree-based, works well with React 18 concurrent mode.

Example with TipTap as the most balanced choice for user content:

npm install @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/extension-image @tiptap/extension-link @tiptap/extension-placeholder

Editor Component

// components/UserEditor.tsx
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import Link from '@tiptap/extension-link'
import Image from '@tiptap/extension-image'
import Placeholder from '@tiptap/extension-placeholder'
import { useCallback } from 'react'

interface UserEditorProps {
  initialContent?: string
  onChange: (html: string) => void
  maxLength?: number
}

export function UserEditor({ initialContent, onChange, maxLength = 10000 }: UserEditorProps) {
  const editor = useEditor({
    extensions: [
      StarterKit.configure({
        heading: { levels: [2, 3] }, // don't give h1 to users
        codeBlock: false,            // disable code blocks
        horizontalRule: false,
      }),
      Link.configure({
        openOnClick: false,
        HTMLAttributes: {
          rel: 'nofollow noopener noreferrer',
          target: '_blank',
        },
        validate: href => /^https?:\/\//.test(href), // only https/http
      }),
      Image.configure({
        allowBase64: false,
        HTMLAttributes: { loading: 'lazy' },
      }),
      Placeholder.configure({
        placeholder: 'Write something...',
      }),
    ],
    content: initialContent,
    onUpdate: ({ editor }) => {
      const html = editor.getHTML()
      if (html.length <= maxLength) {
        onChange(html)
      }
    },
  })

  const addLink = useCallback(() => {
    const url = window.prompt('URL:')
    if (url) editor?.chain().focus().setLink({ href: url }).run()
  }, [editor])

  if (!editor) return null

  return (
    <div className="border rounded-lg overflow-hidden">
      <div className="flex gap-1 p-2 border-b bg-gray-50 flex-wrap">
        <ToolbarButton
          active={editor.isActive('bold')}
          onClick={() => editor.chain().focus().toggleBold().run()}
          title="Bold"
        >B</ToolbarButton>
        <ToolbarButton
          active={editor.isActive('italic')}
          onClick={() => editor.chain().focus().toggleItalic().run()}
          title="Italic"
        >I</ToolbarButton>
        <ToolbarButton
          active={editor.isActive('bulletList')}
          onClick={() => editor.chain().focus().toggleBulletList().run()}
          title="List"
        >•</ToolbarButton>
        <ToolbarButton
          active={editor.isActive('link')}
          onClick={addLink}
          title="Link"
        >🔗</ToolbarButton>
      </div>
      <EditorContent
        editor={editor}
        className="prose max-w-none p-4 min-h-[150px] focus:outline-none"
      />
      {maxLength && (
        <div className="text-xs text-gray-400 px-4 py-1 border-t text-right">
          {editor.storage.characterCount?.characters?.() ?? 0} / {maxLength}
        </div>
      )}
    </div>
  )
}

Server Sanitization

Never save or render HTML from users without cleanup. Even if the editor restricts tags on the frontend — direct POST to the API bypasses this:

// lib/sanitize.ts
import DOMPurify from 'isomorphic-dompurify'

const ALLOWED_TAGS = [
  'p', 'br', 'strong', 'em', 'u', 's',
  'h2', 'h3', 'ul', 'ol', 'li', 'blockquote',
  'a', 'img',
]

const ALLOWED_ATTR = ['href', 'src', 'alt', 'loading', 'rel', 'target', 'class']

export function sanitizeUserHtml(dirty: string): string {
  return DOMPurify.sanitize(dirty, {
    ALLOWED_TAGS,
    ALLOWED_ATTR,
    // Remove data: URIs in src
    FORBID_ATTR: ['style', 'onerror', 'onload'],
    // Force add rel for links
    ADD_ATTR: ['rel'],
    FORCE_BODY: false,
  })
}

// In API route
export async function POST(request: Request) {
  const { content } = await request.json()
  const clean = sanitizeUserHtml(content)
  await db.post.create({ data: { content: clean, authorId: session.user.id } })
  return Response.json({ success: true })
}

Image Upload

Users will want to insert pictures. You need an upload endpoint with checks:

// app/api/upload/route.ts
import sharp from 'sharp'
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3'

const s3 = new S3Client({ region: process.env.AWS_REGION })

export async function POST(request: Request) {
  const form = await request.formData()
  const file = form.get('file') as File

  if (!file) return new Response('No file', { status: 400 })
  if (file.size > 5 * 1024 * 1024) return new Response('Too large', { status: 413 })
  if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type)) {
    return new Response('Invalid type', { status: 415 })
  }

  const buffer = Buffer.from(await file.arrayBuffer())

  // Optimize via sharp
  const optimized = await sharp(buffer)
    .resize(1200, 1200, { fit: 'inside', withoutEnlargement: true })
    .webp({ quality: 80 })
    .toBuffer()

  const key = `user-uploads/${Date.now()}-${crypto.randomUUID()}.webp`
  await s3.send(new PutObjectCommand({
    Bucket: process.env.S3_BUCKET,
    Key: key,
    Body: optimized,
    ContentType: 'image/webp',
    CacheControl: 'public, max-age=31536000, immutable',
  }))

  return Response.json({ url: `${process.env.CDN_URL}/${key}` })
}

In the editor, connect the uploader:

Image.configure({
  uploadFn: async (file: File) => {
    const form = new FormData()
    form.append('file', file)
    const res = await fetch('/api/upload', { method: 'POST', body: form })
    const { url } = await res.json()
    return url
  },
})

Rendering Saved HTML

// components/UserContent.tsx
import DOMPurify from 'isomorphic-dompurify'

// Re-sanitize on render — in case old data
export function UserContent({ html }: { html: string }) {
  const clean = DOMPurify.sanitize(html, { ALLOWED_TAGS, ALLOWED_ATTR })

  return (
    <div
      className="prose prose-sm max-w-none
        prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline
        prose-img:rounded-lg prose-img:mx-auto"
      dangerouslySetInnerHTML={{ __html: clean }}
    />
  )
}

Content Moderation

If the site is public — automatic check before showing:

// Simple spam-link check
function hasSpamLinks(html: string, maxLinks = 3): boolean {
  const matches = html.match(/<a\s/gi)
  return (matches?.length ?? 0) > maxLinks
}

// Or via OpenAI Moderation API
async function moderateContent(text: string): Promise<boolean> {
  const res = await openai.moderations.create({ input: text })
  return !res.results[0].flagged
}

Timeline

Basic editor with sanitization and saving: 2–3 days. With image upload, optimization via sharp, CDN: +2 days. Automatic moderation: +1 day.