- 快速入门
- 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
Cloud deployment of editor & plugins
Tiny Cloud is the easiest way to integrate TinyMCE and upgrade to premium plugins.
Tiny Cloud can be used without an API key. Refer to the Introduction & getting started guide for more information. Sign up for an API key and update the script tag to use premium plugins or avoid the in-editor developer warning.
All Tiny Cloud accounts include a free, pre-configured cloud image proxy service. This setup uses the Image tools plugin.
Integrating TinyMCE for the first time
Step 1: Insert the Tiny Cloud script tag into the webpage
Insert the TinyMCE editor code into the application to load TinyMCE for the first time. The code inserting is done by adding the following script tag into your app, or in the case of a web page the <head>
of the page:
The following example adds a script tag into the application that inserts the code. Use the <head>
of the page on a web page.
<script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=your_API_key"></script>
Step 2: Load, customize and interact with TinyMCE
There are more than 40 open source plugins that enhance the editing experience in addition to the advanced content create solutions on Tiny Cloud. A range of simple examples are available. Refer to the Quick start section for more information.
Step 3: Specifying purchased TinyMCE plugins and toolbar/menu items
Extend the TinyMCE configuration to include any additional purchased plugins and associated toolbar and menu items. Refer to the following enablement guides for more information:
- Mentions
- Tiny Drive
- Comments 2.0
- Page Embed
- Permanent Pen
- Format Painter
- PowerPaste
- Spell Checker Pro
Note:
spellchecker_rpc_url
is not required when enabling this plugin via Tiny Cloud.
- Image Tools (with configured image proxy)
Note: Configuration of the
imagetools_cors_hosts
andimagetools_proxy
properties occurrs automatically.
- Moxie Manager
- Accessibility Checker
- Advanced Code Editor
- Enhanced Media Embed
- Link Checker
Note: It may take up to 30 minutes for the purchased plugin to be available to TinyMCE. Clear the browser’s cache.
Step 4: Forward proxy configuration
Ensure that the following URLs are accessible via this proxy if the network has a forward proxy that controls access to the internet.
- All URLs where the editor is deployed.
- All URLs where the plugins are deployed.
- https://imageproxy.tinymce.com
- https://hyperlinking.tinymce.com
- https://spelling.tinymce.com
Ensure the tiny-api-key
and tinymce-api-key
headers are retained while requesting the list of above URLs.
Step 5: Specifying a translation
Download a language pack to enable a language other than English (US). Specify its location with the language_url
configuration option.
Migrating from a self-hosted environment to Tiny Cloud
Step 1: Replace existing reference to tinymce.min.js
Migrating from a self-hosted environment to Tiny Cloud is easy. Remove the existing script tag that loads TinyMCE’s JavaScript.
Note: The script tag typically references
tinymce.min.js
hosted within the application or available at a legacy CDN.
Replace the script tag with the following:
<script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=your_API_key"></script>
Step 2: Update custom plugin paths
Reference external_plugins to ensure custom plugins or modified plugins continue to function in the Cloud deployment.
Warning! Do not use the regular plugins configuration element.
Step 3: Specify purchased TinyMCE plugins and toolbar buttons
Extend the TinyMCE configuration to include any additional purchased plugins and associated toolbar and menu items. Refer to the following enablement guides for more information:
- Mentions
- Tiny Drive
- Comments 2.0
- Page Embed
- Permanent Pen
- Format Painter
- Powerpaste
- Spell Checker Pro
Note:
spellchecker_rpc_url
is not required when enabling this plugin via Tiny Cloud.
- Image tools (with configured image proxy)
Note: Configuration of the
imagetools_cors_hosts
andimagetools_proxy
properties occurrs automatically.
- Moxie Manager
- Accessibility Checker
- Advanced Code Editor
- Enhanced Media Embed
- Link Checker
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论