Редактор tinymce для html

Quick start

TinyMCE 6 is a powerful and flexible rich text editor that can be embedded in web applications. This quick start covers how to add a TinyMCE editor to a web page using the Tiny Cloud.

Include the TinyMCE script

Initialize TinyMCE as part of a web form

Initialize TinyMCE 6 on any element (or elements) on the web page by passing an object containing a selector value to tinymce.init() . The selector value can be any valid CSS selector.

For example: To replace with a TinyMCE 6 editor instance, pass the selector ‘#mytextarea’ to tinymce.init() .

        
TinyMCE Quick Start Guide
 
Hello, World! 
  

Adding this content to an HTML file and opening it in a web browser will load a TinyMCE editor, such as:

Add your API key

This domain is not registered with Tiny Cloud. Please see the quick start guide or create an account.

Signing up for a Tiny Cloud API key will also provide a trial of the Premium Plugins.

Save the content from the editor

To retrieve content from the editor, either process the content with a form handler or use the getContent API.

If you use a form handler, once the is submitted, TinyMCE 6 will POST the content in the same way as a normal HTML , including the HTML elements and inline CSS of the editor content. The host’s form handler can process the submitted content in the same way as content from a regular .

Источник

Trusted WYSIWYG editor

Use TinyMCE via its 400+ APIs or as an out-of-the-box
enterprise-grade editor, in your next generation web app.

From startups to Fortune 500’s, the world’s best product teams use TinyMCE as their WYSIWYG editor of choice.

LAUNCH YOUR EDITING EXPERIENCE IN UNDER 5 MINUTES

Last week TinyMCE was downloaded times

What are you building?

WYSIWYG editor with 12+ integrations and 400+ flexible APIs

Easily integrates into your tech stack. Enhances your
editing experience. First-party integrations that make
development easier.

Angular Blazor Bootstrap JavaScript jQuery Laravel Node.js + Express Rails React Svelte Vue Web Components

1h1>TinyMCE Angular Demo/h1> 2 editor 3 [init]=" 4 height: 500, 5 plugins: [ 6 'a11ychecker','advlist','advcode','advtable','autolink','checklist','export', 7 'lists','link','image','charmap','preview','anchor','searchreplace','visualblocks', 8 'powerpaste','fullscreen','formatpainter','insertdatetime','media','table','help','wordcount' 9 ], 10 toolbar: 11 'undo redo | casechange blocks | bold italic backcolor | \ 12 alignleft aligncenter alignright alignjustify | \ 13 bullist numlist checklist outdent indent | removeformat | a11ycheck code table help' 14 >" 15 initialValue="Welcome to TinyMCE Angular" 16 >/editor> 17 18 19 20 21 

Rich text editor that wows your users with just a few lines of code

Open source core

All the functionality your users expect in our open source core, easily configured with options that just make sense.

Productivity features

Help your users create content, faster. Includes clean copy and paste from Word, Google Docs, Excel, and more.

Compliance

For when legal and brand can’t take a backseat. Accessibility Checker, Link Checker and Spell Checker Pro with custom dictionaries.

Collaboration

Comments and Mentions can take your editing experience to the next level.

Media management

Seamlessly manage your files or images and distribute them on the cloud or on your own servers with Tiny Drive.

Help when and where you need it

400+ APIs, regularly updated docs, a growing library of examples, a huge StackOverflow community, and optional support, so you can get up and running — fast.

The developer-first framework for every team’s editing projects

TinyMCE’s enterprise-grade APIs, best-of-class engineering team and
comprehensive support adds velocity to every engineering team

Bring products to market quicker by stitching together reusable APIs and slashing your development time.

Mold TinyMCE into a solution that perfectly fits your needs, saving up to six months’ time, per new feature.

Reduce content creation time by up to 90%, saving thousands of hours annually in your team’s workflows.

Trusted by developers

This is what top-notch leadership and support look like!

Thank you @andrew_roberts @_spyder and the @joinTiny team for the help with setting up a self-hosted Tinymce version for Next.js 😊

Looking at wysiwyg editors and @tinymce seems to have come a long way from the last time I used it, really slick onboarding! 👌 Looks great!

I’m beginning to love @tinymce more and more. Been exploring its features since morning.

Just like that. @joinTiny is upgraded to v6 in my current project. Smooth process, although the toolbar spacing needed seriously re-grouping to keep everything on one line, and had to drop a few buttons for space reasons. It fits so well with the rest of the app’s UI.

There’s quite a few different ones out there, but I’ve always found TinyMCE to be nice to work with. It’s pretty simple to get up and running and you can extend it quite a lot to add new functionality. Do you think this’d work for your project? 😄

Thanks! I tried many other tools — all open-source and came to the conclusion that many people may disagree with.

I decided to go with TinyMCE not because it’s open-source but because they have a commercial license what may mean they will fix bugs and add great features faster.

We tried many other #tools and we finally decided to go with @tinymce, simply because you’re the best.

✨ I found out ~50% of my support tickets on remoteok.com were about Markdown issues:

— non-tech people don’t understand it
— format is inconsistent
— buggy if complex like * a list with **bold text**

So I now switched to TinyMCE which is HTML: tiny.cloud

There are a lot of #WYSIWYG editors available on the internet, some are paid and some are free. After exploring and experimenting with various editors I found tinymce, one of the best WYSIWYG editors.

WYSIWYG HTML editor that powers enterprises, developers and product teams

Wherever TinyMCE is deployed, developers have the power to make
greater changes, with less work

Launch your product faster

Win against the best in your category

Increase satisfaction & adoption

Keep pace with changing requirements

Avoid fixing bugs in unmaintained libraries

Get expert support when you need it

Ship high-impact features that reach a large number of users

Deliver with confidence by trusting the category leader

Preserve precious engineering time

Источник

Get TinyMCE’s free
WYSIWYG HTML editor

Get a Free API key to use TinyMCE from the Cloud or Download the SDK for use in your Self-Hosted application

Thanks for downloading!

Register your email to keep up to date with the latest releases and bug fixes.

Cloud user?
Start creating
now with TinyMCE

Use the snippets to see our editor in action. When you’re ready, access our forever free open source rich text editor with a FREE TinyMCE API key, and test our premium features in a 14-day trial.

* Tiny Cloud uptime guarantee only applies
to premium subscription and enterprise customers

1
 
2
 
3
 
4
 
 src=" https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js " referrerpolicy="origin">
5
 
 tinymce.init('textarea'>) ; 
6
 
7
 
8
 
 Next, use our Get Started docs to setup Tiny! 
9
 
10
 

Self-hosted user?
Use our minified
production-ready version

All the Self-Hosted releases of our forever free open source rich text editor can be immediately downloaded and hosted either locally or virtually.

TinyMCE Open Source Community

Freely download everything you need for production usage (Including access to 12 different Integrations to frameworks like React, Vue, Swing). TinyMCE is open source and licensed under MIT.

Language Packs

TinyMCE is translated into 80 different languages. Choose your specific language, to start using TinyMCE straight away.

TinyMCE Dev Package

This package contains TinyMCE Open Source Community, development tools and full source code. TinyMCE is open source and licensed under MIT.

Looking for older versions? You can find them here

Use a package manager
for TinyMCE downloads

Get TinyMCE into production faster with npm, Yarn, Composer, and NuGet.

npm

Simply copy/paste this command in your terminal

Yarn

Simply copy/paste this command in your terminal

$ yarn add @tinymce/tinymce-react

Composer

NuGet

Download optional extras
to use with TinyMCE

Customize the available skins, work on our latest unstable build, or access a skin creator tool.

Skin Creator

Customize the available skins, or create a new one with our Skin Creator tool.

Nightly Build

Latest unstable build of TinyMCE, so the fearless can have a play.

Easy integration with 12+ frameworks & hundreds of other tools

The TinyMCE code is totally customizable, so you’re empowered with the tools and know-how to create the building blocks of remarkable content experiences.

Источник

Quick start

Get an instance of TinyMCE 5 up and running using the Tiny Cloud.

TinyMCE 5 is a powerful and flexible rich text editor that can be embedded in web applications. This quick start covers how to add a TinyMCE editor to a web page using the Tiny Cloud.

Step 1: Include the TinyMCE script

Include the following line of code in the of a HTML page.

 src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"> 

Step 2: Initialize TinyMCE as part of a web form

Initialize TinyMCE 5 on any element (or elements) on the web page by passing an object containing a selector value to tinymce.init() . The selector value can be any valid CSS selector.

For example: To replace with a TinyMCE 5 editor instance, pass the selector ‘#mytextarea’ to tinymce.init() .

  lang="en">  charset="utf-8">  name="viewport" content="width=device-width, initial-scale=1">  src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"> tinymce.init( selector: '#mytextarea' >);    TinyMCE Quick Start Guide  method="post">  id="mytextarea">Hello, World!    

Adding this content to a HTML file and opening it in a web browser will load a TinyMCE editor, such as:

 tinymce.init( selector: 'textarea#default' >); 

Step 3: Add your API key

This domain is not registered with Tiny Cloud. Please see the quick start guide or create an account.

Signing up for a Tiny Cloud API key will also provide a trial of the Premium Plugins.

Step 4: Save the content with a form POST

Process the content with a form handler.

When the is submitted, TinyMCE 5 will POST the content in the same way as a normal HTML , including the HTML elements and inline CSS of the editor content. The host’s form handler can process the submitted content in the same way as content from a regular .

Next Steps

Well, that’s awkward . Would you mind opening an issue or helping us out?

Can’t find what you’re looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.

Источник