> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/pocketbase/pocketbase/llms.txt
> Use this file to discover all available pages before exploring further.

# Editor field

> Store HTML-formatted rich text content

The editor field stores HTML-formatted text content, typically from rich text editors like TinyMCE. It validates content size and provides options for URL conversion handling.

## Configuration options

<ParamField path="maxSize" type="int64" default="5242880">
  Maximum size of the content in bytes (up to 2^53-1). Defaults to \~5MB if not set or zero.
</ParamField>

<ParamField path="convertURLs" type="bool" default="false">
  Hint for the editor whether to apply URL conversion (e.g., stripping the domain name if URLs use the same domain as the editor). This is primarily used by the frontend editor component.
</ParamField>

<ParamField path="required" type="bool" default="false">
  When true, requires the field value to be a non-empty string.
</ParamField>

## Validation rules

The editor field validates:

* **Type**: Value must be a string
* **Size**: Content size must not exceed `maxSize` bytes
* **Required**: If enabled, value cannot be empty

<Info>
  The editor field does NOT perform HTML sanitization or validation. You should sanitize HTML content in your application layer if storing user-generated content.
</Info>

## Go examples

<Tabs>
  <Tab title="Basic usage">
    ```go theme={null}
    import "github.com/pocketbase/pocketbase/core"

    field := &core.EditorField{
        Name:     "content",
        Required: true,
    }

    collection.Fields.Add(field)

    // Set HTML content
    record.Set("content", "<h1>Article Title</h1><p>Article content here...</p>")
    ```
  </Tab>

  <Tab title="With size limit">
    ```go theme={null}
    field := &core.EditorField{
        Name:     "article",
        Required: true,
        MaxSize:  1 << 20, // 1MB
    }

    collection.Fields.Add(field)

    record.Set("article", `
        <h1>My Article</h1>
        <p>This is the introduction...</p>
        <img src="/api/files/..." alt="Featured image" />
        <p>More content here...</p>
    `)
    ```
  </Tab>

  <Tab title="With URL conversion">
    ```go theme={null}
    field := &core.EditorField{
        Name:        "description",
        Required:    false,
        MaxSize:     2 << 20, // 2MB
        ConvertURLs: true,
    }

    collection.Fields.Add(field)

    record.Set("description", "<p>Check out <a href='/link'>this page</a></p>")
    ```
  </Tab>

  <Tab title="Multiple editor fields">
    ```go theme={null}
    // Main content
    collection.Fields.Add(&core.EditorField{
        Name:     "content",
        Required: true,
        MaxSize:  5 << 20, // 5MB
    })

    // Optional excerpt
    collection.Fields.Add(&core.EditorField{
        Name:     "excerpt",
        Required: false,
        MaxSize:  500 * 1024, // 500KB
    })

    record.Set("content", "<h1>Full Article</h1><p>...</p>")
    record.Set("excerpt", "<p>Short summary...</p>")
    ```
  </Tab>
</Tabs>

## Database column type

```sql theme={null}
TEXT DEFAULT '' NOT NULL
```

## Frontend integration

The `convertURLs` option is used by frontend editors like TinyMCE:

<CodeGroup>
  ```javascript TinyMCE configuration theme={null}
  tinymce.init({
      selector: '#editor',
      convert_urls: record.convertURLs, // From field config
      // Other TinyMCE options...
  });
  ```

  ```javascript Getting editor content theme={null}
  const content = tinymce.activeEditor.getContent();

  // Save to PocketBase
  await pb.collection('articles').update(recordId, {
      content: content
  });
  ```
</CodeGroup>

## Common use cases

<CodeGroup>
  ```go Blog posts theme={null}
  field := &core.EditorField{
      Name:     "body",
      Required: true,
      MaxSize:  10 << 20, // 10MB
  }
  ```

  ```go Product descriptions theme={null}
  field := &core.EditorField{
      Name:     "description",
      Required: true,
      MaxSize:  100 * 1024, // 100KB
  }
  ```

  ```go Email templates theme={null}
  field := &core.EditorField{
      Name:     "htmlTemplate",
      Required: true,
      MaxSize:  500 * 1024, // 500KB
  }
  ```

  ```go Page content (CMS) theme={null}
  field := &core.EditorField{
      Name:        "pageContent",
      Required:    true,
      MaxSize:     20 << 20, // 20MB
      ConvertURLs: true,
  }
  ```
</CodeGroup>

## HTML sanitization

The editor field does not sanitize HTML. You should implement sanitization in your application:

<CodeGroup>
  ```go Server-side sanitization (example) theme={null}
  import "github.com/microcosm-cc/bluemonday"

  func sanitizeHTML(html string) string {
      p := bluemonday.UGCPolicy()
      return p.Sanitize(html)
  }

  // Before saving
  cleanHTML := sanitizeHTML(userInput)
  record.Set("content", cleanHTML)
  ```

  ```javascript Client-side sanitization theme={null}
  import DOMPurify from 'dompurify';

  const cleanHTML = DOMPurify.sanitize(dirtyHTML);

  // Save sanitized content
  await pb.collection('articles').update(recordId, {
      content: cleanHTML
  });
  ```
</CodeGroup>

## Handling images and files

When storing HTML with embedded images, you have several options:

<CodeGroup>
  ```html Reference file field uploads theme={null}
  <!-- Upload images to a file field first -->
  <img src="/api/files/articles/RECORD_ID/image.jpg" alt="Article image" />
  ```

  ```html External images theme={null}
  <img src="https://cdn.example.com/image.jpg" alt="External image" />
  ```

  ```html Base64 (not recommended for large images) theme={null}
  <img src="data:image/png;base64,iVBORw0KG..." alt="Embedded image" />
  ```
</CodeGroup>

<Warning>
  Avoid storing large base64-encoded images in editor fields as they significantly increase field size. Instead, use a separate file field and reference the URLs.
</Warning>

## Best practices

<Note>
  * Set appropriate `maxSize` based on expected content length
  * Implement HTML sanitization to prevent XSS attacks when storing user content
  * Use file fields for images and reference them in HTML
  * Consider separating very long content into multiple fields
  * For plain text editors, use the text field instead
  * The `convertURLs` option is a UI hint; it doesn't modify stored data
  * Consider implementing content versioning for important editable content
</Note>

## Content size estimation

<Info>
  HTML content size includes all tags and attributes:

  * Plain text: \~1 byte per character
  * HTML tags add overhead: `<p>text</p>` is 12 bytes total
  * Embedded styles and scripts significantly increase size
  * Base64 images are \~33% larger than binary equivalents

  Plan your `maxSize` accordingly!
</Info>

## Zero value

The zero value for editor fields is an empty string `""`.