TinyMCE编辑器下载、安装、使用教程

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。

TinyMCE的优势：

开源可商用，基于LGPL2.1
插件丰富，自带插件基本涵盖日常所需功能
接口丰富，可扩展性强，有能力可以无限拓展功能
界面好看，符合现代审美
提供经典、内联、沉浸无干扰三种模式
对标准支持优秀（自v5开始）
多语言支持，官网可下载几十种语言

一、TinyMCE下载

官方下载：https://www.tiny.cloud/get-tiny/self-hosted/

github下载：https://github.com/tinymce/

Community为社区版，Dev Package为开发版。我建议大家用社区版。

二者的区别是开发版包含未被压缩过的源码，方便开发者学习分析，魔改部分功能。开发版中包含社区版。

二、TinyMCE本地化汉化

默认情况下，TinyMCE是英文，而且我们下载的TinyMCE软件包默认也是不带中文语言包的，因此我们要单独搞一下。

1、选择可用的语言包下载到本地。

官方下载地址：https://www.tiny.cloud/get-tiny/language-packages/

中文网站下载地址：http://tinymce.ax-z.cn/static/tiny/langs/zh_CN.js

2、将语言包解压，将js文件放入tinymce根目录下的langs文件夹中（如不存在就自己新建一个），最后路径形如：XXX/tinymce/langs/zh_CN.js

3、在TinyMCE实例配置参数中指定语言：

tinymce.init({
    selector: '#tinydemo',
    language:'zh_CN',//注意大小写
});

二、TinyMC安装

TinyMCE是一个功能强大且灵活的富文本编辑器，可以嵌入到任意Web应用中使用。

1、解压 tinymce_5.7.1.zip 并把解压后的文件夹放入你的网站根目录。

2、引入TinyMCE脚本

在<head>中插入如下这行代码，将tinymce.min.js源文件引入项目。

<script src="你的网站根目录/admin/tinymce/js/tinymce/tinymce.min.js"></script>

3、TinyMCE初始化

这里我测试用的是“经典版”模式，我的经典版几乎包含了所有的插件，除了“axupimgs”ajax多图上传需要自己去下载。

<textarea name="contents" id="editor" rows="10" cols="80"></textarea>

<script>
         var editor = tinymce.init({
             selector: '#editor',
             language:'zh_CN',
             height: 500,
             branding: false,
             plugins: "lists advlist anchor autosave code charmap codesample directionality emoticons hr image imagetools insertdatetime link table media pagebreak wordcount preview axupimgs nonbreaking print searchreplace toc", //依赖lists插件
             toolbar1: "formatselect fontselect fontsizeselect | bold italic underline strikethrough link hr removeformat | forecolor backcolor  | alignleft aligncenter alignright alignjustify |bullist numlist  outdent indent | blockquote codesample code",
             toolbar2:"preview print| subscript superscript anchor charmap emoticons nonbreaking pagebreak | image media axupimgs table | toc  searchreplace  insertdatetime | ltr rtl undo redo wordcount",
             autosave_prefix: "editor-autosave-{path}{query}-{id}-",
             autosave_restore_when_empty: true,
             images_upload_url: '/demo/upimg.php',
             imagetools_cors_hosts: ['mydomain.com', 'otherdomain.com'],
             imagetools_proxy: 'proxy.php',
             codesample_languages: [
                 {text: 'HTML/XML', value: 'markup'},
                 {text: 'JavaScript', value: 'javascript'},
                 {text: 'CSS', value: 'css'},
                 {text: 'PHP', value: 'php'},
                 {text: 'Ruby', value: 'ruby'},
                 {text: 'Python', value: 'python'},
                 {text: 'Java', value: 'java'},
                 {text: 'C', value: 'c'},
                 {text: 'C#', value: 'csharp'},
                 {text: 'C++', value: 'cpp'}
             ],
             fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
             font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
             default_link_target: "_blank",
             link_assume_external_targets:true,
             menubar:false
         });
</script>

最终效果：

三、TinyMCE 使用

由于TinyMCE的配置以及其它使用方法非常的多，我就只说一些大家最常用的，具体请看手册：

官方文档（英文）：https://www.tiny.cloud/docs/

其它文档（中文）：http://tinymce.ax-z.cn/

下面是我在用TinyMCE编辑器中，最常用的几个东西：

获取内容
tinyMCE.editors['tinydemo'].getContent();

获取格式化后的内容
tinyMCE.editors['tinydemo'].getContent({ format: 'text' });

同步内容到textarea
tinyMCE.editors['tinydemo'].save();

设置内容
tinyMCE.editors['tinydemo'].setContent('付杰博客www.fujieace.com');

注意：

一定要先同步内容到textarea，再获取编辑器里的内容，否则，你获取到的内容会是空的。