TinyMCE pattern

Use the TinyMCE editor for HTML editing.

Configuration

Option	Type	Default	Description
relatedItems	object	{ attributes: ["UID", "Title", "Description", "getURL", "portal_type", "path", "ModificationDate"], batchSize: 20, basePath: "/", vocabularyUrl: null, width: 500, maximumSelectionSize: 1, placeholder: "Search for item on site..." }	Related items pattern options.
upload	object	{ attributes: look at upload pattern for getting the options list }	Upload pattern options.
text	object	{ insertBtn: "Insert", cancelBtn: "Cancel", insertHeading: "Insert link", title: "Title", internal: "Internal", external: "External", email: "Email", anchor: "Anchor", subject: "Subject" image: "Image", imageAlign: "Align", scale: "Size", alt: "Alternative Text", captionFromDescription: "Show Image Caption from Image Description", caption: "Image Caption", externalImage: "External Image URI"}	Translation strings
imageScales	string		Image scale name/value object-array or JSON string for use in the image dialog.
targetList	array	[ {text: "Open in this window / frame", value: ""}, {text: "Open in new window", value: "_blank"}, {text: "Open in parent window / frame", value: "_parent"}, {text: "Open in top frame (replaces all frames)", value: "_top"}]	Possible targets for plonelink plugin
imageTypes	string	'Image'	Selectable Image types. Used in ploneimage plugin.
folderTypes	string	'Folder,Plone Site'	Browseable folderish types. Used for pat-relateditems in ploneimage and plonelink plugin.
tiny	object	{ plugins: [ "advlist", "autolink", "lists", "charmap", "print", "preview", "anchor", "searchreplace", "visualblocks", "code", "fullscreen", "insertdatetime", "media", "table", "contextmenu", "paste", "plonelink", "ploneimage" ], menubar: "edit table format tools view insert", toolbar: "undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | unlink plonelink ploneimage", autoresize_max_height: 1500 }	Default TinyMCE configuration options. These are set via configuration registry.
prependToUrl	string	""	Text to prepend to generated internal urls.
appendToUrl	string	""	Text to append to generated internal urls.
prependToScalePart	string	"/imagescale/"	Text to prepend to generated image scale url part.
appendToScalePart	string	""	Text to append to generated image scale url part.
linkAttribute	string	"path"	Ajax response data attribute to use for url.
defaultScale	string	"Original"	Scale name to default to.
inline	boolean	false	Show tinyMCE editor inline instead in an iframe. Use this on textarea inputs. If you want to use this pattern directly on a contenteditable, pass "inline: true" to the "tiny" options object.

Examples

Default

<form>
    <textarea
        class="pat-tinymce"
        data-pat-tinymce='{"relatedItems": {
                           "vocabularyUrl": "/relateditems-test.json"
                           }}'
    ></textarea>
</form>

With dropzone

<form>
    <textarea
        class="pat-tinymce"
        data-pat-tinymce='{"relatedItems": {"vocabularyUrl": "/relateditems-test.json" },
                       "upload": {"baseUrl": "/", "relativePath": "upload"}
                       }'
    ></textarea>
</form>

Inline editing

<h3>I'm a content editable</h3> <p>Try to edit me!</p>

<form>
    <textarea class="pat-tinymce" data-pat-tinymce='{"inline": true}'>
   <h3>I'm a content editable</h3>
   <p>Try to edit me!</p>
 </textarea
    >
</form>