富文本编辑器TinyMCE
有点懒，不整理了
以下转载
---------------------
从云开始
使用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：
<scriptsrc='https://cloud.tinymce.com/stable/tinymce.min.js'></script>
引入这个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/
---------------------
作者：lanming0326
来源：CSDN
原文：https://blog.csdn.net/lanming0326/article/details/80860158
版权声明：本文为博主原创文章，转载请附上博文链接！
