是时候掌握一个富文本编辑器了——TinyMCE（1）

    百度ueditor以前一直用，转到node后，发现ueditor不支持node环境。倒是有个react-ueditor的组件可以帮助ueditor应用到react中，但是……

      所以，是时候掌握一个富文本编辑器了。惯例先把官方的文档过一遍。摘一些重要的翻译整理，以备后续参考。

      很长，慢慢来……

从云开始

       使用tinyMCE最好的方式是使用云部署的方式。你需要通过注册的方式，得到一个apiKey，并使用到你的项目中。

       所有的云服务账户都包含一个免费、预置的云图片代理服务，这个服务可以帮助你使用图片上传功能。

       tinyMCE支持多语言，你可以在这里下载你需要的语言包：https://www.tinymce.com/download/language-packages/      

       这里是一个tinyMCE的历史版本列表，当你需要老版本的tinyMCE时，你可以需要用到它：https://cloud.tinymce.com/versions/tiny

       tinyMCE还提供三个额外的标识，dev、testing、stable来标识三个版本。一般，不需要指定特定的版本，直接选用stable即可。因为它是最稳定的。

       你可以在这个地址，找到tinyMCE相关的更新日志：https://www.tinymce.com/docs/changelog/。有时候，它可以给你一些指引。

从本地开始

第一个应用

       如果你不喜欢从云开始，也可以选择把tinyMCE的相关资源下载到你自己的服务器上。鉴于tinyMCE服务器的访问速度较慢，一般有必要这样做。

       你可以在这里找到压缩后的tinyMCE：

       引入这个js后，你可以利用你页面上的某个或某几个元素来初始化tinyMCE。

       tinyMCE.init({

              selector:‘#tinyMCE’              //页面元素选择器

       })

最基础的应用

       一个最简单的tinyMCE，你需要关注以下几个基本的配置。

       selector   元素选择。这个配置声明要使用页面的哪个或哪些元素来初始化tinyMCE。允许你使用CSS选择器语法对其进行配置。如以id或class或类型等。

       plugins    tinyMCE在基础功能之上，还有一系列的插件可以帮助你实现一些更强大或特殊的功能。这个配置可以让你自由的添加你需要的插件。

       toolbar    工具类的配置。先认识一下tinyMCE的几个主要的区域。

       你可以对toolbar进行独特的配置，甚至自定义按钮。

       比如，toolbar: false可以使工具类完全消失。

       通过| 线可以把toolbar中的按钮分组，通过 ，号可以分行，如：

toolbar: [

           'undo redo | styleselect | bold italic |link image',

           'alignleft aligncenter alignright'

      ]

       menu和menubar          菜单栏的配置。其它的富文本编辑器很少有菜单栏这种功能。除却一些特殊的应用，菜单栏在网页中的也是有些臃肿的。所以，你可以直接使用menubar: false来使菜单栏隐藏。

       你可以通过menubar定义菜单栏中的内容，如：

       menubar:'file edit view'

       如果你需要定制菜单edit中的内容，可以使用menu，如：

       menu:{

           view: {title: 'Edit', items: 'cut, copy,paste'}

      }

       在使用menu配置时，title并不是限制的，你开心，可以随便玩。

       menu:{

           view: {title: 你敢点我试试！, items: 'cut, copy, paste'}

      }

       利用这些配置，你已经可以在应用里构建一个tinyMCE了。你可以在这里了解更多的配置：https://www.tinymce.com/docs/configure/。或者在这里了解更多可用的插件：https://www.tinymce.com/docs/plugins/。当然，后续我们也会提到这些内容。

内联编辑

       tinyMCE有两种模式，经典模式和内联模式。经典模式又称为表单模式。我们之前提到的inline配置，就与此有关。

       表单模式下，tinyMCE将替换掉selector指定的元素，内联模式下，tinyMCE将成为指定元素的内容。当你希望通过tinyMCE编辑页面时，想要达到所见即所得的效果，那么，你应该了解一下内联模式。

       表单模式下，编辑器永远是表单的一部分，属于表单的一个域。而内联模式下，编辑器的内容将成为页面的一部分。你可以很容易的预览到你创建的页面的效果。编辑器内容形成的页面元素，也会继承其父元素的CSS特性等。

       你可以通过将inline设置为true来启用内联模式，另外，内联模式下的tinyMCE，应该初始化到某个div或者其它适合的非表单元素中。

       在内联模式下，你可能更想要在一个页面中使用多个tinyMCE。它们可以共用一套配置，也可以独立的配置。使用上来说，也很简单。某个配置能够把哪些元素初始化为tinyMCE，完全取决于元素选择器，即selector的配置。

高级使用方式

       你可能还想要通过一些更高级的方式来使用tinyMCE。

       比如npm:       npm install tinymce

              bower:     bowerinstall tinymce 或者

bower install tinymce-src=git://github.com/tinymce/tinymce

              composer:       php composer.phar require"tinymce/tinymce" ">= 4"

              nuget:     Install-PackageTinyMCE

              sdk:         你可以在这里下载：https://www.tinymce.com/download/

              jQuery:    如果你希望得到一个jQuery插件形式的tinyMCE，你可以在这里定制：https://www.tinymce.com/download/custom-builds/。你可以根据你的意愿，定制你需要的功能。这样，你可以得到一个尽可能小的适用的tinyMCE。

插件

       tinyMCE有很多插件可以使用，比如代码编辑模式、高亮模式，图片上传等等。插件拓展或新增了tinyMCE的功能。或者，你也可以自定义一些插件。

       关于插件的内容过多，不进行翻译，后续一些插件也以挂出官网的链接形式展示。

自主义UI

主题和皮肤 

       你可以定制主题和皮肤，通过threm和spin来配置它们。

尺寸

       这些配置帮助你定制尺寸，width、height、min_width、max_width、min_height、max_height。

       你可能还需要自适应尺寸（https://www.tinymce.com/docs/plugins/autoresize/）的插件来帮助你使尺寸更智能。或者，你可以使用resize配置。

样式

       content_css     可用帮助你定制主体区域的样式。

       statusbar         设为false可以隐藏状态栏。

源码模式

       https://www.tinymce.com/docs/get-started/customize-ui/。页尾。

上传图片

       https://www.tinymce.com/docs/get-started/upload-images/

拼写检查

       https://www.tinymce.com/docs/get-started/spell-checking/

内容过滤

       https://www.tinymce.com/docs/get-started/filter-content/

兼容性

移动端：

OS	Browser	Device
Android 8	Chrome	Mobile phone
Android 7	Chrome	Mobile phone
Android 6	Chrome	Mobile phone
iOS11	Safari	iPhone/iPad
iOS10	Safari	iPhone/iPad

       PC端：

Browser	Windows	Mac	GNU/Linux
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Edge	YES	N/A	N/A
IE 11	YES	N/A	N/A
IE 10	NO	N/A	N/A
IE 9	NO	N/A	N/A
IE 8	NO	N/A	N/A
Safari	N/A	YES	N/A