TinyMCE是一款强大的在线所见即所得富文本编辑器,支持目前流行的各种浏览器(移动浏览器也很友好)。功能配置灵活简单。
示例:(https://xkelai.com/demo/tinymce)

JS代码:
//初始化配置 tinymce.init({ selector:'textarea', language: 'zh_CN', height: 400, plugins: [ "lists link image preview anchor hr", "searchreplace visualblocks fullscreen", "media table" ], menubar: false, toolbar: "undo redo | styleselect | bold italic blockquote hr | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image preview | fullscreen", style_formats: [ {title: "Header 1", format: "h1"}, {title: "Header 2", format: "h2"}, {title: "Header 3", format: "h3"}, {title: "Header 4", format: "h4"} ], paste_as_text: true, table_advtab: false, table_default_styles: { width: 400, height: 250 }, image_dimensions: false, images_upload_credentials: true, file_browser_callback_types: "image", file_browser_callback: function(fieldId, url, type, win) { if(type=='image') $('#uploadform .file').click(); $('#uploadform .file').on('change',function(){ $('#uploadform .fieldId').val(fieldId); $('#uploadform .callback').val('uploadSuccess'); $('#uploadform').submit(); }) }, content_css: [ '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css' ] }); function uploadSuccess(fieldId, fileInfo){ $('#'+fieldId).val(fileInfo.url); $('#'+fieldId).parent().parent().parent().next('div').find('.mce-textbox').val(fileInfo.filename); //var dimensionInputs = $('#'+fieldId).parent().parent().parent().next('div').next('div').find('.mce-textbox'); //$(dimensionInputs[0]).val(fileInfo.width); //$(dimensionInputs[1]).val(fileInfo.height); $('#uploadform .file').val(''); }
上传接口PHP返回的js:
var fileInfo = {"url":"http:\/\/www.tinymce.com\/images\/glyph-tinymce@2x.png","filename":"A Tinymce logo","width":220,"height":194}; parent.uploadSuccess('mceu_36-inp', fileInfo);
移步这里了解另一款非常不错的编辑器redactor