- 快速入门
- 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
Content appearance options
body_class
This option enables you to specify a class for the body of each editor instance. This class can then be used to do TinyMCE specific overrides in your content_css
. There is also a specific mceForceColors
class that can be used to override the text and background colors to be black and white.
Type: String
Example
This will add the same class to all editors that gets created by the init
call.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
body_class: 'my_class'
});
This will set specific classes on the bodies of specific editors.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
body_class: 'elm1=my_class, elm2=my_class'
});
body_id
This option enables you to specify an id for the body of each editor instance. This id can then be used to do TinyMCE specific overrides in your content_css
.
Type: String
Example
This will add the same id to all editors that gets created by the init
call.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
body_id: 'my_id'
});
This will set specific ids on the bodies of specific editors.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
body_id: 'elm1=my_id, elm2=my_id2'
});
content_css
It is usually desirable that TinyMCE’s editable area has the same styling as the surrounding content. Consistent styling is achieved with the content_css
option, which enables you to extend external CSS into the editable area.
The CSS file used in this setting should be the same css file that controls the look and style of all your pages. So, let’s say you include a file myLayout.css
in all your pages to control your site’s global appearance, then this file must be set as your content_css
value. Doing this ensures the content in the editable area also has your site’s style.
Note: If you specify a relative path, it is resolved in relation to the URL of the (HTML) file that includes TinyMCE, not relative to TinyMCE itself.
Type: String
, Array
Absolute path example
// File: http://domain.mine/mysite/index.html
tinyMCE.init({
selector: 'textarea', // change this value according to your HTML
content_css : '/myLayout.css' // resolved to http://domain.mine/myLayout.css
});
Relative path example
// File: http://domain.mine/mysite/index.html
tinyMCE.init({
selector: 'textarea', // change this value according to your HTML
content_css : 'mycontent.css' // resolved to http://domain.mine/mysite/mycontent.css
});
Using multiple stylesheets example
tinyMCE.init({
selector: 'textarea', // change this value according to your HTML
content_css : 'mycontent.css,mycontent2.css' // includes both CSS files in header
});
Using multiple stylesheets as array example
tinyMCE.init({
selector: 'textarea', // change this value according to your HTML
content_css: ['mycontent.css', 'mycontent2.css'] // includes both CSS files in header, ability to have CSS with `,` in URL
});
Browser caching
Browser caching might cause TinyMCE to not read the contents of a changed CSS file. You’ll see “old” colors & styles.
One solution is to manually clear the browser cache when the file for content_css
or editor_css
has changed. Another solution is to use an old hack which adds a bogus parameter to the URL containing a present time stamp like “myFile.css?bogus=10023561235”. Possible solutions could look like this:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
content_css: 'path/myfile.css?' + new Date().getTime()
});
tinymce.init({
selector: 'textarea', // change this value according to your HTML
content_css: 'path/myscript.php?myParam=myValue&bogus=' + new Date().getTime()
});
content_css_cors
When content_css_cors
is set to true
, the editor will add a crossorigin="anonymous"
attribute to the link tags that the StyleSheetLoader uses when loading the content_css
. This allows you to host the content_css on a different server than the editor itself.
Type: Boolean
Default Value: false
Example
// File: http://domain.mine/mysite/index.html
tinyMCE.init({
selector: 'textarea', // change this value according to your HTML
content_css : 'http://www.somewhere.example/mycontent.css',
content_css_cors: true
});
content_style
This option allows you to set custom CSS styles as a string that is injected into the editor’s iframe.
These styles are useful for previewing content as it appears outside the editor. Since these styles are not saved with the content, it is important that they match the styles in the location that the content appears.
Type: String
Example
tinymce.init({
selector: 'textarea', // change this value according to your HTML
content_style: "div {margin: 10px; border: 5px solid red; padding: 3px}"
});
inline_boundaries
The inline_boundaries option allows you to disable the inline boundaries. For information on how to change the appearance of the inline boundaries see the Boilerplate Content CSS page.
Type: Boolean
Default Value: true
Possible Values: true
, false
Example
tinymce.init({
selector: 'textarea', // change this value according to your HTML
inline_boundaries: false
});
inline_boundaries_selector
The inline_boundaries_selector option allows you specify what elements the inline boundaries should apply to. This defaults to a[href],code
but can be extended to include other inline elements such as b
, strong
, i
, and em
.
If you add new elements, you need to add CSS selectors for them in the content CSS. See the Boilerplate Content CSS page for details.
Type: String
Default Value: a[href],code
Example
tinymce.init({
selector: 'textarea', // change this value according to your HTML
inline_boundaries_selector: 'a[href],code,b,i,strong,em'
});
text_color
The textcolor
component adds the forecolor/back color button controls that enables selecting colors from a color picker and applying them to text. It adds a toolbar button to allow this functionality.
Type: String
Example
tinymce.init({
selector: "textarea",
toolbar: "forecolor backcolor"
});
Options
These settings affect the execution of the textcolor
. The dimensions and mapping of the grid of text colors can be set here.
color_cols
This option allows specifying the number of columns that can appear on the grid of text colors. The number of rows is calculated based on how many text colors are supplied divided by the specified number of columns. The textcolor_cols
and textcolor_rows
property has been removed in TinyMCE 5.0.
Type: String
Default Value: "5"
Example
tinymce.init({
selector: "textarea", // change this value according to your HTML
toolbar: "forecolor backcolor",
color_cols: "5"
});
color_map
This option allows specifying a map of the text colors that will appear in the grid.
Type: Array
Example
tinymce.init({
selector: "textarea", // change this value according to your HTML
toolbar: "forecolor backcolor",
color_map: [
"000000", "Black",
"993300", "Burnt orange",
"333300", "Dark olive",
"003300", "Dark green",
"003366", "Dark azure",
"000080", "Navy Blue",
"333399", "Indigo",
"333333", "Very dark gray",
"800000", "Maroon",
"FF6600", "Orange",
"808000", "Olive",
"008000", "Green",
"008080", "Teal",
"0000FF", "Blue",
"666699", "Grayish blue",
"808080", "Gray",
"FF0000", "Red",
"FF9900", "Amber",
"99CC00", "Yellow green",
"339966", "Sea green",
"33CCCC", "Turquoise",
"3366FF", "Royal blue",
"800080", "Purple",
"999999", "Medium gray",
"FF00FF", "Magenta",
"FFCC00", "Gold",
"FFFF00", "Yellow",
"00FF00", "Lime",
"00FFFF", "Aqua",
"00CCFF", "Sky blue",
"993366", "Red violet",
"FFFFFF", "White",
"FF99CC", "Pink",
"FFCC99", "Peach",
"FFFF99", "Light yellow",
"CCFFCC", "Pale green",
"CCFFFF", "Pale cyan",
"99CCFF", "Light sky blue",
"CC99FF", "Plum"
]
});
custom_colors
This option allows disabling the custom color picker in all color swatches of the editor.
Type: Boolean
Default Value: true
Example
tinymce.init({
selector: "textarea", // change this value according to your HTML
toolbar: "forecolor backcolor",
custom_colors: false
});
visual_anchor_class
This option enables you to configure a custom class to be added to anchors with names since these are invisible by default.
Type: String
Example
tinymce.init({
selector: 'textarea', // change this value according to your HTML
visual_anchor_class: 'my-custom-class'
});
visual_table_class
This option enables you to configure a custom class to be added to tables that have a border set to 0
. This class is used to add dotted borders to tables that would otherwise be invisible for the user.
Type: String
Example
tinymce.init({
selector: 'textarea', // change this value according to your HTML
visual_table_class: 'my-custom-class'
});
visual
This true/false option gives you the ability to enable or disable the visual
aid.
This setting also allows visual
aid to override the Menu
settings. For instance, you can enable or disable visual
aid even if the Menu
is set to False
.
If the border of a table is set to 0
, then TinyMCE adds a dotted line around the table by default.
Type: Boolean
Default Value: true
Possible Values: true
, false
Example
tinymce.init({
selector: 'textarea', // change this value according to your HRML
visual: false
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论