tinymce

What is tinymce?

TinyMCE is a powerful and flexible rich text editor that can be embedded in web applications. It provides a wide range of features for text formatting, media embedding, and content management.

What are tinymce's main functionalities?

Basic Text Formatting

This initializes TinyMCE on a textarea with the ID 'mytextarea', enabling basic text formatting options like bold, italic, underline, and more.

tinymce.init({ selector: '#mytextarea' });

Image and Media Embedding

This configuration allows users to embed images and media files into the text editor. The 'image' and 'media' plugins are included, and the toolbar is updated to include buttons for these functionalities.

tinymce.init({ selector: '#mytextarea', plugins: 'image media', toolbar: 'image media' });

Custom Toolbar

This example shows how to customize the toolbar with specific buttons for undo, redo, text styles, alignment, and indentation.

tinymce.init({ selector: '#mytextarea', toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent' });

Content Style Customization

This configuration customizes the content style within the editor, setting the font family and size for the text.

tinymce.init({ selector: '#mytextarea', content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }' });

Autosave Plugin

This example demonstrates the use of the 'autosave' plugin, which automatically saves the content at specified intervals (every 30 seconds in this case).

tinymce.init({ selector: '#mytextarea', plugins: 'autosave', autosave_interval: '30s' });

Other packages similar to tinymce

ckeditor4

CKEditor 4 is another popular rich text editor that offers a wide range of features similar to TinyMCE. It provides extensive customization options and a variety of plugins for different functionalities. CKEditor 4 is known for its robust performance and ease of integration.

quill

Quill is a modern rich text editor built for compatibility and extensibility. It offers a clean API and a modular architecture, making it easy to customize and extend. Quill is lightweight and provides a responsive user experience.

froala-editor

Froala Editor is a lightweight WYSIWYG HTML editor with a focus on performance and user experience. It offers a rich set of features, including inline editing, image management, and a variety of plugins. Froala Editor is known for its sleek design and ease of use.

README

TinyMCE - JavaScript Library for Rich Text Editing

Building TinyMCE

Install Node.js on your system. Clone this repository on your system

$ git clone https://github.com/tinymce/tinymce.git

Open a console and go to the project directory.

$ cd tinymce/

Install grunt command line tool globally.

$ npm i -g grunt-cli

Install all package dependencies.

$ npm install

Now, build TinyMCE by using grunt.

$ grunt

Build tasks

grunt Lints, compiles, minifies and creates release packages for TinyMCE. This will produce the production ready packages.

grunt start Starts a webpack-dev-server that compiles the core, themes, plugins and all demos. Go to localhost:3000 for a list of links to all the demo pages.

grunt dev Runs tsc, webpack and less. This will only produce the bare essentials for a development build and is a lot faster.

grunt test Runs all tests on PhantomJS.

grunt bedrock-manual Runs all tests manually in a browser.

grunt bedrock-auto:<browser> Runs all tests through selenium browsers supported are chrome, firefox, ie, MicrosoftEdge, chrome-headless and phantomjs.

grunt webpack:core Builds the demo js files for the core part of tinymce this is required to get the core demos working.

grunt webpack:plugins Builds the demo js files for the plugins part of tinymce this is required to get the plugins demos working.

grunt webpack:themes Builds the demo js files for the themes part of tinymce this is required to get the themes demos working.

grunt webpack:<name>-plugin Builds the demo js files for the specific plugin.

grunt webpack:<name>-theme Builds the demo js files for the specific theme.

grunt --help Displays the various build tasks.

Bundle themes and plugins into a single file

grunt bundle --themes=modern --plugins=table,paste

Minifies the core, adds the modern theme and adds the table and paste plugin into tinymce.min.js.

Contributing to the TinyMCE project

TinyMCE is an open source software project and we encourage developers to contribute patches and code to be included in the main package of TinyMCE.

Basic Rules

• Contributed code will be licensed under the LGPL license but not limited to LGPL
• Copyright notices will be changed to Ephox Corporation, contributors will get credit for their work
• All third party code will be reviewed, tested and possibly modified before being released
• All contributors will have to have signed the Contributor License Agreement

These basic rules ensures that the contributed code remains open source and under the LGPL license.

How to Contribute to the Code

The TinyMCE source code is hosted on Github. Through Github you can submit pull requests and log new bugs and feature requests.

When you submit a pull request, you will get a notice about signing the Contributors License Agreement (CLA). You should have a valid email address on your GitHub account, and you will be sent a key to verify your identity and digitally sign the agreement.

After you signed your pull request will automatically be ready for review & merge.

How to Contribute to the Docs

Docs are hosted on Github in the tinymce-docs repo.

How to contribute to the docs, including a style guide, can be found on the TinyMCE website.