The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular

Overview

TinyMCE

TinyMCE is the world's most advanced open source core rich text editor.

Trusted by millions of developers, and used by some of the world's largest companies and fastest-growing start-ups, TinyMCE is the WYSIWYG editor that is built to scale, designed to innovate, and is built to thrive with edge-cases.

You can access a full featured demo of TinyMCE in the docs on the Tiny website.

Screenshot of the TinyMCE Editor

Get started with TinyMCE

TinyMCE Cloud Deployment Quick Start Guide

TinyMCE Self-hosted Deployment Guide

TinyMCE provides a range of configuration options that allow you to integrate it into your application. Start customizing with a basic setup.

Configure it for one of three modes of editing:

Features

Integration

TinyMCE is easily integrated into your projects with the help of components such as:

See the Tiny docs for a full list of integration components.

Customization

It is easy to configure the UI to match the design of your site, product or application. Due to its flexibility, you can configure the editor with as much or as little functionality as you like, depending on your requirements.

With 50+ powerful plugins available, adding additional functionality is as simple as including a single line of code. Realizing the full power of most plugins requires only a few lines more.

Extensibility

Sometimes your business requirements can be quite unique, and you need the freedom and flexibility to innovate. View the source code and develop your own extensions for custom functionality to meet your own requirements. The API is exposed to make it easier for you to write custom functionality that fits within the existing framework of TinyMCE UI components.

Extended Features and Support

For the professional software teams that require more in-depth efficiency, compliance or collaborative features built to enterprise-grade standards, please get in touch with our team.

Tiny also offers dedicated SLAs and support for professional development teams.

Compiling and contributing

In 2019 the decision was made to transition our codebase to a monorepo. For information on compiling and contributing, see: contribution guidelines.

As an open source product, we encourage and support the active development of our software.

Want more information?

Visit the TinyMCE website and check out the TinyMCE documentation.

Comments
  • How to get TinyMCE to work with webpack and babel

    How to get TinyMCE to work with webpack and babel

    I have a couple of projects that uses TinyMCE and I think it's one of the better editors when HTML is the document model.

    I wanted to use TinyMCE with a webpack setup so I tried: npm i --save tinymce and then import tinymce from 'tinymce' - but that didn't work.

    After some time researching I got a solution to work. I just want to share it here if it can help others with the same issue. A couple of people have already asked for it.

    This is not an issue but just a simple guide to get up and running :-)

    Requirements

    A working webpack setup with Babel (es2015 presets)

    Dependencies

    You need tinymce and a couple of loaders for webpack.

    npm i --save tinymce
    npm i --save-dev imports-loader exports-loader
    

    Webpack config

    Use window as this in the wrapping function generated by webpack

    const config = {
      module: {
        loaders: [
          {
            test: require.resolve('tinymce/tinymce'),
            loaders: [
              'imports?this=>window',
              'exports?window.tinymce'
            ]
          },
          {
            test: /tinymce\/(themes|plugins)\//,
            loaders: [
              'imports?this=>window'
            ]
          }    
        ]
      }
    }
    

    Implementation

    Create a file in your source and add the following:

    // Core - these two are required :-)
    import tinymce from 'tinymce/tinymce'
    import 'tinymce/themes/modern/theme'
    
    // Plugins
    import 'tinymce/plugins/paste/plugin'
    import 'tinymce/plugins/link/plugin'
    import 'tinymce/plugins/autoresize/plugin'
    
    // Initialize
    tinymce.init({
      selector: '#tinymce',
      skin: false,
      plugins: ['paste', 'link', 'autoresize']
    })
    

    I've added skin: false because I assume the project want to use it's own pipeline to provide the CSS as a bundle. TinyMCE won't work until the CSS is included(!)

    resolution: fixed in coming release type: feature 
    opened by hkjorgensen 56
  • Editor without theme throws error

    Editor without theme throws error

    Since 52e00b591bfc309a18b55f84c490368535be288a, editors without a theme (no theme object) throw the following error:

    Uncaught (in promise) TypeError: Cannot read property 'getNotificationManagerImpl' of undefined
        at getImplementation (tinymce.0421cdb5.js:25422)
        at reposition (tinymce.0421cdb5.js:25434)
        at <anonymous>
    getImplementation @ tinymce.0421cdb5.js:25422
    reposition @ tinymce.0421cdb5.js:25434
    Promise rejected (async)
    requestAnimationFrame @ tinymce.0421cdb5.js:479
    (anonymous) @ tinymce.0421cdb5.js:25500
    fire @ tinymce.0421cdb5.js:21534
    fire @ tinymce.0421cdb5.js:21858
    (anonymous) @ tinymce.0421cdb5.js:48492
    each @ tinymce.0421cdb5.js:3495
    globalEventDelegate @ tinymce.0421cdb5.js:48488
    executeHandlers @ tinymce.0421cdb5.js:1055
    defaultNativeHandler @ tinymce.0421cdb5.js:1082
    

    It seems there needs to be an extra check for the theme object here: https://github.com/tinymce/tinymce/commit/52e00b591bfc309a18b55f84c490368535be288a#diff-2e5c98d81ce2481aa1042b2320728b65R37

    type: bug status: verified component: ui status: regression status: escalated 
    opened by ellatrix 42
  • selecting image on Chrome 58 bug (won't select image)

    selecting image on Chrome 58 bug (won't select image)

    Console

    wp-tinymce.php:9 Uncaught DOMException: Failed to execute 'setBaseAndExtent' on 'Selection': There is no child at offset 1. at N. (/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4104-20140822:9:19886) at t.r [as fire] (/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4104-20140822:8:9493) at N.fire (/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4104-20140822:9:26870) at f.i (/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4104-20140822:9:27935) at i (/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4104-20140822:3:5288) at HTMLHtmlElement.m (/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4104-20140822:3:5628)

    type: bug needs: more info 
    opened by bradleypulaski 37
  • Spacebar not working properly

    Spacebar not working properly

    Do you want to request a feature or report a bug? Bug

    What is the current behavior? The user cannot insert a space under certain configurations. Pressing the spacebar once does nothing and pressing it again inserts two spaces.

    If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via fiddle.tinymce.com or similar. http://fiddle.tinymce.com/34gaab

    What is the expected behavior? User hits the spacebar and a single space is added,.

    Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE? This works in 4.8.5. It breaks in 4.9.0

    type: bug component: keyboard status: escalated 
    opened by colinmathews 35
  • TypeScript declaration file

    TypeScript declaration file

    Are there plans to add a TinyMCE declaration file for TypeScript? It is now recommended that the file gets bundled with the npm package instead of getting added to DefinitelyTyped. I can provide a declaration file. It's still a WIP but could get things started.

    type: feature 
    opened by martinduparc 33
  • upgrading to 4.4.1 causing error

    upgrading to 4.4.1 causing error "Cannot read property 'settings' of undefined"

    Tinymce is created dynamically , and the code to create is as follows

    var ed = new tinymce.Editor(this.id, { settings }, tinymce.EditorManager);
            var self=this;
            this.ed.on('keyup',()=> {
              self.model = self.ed.getContent();
            });
    
            this.ed.render();
    
    

    is it bug? any help please

    type: bug needs: more info 
    opened by kamal-chagam 32
  • Add missing table cell properties

    Add missing table cell properties

    Tinymce 3 had more table editing options. If you opened the table cell editing dialog there was an advanced tab with options such as background color. This is missing from tinymce 4.

    Legacy information imported from TinyMCE bug tracker:

    #T5900 posted by mpetty

    Tags: [firefox msie safari chrome opera styles tables] Status: Closed Resolution: Fixed Attached URL: none

    browser: firefox browser: ie browser: safari browser: chrome browser: opera origin: tinymce.com resolution: fixed in coming release type: feature 
    opened by TinyMCE-User 32
  • Editor doesn't work on ie 10 due to permission denied error thrown by editor.tinymce.min.js.

    Editor doesn't work on ie 10 due to permission denied error thrown by editor.tinymce.min.js.

    Description of problem:

    I'm using CDN Version provided by Cachefly but the editor doesn't work in case several editors are on same page and they are used for posting. My code is fine and works perfectly on other browsers Mozilla and chrome instead of IE10. Also the custom buttons I've added to my toolbar works fine but the inbuilt buttons of tinymce like Bold,Italics,etc used doesn't work. Please look into this.

    Steps to reproduce:

    1.Register to the forum as new user.

    2.Create any new topic on test forum.

    3.Quick Reply to this topic.. add several replies like 5-7. All topics should be made using source code button on editor and pasting simple html in it.

    4.Now refresh page and go to top and click on the edit link to edit your previous post. Don't click on the bottom editor now. After editing your previous post Save it and then go to the bottom editor. Now click on it.

    5.Now in console you can find that on IE10 it throws SCRIPT70: Permission denied error in file editor.tinymce.min.js. If you not find it repeat step4 several times I've also done it until error is thrown.

    7.You can now see that the editor at bottom doesn't work after the error.

    Expected result: There shouldn't be any error as it works fine on Firefox & chrome.

    Actual result: Error is thrown by editor.tinymce.min.js .

    Legacy information imported from TinyMCE bug tracker:

    #T6325 posted by vijay

    Tags: [msie msie10 js error ie 10 permission denied] Status: Closed Resolution: Fixed Attached URL: http://neeraj2009.forumchitchat.com/

    browser: ie type: bug origin: tinymce.com resolution: fixed in coming release 
    opened by TinyMCE-User 31
  • Cannot read property 'body' of undefined

    Cannot read property 'body' of undefined

    Sometimes exception occurs in getBody: function() { return this.bodyElement || this.getDoc().body; }

    getDoc returns undefined. getDoc should return .document for iframe. But sometimes iframe is not created.

    iframe is created by the following method:

    /**
    * Initializes the editor this will be called automatically when all plugins/themes and language packs are loaded by the rendered method.
    This method will setup the iframe and create the theme and plugin instances.
    *
    * @method init
    */
    init: function() {
    

    So I think getBody is called before all plugins are loaded.

    type: bug status: verified component: integration needs: fix by 3rd party 
    opened by valchanin 30
  • Error: NS_ERROR_UNEXPECTED

    Error: NS_ERROR_UNEXPECTED

    Description of problem:

    Version 4.0b3 (2013-05-15)

    Error: NS_ERROR_UNEXPECTED: Unexpected error Source File: http://example.com/tinymce/js/tinymce/tinymce.min.js Line: 4

    Steps to reproduce:

    1. use firefox (my ver is 21)
    2. after a few pages are loaded with mce on it, it happens rather randomly. triggers error on multiple diff computers and os

    Legacy information imported from TinyMCE bug tracker:

    #T6013 posted by [email protected]

    Tags: [firefox 4x] Status: Open Resolution: None Attached URL: none

    browser: firefox type: bug origin: tinymce.com 
    opened by TinyMCE-User 29
  • bullist and numblist options are not shown in toolbar

    bullist and numblist options are not shown in toolbar

    We have suddenly started facing issue where numlist, bullist icons do not appear in the toolbar. This was a working code for a long time and since yesterday it stopped showing the list icons.

    tinymce.init({
              selector: ".editable-mce",
              menubar: false,
              toolbar: 'bold italic underline | bullist numlist outdent indent',
              inline: true,
              forced_root_block: "p",
              forced_root_block_attrs: {
                'class': 'tiny-mce-root',
                'placeholder': $(selector).attr('placeholder')
              },
              setup: function(ed) {
                ed.on('init', function(args) {
                  if(view.$el.find('p.tiny-mce-root').text().trim() == '') {
                    view.$el.find('p.tiny-mce-root').addClass('placeholder'); 
                  } 
                });
              }
            });
    
    type: bug status: verified plugin: advlist plugin: lists 
    opened by prcongithub 27
  • TINY-9231: fixed firefox case with drag/drop next to block

    TINY-9231: fixed firefox case with drag/drop next to block

    Related Ticket: TINY-9231

    Description of Changes:

    • This is a follow up PR to the previous TINY-9231 PR a Firefox specific case was found during QA

    Pre-checks:

    • [x] Changelog entry added
    • [x] Tests have been added (if applicable)
    • [x] Branch prefixed with feature/, hotfix/ or spike/

    Review:

    • [x] Milestone set
    • [x] Docs ticket created (if applicable)

    GitHub issues (if applicable):

    opened by spocke 0
  • After increasing the font size text deprecation line is not aligned properly

    After increasing the font size text deprecation line is not aligned properly

    What is the current behavior? Describe the bug Text deprecation line is aligned top of the text after increasing the font size. Error Image

    Please provide the steps to reproduce and if possible a minimal demo of the problem via fiddle.tiny.cloud or similar.

    What is the expected behavior? Expected behavior Image

    Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE? TinyMCE Version 2.1

    opened by Rafiul-Islam 0
  • [5.x] Paste plugin removes whitespace

    [5.x] Paste plugin removes whitespace

    What is the current behavior? Describe the bug

    I use the paste plugin to allow copy/paste and drag/drop of images into the editor. However, when the paste plugin is used the way plain text clipboard content is processed changes and introduces undesirable behaviour.

    Clipboard content:

    Test
    
    Test
    

    With paste plugin (https://fiddle.tiny.cloud/Tviaab), the editor produces:

    <p>Test</p>
    <p>Test</p>
    

    Without paste plugin (https://fiddle.tiny.cloud/Tviaab/1), the editor produces:

    <p>Test</p>
    <p><br></p>
    <p>Test</p>
    

    What is the expected behavior?

    I expect the paste plugin to match the default editor behaviour:

    <p>Test</p>
    <p><br></p>
    <p>Test</p>
    

    Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE?

    5.10.7

    opened by bytestream 1
  • Image with href in table formatting off

    Image with href in table formatting off

    Code:

    • https://fiddle.tiny.cloud/Sviaab/6
        <table width="650" cellspacing="0" cellpadding="0" align="center">
            <tbody>
                <tr>
                    <td class="edmTable_td" style="padding: 0;"><a href="https://www.facebook.com/"><img
                                id="edmTable_fb" class="" style="vertical-align: 0px; display: block;"
                                src="../footer_01.jpg" alt="facebook" width="160" /></a></td>
                    <td class="edmTable_td" style="padding: 0;"><a href="https://www.instagram.com/"><img
                                id="edmTable_ig" class="" style="vertical-align: 0px; display: block;"
                                src="../footer_02.jpg" alt="instagram" width="160" /></a></td>
                    <td class="edmTable_td" style="padding: 0;"><a href="https://line.me/"><img
                                id="edmTable_line" class="" style="vertical-align: 0px; display: block;"
                                src="../footer_03.jpg" alt="line" width="160" /></a></td>
                    <td class="edmTable_td" style="padding: 0;"><a href="mailto:[email protected]"><img
                                id="edmTable_footer_contant" class="" style="vertical-align: 0px; display: block;"
                                src="../footer_04.jpg" alt="footer_content"
                                width="160" /></a></td>
                </tr>
            </tbody>
        </table>
    

    Problem:

    The images move up or down when cursor in the move up or down. But there will be no spaces when actually sending email.

    Expected Behavior

    I want the image not to move. I found if I remove either "display: block" or "<a href='...'>" can resolve this problem. But I can't do that.

    It's a bug? Or is there another option?

    TinyMCE:

    5

    Browser: Chrome:

    108.0.5359.124

    Did this work in previous versions of TinyMCE?

    Maybe work in jquery tinymce

    opened by zoeychen0905 0
  • TINY-9439: Color picker on toolbar is not updated when changing forecolor or backcolor from menu

    TINY-9439: Color picker on toolbar is not updated when changing forecolor or backcolor from menu

    Related Ticket: TINY-9439

    Description of Changes:

    • Color picker on toolbar is not updated when changing forecolor or backcolor from menu

    Pre-checks:

    • [x] Changelog entry added
    • [x] Tests have been added (if applicable)
    • [x] Branch prefixed with feature/, hotfix/ or spike/

    Review:

    • [x] Milestone set
    • [x] ~Docs ticket created (if applicable)~

    GitHub issues (if applicable):

    opened by hamza0867 0
  • Very high z-index when resizing editor

    Very high z-index when resizing editor

    What is the current behavior? Describe the bug

    When I resize the editor, it gets in front of some floating (absolutely positioned) elements.

    Please provide the steps to reproduce and if possible a minimal demo of the problem via fiddle.tiny.cloud or similar.

    Lets say you have an element with some z-index (for example 100) in front of the editor (in my case this element was my navbar). when i try to resize the editor, it gets a very high (2^31 − 1 to be precise) z-index value. And moves in front of the element.

    Minimal demo: https://codesandbox.io/p/github/enesag/tinymce-zindex/draft/nifty-cannon?file=%2Fsrc%2FApp.js

    Just try to resize the editor and pink div disappears

    What is the expected behavior?

    I dont expect z-index changes when i resize the editor pane. Resizing works fine but z-index change causes a bad experience in my opinion. I don't know why this z-index change was necessary but even if its necessary it might be more relevant lower value (like 10, 20, 100, 1000 etc.)

    Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE? TinyMCE: 6.3.1 Browser: Up-to-date (108.0.5359.125) Chrome OS: Windows 11 (22H2)

    I dont know if it works differently in previous versions.

    browser: chrome type: question 6.x 
    opened by enesag 1
Owner
Tiny
JavaScript library for WYSIWYG HTML editing
Tiny
Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

This project isn’t maintained anymore Please check out this fork. wysihtml5 0.3.0 wysihtml5 is an open source rich text editor based on HTML5 technolo

Christopher Blum 6.5k Jan 7, 2023
Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

This project isn’t maintained anymore Please check out this fork. wysihtml5 0.3.0 wysihtml5 is an open source rich text editor based on HTML5 technolo

Christopher Blum 6.5k Dec 30, 2022
A modern, simple and elegant WYSIWYG rich text editor.

jQuery-Notebook A simple, clean and elegant WYSIWYG rich text editor for web aplications Note: Check out the fully functional demo and examples here.

Raphael Cruzeiro 1.7k Dec 12, 2022
Simple rich text editor (contentEditable) for jQuery UI

Hallo - contentEditable for jQuery UI Hallo is a very simple in-place rich text editor for web pages. It uses jQuery UI and the HTML5 contentEditable

Henri Bergius 2.4k Dec 17, 2022
Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

If you would be interested in helping to maintain one of the most successful WYSIWYG text editors on github, let us know! (See issue #1503) MediumEdit

yabwe 15.7k Jan 4, 2023
Tiny bootstrap-compatible WISWYG rich text editor

bootstrap-wysiwyg Important information for Github requests/issues Please do not submit issues/comments to this repo. Instead, submit it to https://gi

MindMup 5.6k Jan 3, 2023
HTML5 rich text editor. Try the demo integration at

Squire Squire is an HTML5 rich text editor, which provides powerful cross-browser normalisation in a flexible lightweight package (only 16.5KB of JS a

Neil Jenkins 4.4k Dec 28, 2022
A rich text editor for everyday writing

Trix A Rich Text Editor for Everyday Writing Compose beautifully formatted text in your web application. Trix is a WYSIWYG editor for writing messages

Basecamp 17.3k Jan 3, 2023
Popline is an HTML5 Rich-Text-Editor Toolbar

popline Popline is a non-intrusive WYSIWYG editor that shows up only after selecting a piece of text on the page, inspired by popclip. Usage Load jQue

kenshin 1k Nov 4, 2022
A completely customizable framework for building rich text editors. (Currently in beta.)

A completely customizable framework for building rich text editors. Why? · Principles · Demo · Examples · Documentation · Contributing! Slate lets you

Ian Storm Taylor 26.2k Dec 30, 2022
Collection of tools for building rich text editors.

psst we have great documentation at https://bangle.dev What is bangle.dev ? bangle.dev is a collection of components for building powerful editing exp

null 553 Dec 29, 2022
Override the rich text editor in Strapi admin with ToastUI Editor.

strapi-plugin-wysiwyg-tui-editor ⚠️ This is a strapi v4 plugin which does not support any earlier version! A Strapi plugin to replace the default rich

Zhuo Chen 12 Dec 23, 2022
A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.

SimpleMDE - Markdown Editor A drop-in JavaScript textarea replacement for writing beautiful and understandable Markdown. The WYSIWYG-esque editor allo

Sparksuite 9.3k Jan 4, 2023
enjoy live editing (+markdown)

Pen Editor LIVE DEMO: http://sofish.github.io/pen Markdown is supported Build status: 0. source code You can clone the source code from github, or usi

小鱼 4.8k Dec 24, 2022
A React framework for building text editors.

Draft.js Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model. Extensible and Customizable: We provid

Facebook 22.3k Jan 4, 2023
🐉 Material Component Framework for Vue

Supporting Vuetify Vuetify is a MIT licensed project that is developed and maintained full-time by John Leider and Heather Leider; with support from t

vuetify 36.2k Jan 9, 2023
Lightweight UI components for Vue.js based on Bulma

Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design. Features Keep your current Bulma theme / va

Buefy 9.4k Jan 4, 2023
Typewriter is a simple, FOSS, Web-based text editor that aims to provide a simple and intuitive environment for you to write in.

Typewriter Typewriter is a simple, FOSS, Web-based text editor that aims to provide a simple and intuitive environment for you to write in. Features S

Isla 2 May 24, 2022