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

示例:(https://aiddroid.com/demo/tinymce)

tinymce-demo

tinymce-demo

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

Post Navigation