[JavaScript知识库]tinymce 富文本编辑器

参考文档

1.添加 tinymce 以及 需要绑定的元素

<!--版本5.10.0-->
<script type="text/javascript" src="/assets/admin/tinymce/tinymce.min.js"></script>
<textarea id="my_tinymce" name="content"></textarea>

2.初始化js

function example_image_upload_handler (blobInfo, success, failure, progress) {
    var formData=new FormData();
    var file = blobInfo.blob();
    formData.append('file', file, file.name );
    $.ajax({
        url: "uploadCutTitleImg.do",
        type: "post",
        data: formData,
        processData: false,
        contentType: false,
        dataType:'json',
        success: function(data) {
            success(data.msg);
        },
        error: function(e) {
            alert("图片上传失败");
        }
    });
};
function example_file_picker_callback(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("file", file);
        $.ajax({
            url: "uploadCutTitleImg.do",
            type: "post",
            data: form,
            processData: false,
            contentType: false,
            success: function(data) {
                callback(data.msg);
            },
            error: function(e) {
                alert("图片上传失败");
            }
        });
    };
    input.click();
}
$(function() {
tinymce.init({
    selector: '#my_tinymce',
    body_class: 'TinyMCE_class',
    language:'zh_CN',
    //插件列表：indent2em（首行缩进，这个插件需要去上面的链接下载） 
    plugins : 'lists advlist autolink autoresize link image image preview autosave charmap emoticons fullpage code ' +
        'codesample fullscreen hr insertdatetime pagebreak print quickbars searchreplace table toc wordcount indent2em help',
    //工具栏
    toolbar:['undo redo | fontsizeselect | styleselect | forecolor backcolor | code removeformat charmap insertdatetime emoticons| image preview',
        'numlist bullist | bold italic superscript subscript  | alignleft aligncenter alignright alignjustify | outdent indent indent2em'],
    fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px',//fontsize选择范围
    max_height: 900,
    min_height:300,
    branding: false,//隐藏右下角技术支持
    pagebreak_split_block: true,//插入分页符时拆分块元素
    quickbars_insert_toolbar: false,//快速插入 触发提供的工具栏
    quickbars_selection_toolbar: 'bold | h1 h2 h3',//快速选择 触发提供的工具栏
    images_upload_handler: example_image_upload_handler,//拖动图片上传方法
    file_picker_callback: example_file_picker_callback,//选择图片上传方法
    //添加样式
    content_style:'@font-face {font-family: \'dbkFont\';src: url(\'${base}/assets/admin/fonts/dbk.ttf\');}.TinyMCE_class {font-family:\'dbkFont\'}',
});
});

3.获取编辑器中的内容

var content=tinyMCE.activeEditor.getContent();