TinyMCE编辑器使用

一、引入TinyMCE

（1）、下载tinyMCE资源包文件 : http://download.tiny.cloud/tinymce/community/tinymce_5.10.0.zip 放入项目(测试发现最新5.11.版本展示有点问题，建议下载10)

（2）、下载中文包文件：http://tinymce.ax-z.cn/static/tiny/langs/zh_CN.js 放入资源包的langs中

（3）、页面引入

<#--引入tinymce    -->
	<script type="text/javascript" src="${base}/js/tinymce/tinymce.min.js"></script>

二、使用

1、初始化

// html中 创建一个textarea
<textarea id="content" style="width:100%;" class="ued-textarea"></textarea>

//js中
//tinyMce初始化
        var editor = tinymce.init({
            selector: '#content',
            language:'zh_CN',
            plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize ',
            toolbar: 'code undo redo restoredraft | cut copy paste pastetext |formatselect fontselect fontsizeselect | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
     bullist numlist | blockquote subscript superscript removeformat | \
    image charmap emoticons hr pagebreak insertdatetime preview | fullscreen | lineheight',
            height: 450, //编辑器高度
            min_height: 300,
            /*content_css: [ //可设置编辑区内容展示的css，谨慎使用
                '/static/reset.css',
                '/static/ax.css',
                '/static/css.css',
            ],*/
            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;',
            importcss_append: true,
            //tinyMce自定义图片上传
            images_upload_handler: function(blobInfo, success, failure) {
                var form = new FormData();
                form.append('files', blobInfo.blob(), blobInfo.filename());
                $.ajax({
                    url: url,
                    type: "post",
                    data: form,
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        success(data.location);
                    },
                    error: function(e) {
                        alert("图片上传失败");
                    }
                });
            },
            file_picker_callback: function(callback, value, meta) {
                var input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.onchange = function() {
                    var file = this.files[0];
                    var form = new FormData();
                    form.append("files", file);
                    $.ajax({
                        url: url,
                        type: "post",
                        data: form,
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            callback(data.location);
                        },
                        error: function(e) {
                            alert("图片上传失败");
                        }
                    });
                };
                input.click();
            },
            autosave_ask_before_unload: false,
        });
    }

给编辑器赋内容方式：tinyMCE.activeEditor.setContent(‘内容’)

获取编辑器内容：tinyMCE.activeEditor.getContent()

参考tinyMCE中文文档： http://tinymce.ax-z.cn/