Rich Text Editor for CMS

import { Scribe } from 'scribejs-editor';
import 'scribejs-editor/dist/scribe.css';

// Initialize on the CMS content field
const editor = Scribe.init('#cms-content', {
  toolbar: 'floating',
  placeholder: 'Write your content...',
  onChange: (html) => {
    // Sync to hidden input for traditional form submit
    document.querySelector('#content-hidden').value = html;
  },
});

// Load existing content from your CMS API
async function loadPost(postId) {
  const res  = await fetch(`/api/posts/${postId}`);
  const data = await res.json();
  editor.setHTML(data.content);
}

// Save back to your CMS
async function savePost(postId) {
  const html = editor.getHTML(); // clean, sanitized HTML
  await fetch(`/api/posts/${postId}`, {
    method:  'PUT',
    headers: { 'Content-Type': 'application/json' },
    body:    JSON.stringify({ content: html }),
  });
}

// React CMS editor component
import { useRef, useEffect, useCallback } from 'react';
import { Scribe } from 'scribejs-editor';

export function CmsEditor({ postId, initialContent, onSave }) {
  const containerRef = useRef(null);
  const editorRef    = useRef(null);

  useEffect(() => {
    editorRef.current = Scribe.init(containerRef.current, {
      toolbar: 'floating',
      onChange: (html) => onSave?.(postId, html),
    });
    editorRef.current.setHTML(initialContent ?? '');
    return () => editorRef.current?.destroy();
  }, [postId]);

  const insertImage = useCallback((url, alt) => {
    editorRef.current?.insertHTML(`<img src="${url}" alt="${alt}" />`);
  }, []);

  return (
    <div>
      <div ref={containerRef} className="prose max-w-none" />
      <MediaPicker onSelect={insertImage} />
    </div>
  );
}

// Headless CMS integration — Contentful / Sanity / Strapi
import { Scribe } from 'scribejs-editor';

const editor = Scribe.init('#content', {
  toolbar:     'fixed',
  autofocus:   true,
  onChange:    debounce(syncToCms, 1500),
});

// Load from Sanity (or any CMS)
const entry = await client.getEntry(entryId);
editor.setHTML(renderRichText(entry.fields.body)); // or raw HTML field

async function syncToCms(html) {
  // Push clean HTML back to your CMS content field
  await client.updateEntry({ sys: { id: entryId }, fields: { body: html } });
  showSavedToast();
}

function debounce(fn, delay) {
  let t;
  return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), delay); };
}