- 快速入门
- Explore advanced topics
- Accessibility
- Editor control identifiers
- Annotations
- Editor events
- tinymce-AddOnManager
- Boilerplate content CSS
- Handle asynchronous image uploads
- tinymce-Annotator
- tinymce-FocusEvent
- Configuring callbacks for Comments 2-0
- Keyboard shortcuts
- tinymce-CommandEvent
- tinymce-FocusManager
- tinymce-WindowManager
- Toolbar buttons
- PHP image upload handler
- tinymce-ContentEvent
- tinymce-Formatter
- tinymce-dom-DomQuery
- Create a plugin for TinyMCE
- Security
- tinymce-Editor
- tinymce-NotificationManager
- tinymce-dom-DOMUtils
- Create a skin for TinyMCE
- Usage with module loaders
- tinymce-EditorCommands
- tinymce-Plugin
- tinymce-dom-ScriptLoader
- Create custom notifications
- TinyMCE plugin Yeoman generator
- tinymce-EditorManager
- tinymce-ProgressStateEvent
- tinymce-dom-BookmarkManager
- Editor command identifiers
- tinymce-Formatter
- tinymce-EditorObservable
- tinymce-ResizeEvent
- tinymce-dom-ControlSelection
- tinymce
- tinymce-Env
- tinymce-Shortcuts
- tinymce-dom-DomQuery
- tinymce-Event
- tinymce-Theme
- tinymce-dom-DOMUtils
- tinymce-UndoManager
- tinymce-dom-EventUtils
- tinymce-dom-RangeUtils
- tinymce-dom-ScriptLoader
- tinymce-dom-Selection
- tinymce-html-Schema
- tinymce-dom-Serializer
- tinymce-html-Serializer
- tinymce-util-I18n
- tinymce-dom-TreeWalker
- tinymce-html-Styles
- tinymce-util-JSON
- Cloud deployment of plugins Only
- tinymce-editor-ui-registry
- tinymce-html-Writer
- tinymce-util-JSONRequest
- Version compatibility reference
- Image & file upload options
- tinymce-geom-Rect
- tinymce-util-LocalStorage
- Configuration options reference
- Integration and setup options
- tinymce-html-DomParser
- tinymce-util-Observable
- tinymce-util-Observable
- Advanced editing behaviors
- JWT authentication setup
- tinymce-html-Entities
- tinymce-util-URI
- tinymce-util-Tools
- Content appearance options
- Localization options
- tinymce-html-Node
- tinymce-util-Color
- tinymce-util-XHR
- Content filtering options
- Spelling options
- tinymce-html-SaxParser
- tinymce-util-Delay
- Cloud deployment guide
- Content formatting options
- URL handling options
- tinymce-util-EventDispatcher
- Cloud deployment of editor & plugins
- Contribute to documentation
- Examples & demos
- Specify editor & plugin versions
- Contribute to TinyMCE development
- Basic example
- User interface options
- Case Change
- Checklist plugin
- Classic editor example
- Comments 2-0 Demo
- Custom formats example
- Custom menu item
- HTML5 formats example
- Valid elements example
- Custom toolbar button
- Format Painter
- Live example
- Embed rich media
- Full featured example
- Premium features
- Configure Enhanced Media Embed Server
- Server-side component installation
- Custom toolbar menu button
- Image tools example
- Accessibility checking
- Integrate Enhanced Media Embed Server
- Configure server-side components
- Custom toolbar split button
- Inline editor example
- Advanced source code editing
- Format Painter
- Troubleshoot server-side components
- Tiny Drive
- Local upload
- Case Change
- Get TinyMCE bugs fixed
- Professional support
- Distraction-free editor example
- Page Embed plugin
- Checking links as-you-type
- Mentions
- System requirements
- Basic local file picker
- Permanent Pen plugin
- Check Spelling As-You-Type
- Self-hosted file management
- Commenting & collaboration
- URL conversion example
- Adding custom dictionaries
- Page Embed plugin
- Cloud-based file management
- Checklist plugin
- Paste from Word
- Introduction & getting started
- Permanent Pen Plugin
- Advanced installation choices
- Logo & attribution requirements
- Basic setup
- Customizing the editor UI
- TinyMCE distraction-free editing mode
- Filtering TinyMCE content
- Setup inline editing mode
- Rails integration
- Get Support & FAQ
- Work with plugins to extend TinyMCE
- React integration
- Advanced Code Editor plugin
- Localize TinyMCE
- Integrate with other projects
- TinyMCE for Swing integration
- Advanced List plugin
- Code plugin
- Use multiple TinyMCE instances in a single page
- Angular 2+ integration
- Vue integration
- Anchor plugin
- Code Sample plugin
- Check spelling in TinyMCE
- Angular 1 integration
- WordPress integration
- Autolink plugin
- Color Picker plugin
- System requirements
- Bootstrap integration
- Migrating from TinyMCE 4-x to TinyMCE 5-0-
- Autoresize plugin
- Comments 2-0
- Uploading images and files
- Dojo integration
- TinyMCE Mobile
- Autosave plugin
- TinyMCE classic editing mode
- jQuery integration
- BBCode plugin
- Context Menu plugin
- KnockoutJS integration
- Add plugins to TinyMCE
- Case Change
- Directionality plugin
- Accessibility Checker plugin
- Character Map plugin
- Drive plugin
- Checklist plugin
- Emoticons plugin
- Format Painter
- Full Page plugin
- Full Screen plugin
- Link Checker plugin
- Help plugin
- Lists plugin
- Paste plugin
- Horizontal Rule plugin
- Media plugin
- Permanent Pen Plugin
- Table plugin
- Image plugin
- Enhanced Media Embed plugin
- PowerPaste plugin
- Template plugin
- User interface components
- Image Tools plugin
- Mentions plugin
- Preview plugin
- Text Color plugin
- Autocompleter
- Import CSS plugin
- MoxieManager plugin
- Print plugin
- Text Pattern plugin
- Context forms
- Insert Date/Time plugin
- Nonbreaking Space plugin
- Quick Toolbar plugin
- Spell Checker Pro plugin
- Context menu
- Legacy Output plugin
- Noneditable plugin
- Save plugin
- Table of Contents plugin
- Context toolbar
- Link plugin
- Page Break plugin
- Search and Replace plugin
- Visual Blocks plugin
- Custom sidebar
- Page Embed plugin
- Spell Checker plugin
- Visual Characters plugin
- Dialog
- Tab Focus plugin
- Word Count plugin
- Dialog components
- Quick start
- Custom menu items
- Toolbar buttons
- Types of toolbar buttons
Dialog components
This chapter describes the Dialog component summary is a reference list of all TinyMCE UI components that can be used to display simple information.
alertbanner
An alertbanner is a color-coded banner to alert the user of a problem. A URL may be provided to direct users to a reference site that may resolve the informed issue.
{
type: 'alertbanner',
level: 'info', // 'info' | 'warn' | 'error' | 'success'
text: 'An informative message to the user',
icon: string
}
bar
A bar is a layout component that creates a single row of items in the dialog body.
{
type: 'bar',
items: [ ]
}
button
A button is a component to be used inside the dialog body. These buttons differ from toolbar buttons and dialog footer buttons.
{
type: 'button',
text: 'Alpha',
primary: true,
name: 'alpha-button'
}
checkbox
A checkbox is a component used to toggle states to on
or off
.
{
type: 'checkbox',
name: 'checkbox-1',
label: 'Checkbox Label'
}
collection
A collection is a layout component that creates a panel containing a collection of symbols in the dialog body.
{
type: 'collection',
name: 'collection-1',
label: 'Collection Label'
}
Note: To populate the collection with data, specify an array of items in the dialogs
initialData
property. Each item should contain atext
,value
, andicon
property.
colorinput
A colorinput is a specialized input field which takes RGB
colors and will render the sample color typed.
{
type: 'colorinput',
name: 'colorA',
label: 'Color Label'
}
colorpicker
A colorpicker is an intuitive color picker tool similar to image editors.
{
type: 'colorpicker',
name: 'color',
label: 'Color A'
}
dropzone
A dropzone is a component that catches drag and drops items or lets the user browse that can send a list of files for processing and receive the result.
{
type: 'dropzone',
name: 'dropzone',
label: 'Dropzone'
}
grid
A grid is a layout component that creates columns in the dialog body.
{
type: 'grid',
columns: 2,
items: [ ]
}
htmlpanel
An htmlpanel is similar to panel. It only takes a string of HTML.
{
type: 'htmlpanel',
html: '<div>html</div>'
}
iframe
An iframe is a component used to define the values of an iframe.
{
name: 'IframeName',
type: 'iframe',
label: 'Description of iframe',
sandboxed: true
}
input
An input is a single line text field, and also renders a label element.
{
type: 'input',
name: 'inputA',
label: 'Input Label',
placeholder: 'example'
}
label
A label is a component that wraps other components and renders a label element.
{
type: 'label',
label: 'Caption',
items: [ ]
}
panel
A panel is a basic container, that holds other components, we can compose many components inside a panel. In HTML terms consider a panel a <div>
wrapper. A dialog body configuration must begin with either a panel
or a tabpanel
.
{
type: 'panel',
items: [ ... ]
}
selectbox
A selectbox allows users to select a choice from a list of many options.
{
type: 'selectbox',
name: 'SelectA',
label: 'Select Label',
items: [
{ value: 'one', text: 'One' },
{ value: 'two', text: 'Two' }
]
}
sizeinput
A sizeinput is a specialized input field that can lock ratios, see image dialog.
{
type: 'sizeinput',
name: 'size',
label: 'Dimensions'
}
table
A table is a layout component that renders a simple table.
{
type: 'table',
header: [ 'Heading 1', 'Heading 2', 'Heading 3' ],
cells: [
[ 'Cell 1', 'Cell 2', 'Cell 3' ],
[ 'Cell 4', 'Cell 5', 'Cell 6' ]
]
}
tabpanel
A tabpanel is similar to a panel
, where it can hold other components. Tabpanel is a layout component that will separate sections using tabs. Each tab is a panel that can contain different components. A dialog body configuration must begin with either a panel
or a tabpanel
.
{
type: 'tabpanel',
tabs: [
{
title: 'First Tab',
items: [ .... ]
},
...
]
}
textarea
A textarea is a multiline text field.
{
type: 'textarea',
name: 'text-a',
label: 'Text: ',
placeholder: 'example'
}
urlinput
A urlinput is a specialized input text field for image dialog. This will include a typeahead for previous image URLs entered.
// URL input for image dialog
// This will include a typeahead for previous image urls entered
{
name: 'src',
type: 'urlinput',
filetype: 'image',
label: 'Source'
}
// URL input for link dialog
// The main difference from the image mode is that it will include typeahead
// Information for all anchor targets and headings in the document as well
// As the history of 5 previously entered URLs.
{
name: 'url',
type: 'urlinput',
filetype: 'file',
label: 'Url'
}
// Note that "filetype" also accepts "media"
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论