Textarea Mimetype Selector pattern.

Display the MIME type selection widget for textareas.

This pattern displays a MIME type selection widget for textareas. It switches the widget according to the selected MIME type.

widgets option Structure

Complex Object/JSON structure with MimeType/PatternConfig pairs. The MimeType is a string like "text/html". The PatternConfig is a object with a "pattern" and an optional "patternOptions" attribute. The "pattern" attribute's value is a string with the patterns name and the "patternOptions" attribute is a object with whatever options the pattern needs. For example, to use the TinyMCE pattern for the HTML mimetype, use "text/html": {"pattern": "tinymce"}

Configuration

Option Type Default Description
textareaName string "" Value of name attribute of the textarea.
widgets object {'text/html': {pattern: 'tinymce', patternOptions: {}}} MimeType/PatternConfig pairs.

Examples

Example 1

```html
```

Mimetype selection on textarea including text/html mimetype with TinyMCE editor.

<select name="text.mimeType" class="pat-textareamimetypeselector" data-pat-textareamimetypeselector='{ "textareaName": "text", "widgets": { "text/html": { "pattern": "tinymce", "patternOptions": { "tiny": { "plugins": [], "menubar": "edit format tools", "toolbar": " " } } } } }'

```html ```

Mimetype selection on textarea with inline TinyMCE editor.

<select name="text.mimeType" class="pat-textareamimetypeselector" data-pat-textareamimetypeselector='{ "textareaName": "text2", "widgets": { "text/html": { "pattern": "tinymce", "patternOptions": { "inline": true, "tiny": { "plugins": [], "menubar": "edit format tools", "toolbar": " " } } } } }'

<textarea name="text2">
 <h1>hello world</h1>
</textarea>
<select
    name="text.mimeType"
    class="pat-textareamimetypeselector"
    data-pat-textareamimetypeselector='{
     "textareaName": "text2",
     "widgets": {
       "text/html": {
         "pattern": "tinymce",
         "patternOptions": {
           "inline": true,
           "tiny": {
             "plugins": [],
             "menubar": "edit format tools",
             "toolbar": " "
           }
         }
       }
     }
   }'
>
    <option value="text/html">text/html</option>
    <option value="text/plain" selected="selected">text/plain</option>
</select>