TinyMCE 官网 (类似:百度的富文本web编辑器UEditor)
第一步
下载 TinyMCE,解压后放入工程,在需要的HTML页面引入tinymce.min.js。
第二步
下载tinyMCE image upload 插件 tinymce-imageupload,解压后把该文件夹放在 tinymcejs inymceplugins目录下。
该插件使用了jquery.iframe-post-form.js ,在试用的时候没有成功,遂换成 jquery.form.js 对插件进行改造。
第三步
下载jquery.form.js,在HTML页面引入jquery和该插件。
jquery.form.js 提供了基础的文件上传表单,可以用此插件上传本地图片到服务器。然后得到图片对应的URL。
第四步:
在HTML页面,初始化tinyMCE:
1 tinymce.init({
2 selector: '#myTextArea',
3 theme: 'modern',
4 menubar: false,
5 750,
6 height: 250,
7 autoresize_min_height: 350,
8 imageupload_url: 'serverAddress/file/fileUpload',
9 plugins: [
10 "advlist autolink print preview imageupload"
11 ],
12 toolbar: "insertfile undo redo | bold | print preview | imageupload",
13 convert_urls: false,
14 // init_instance_callback: setTinyContent
15 });
文件上传后的处理(tinymcepluginsimageuploadplugin.min.js)
根据服务器的返回对应修改。大致流程:把服务器返回的路径置入<img>标签中,插入到tinyMCE编辑器中,然后即可看到上传的图片。
1 $('#uploadImageForm').ajaxSubmit({
2 dataType: 'json',
3 success: function(response){
4 if (response.url) {
5 var tpl = '<img src="%s" width="220" data-key="%k"/>';
6 var tplV = tpl.replace('%s', response.url);
7 tplV = tplV.replace('%k', response.key);
8 ed.insertContent(tplV);
9 ed.focus();
10 removeForeground();
11 removeBackground();
12 } else {
13 showImageUploadError('上传失败,请重试!');
14 }
15 },
16 error: function(){
17 showImageUploadError('上传失败,请重试!');
18 }
19 });
改造后的插件 git地址
注意点:
点击上传图标后,弹出的上传图片窗口,由于tinyMCE内置CSS的问题导致弹窗缩放0.1倍,问题CSS: .mce-window {transform:scale(.1)} (come from skin.min.css)
在使用的时候重写覆盖掉就可以了:
.mce-window { transform: initial !important; }