I submit the upload form then get the image name and insert <img> tag into the textarea.
but there is a little problem,the inserted image tage was in the textarea and I promise its src attribute is right.but I can't saw the picture.
the piece of code can work right,if I save the textarea,and back to the editor page,I can saw the image just uploaded in the textarea.
it seems something wrong with the wymeditor's refreshing?
there is my code.
- Code: Select all
Query('textarea').wymeditor({
stylesheet: '/media/css/wymeditor.styles.css',
lang : 'zh_cn',
dialogImageHtml: "<body class='wym_dialog wym_dialog_wrap'"
+ " onload='WYMeditor.INIT_DIALOG(0)'"
+ ">"
+ "<form id='upload_form' enctype='multipart/form-data' method='post'>{% csrf_token %}"
+ "<fieldset class='wymeditor_fieldset'>"
+ "<legend>{UploadImage}</legend>"
+ "<div class='row'>"
+ "<label>{Title}</label>"
+ "<input class='upload_title' type='text' name='title'/>"
+ "</div>"
+ "<div class='row'>"
+ "<label>{Image}</label>"
+ "<input class='upload_image' type='file' name='image'/>"
+ "</div>"
+ "<div class='row row-indent'>"
+ "<input class='upload_submit' type='submit' value='submit'/>"
+ "</div>"
+ "</fieldset>"
+ "</form>"
+ "<form action= '/admin/upload/picture/add/' method='post'>{% csrf_token %}"
+ "<fieldset class='wymeditor_fieldset'>"
+ "<legend>{OutsideImage}</legend>"
+ "<div class='row'>"
+ "<label>{Title}</label>"
+ "<input class='outside_title' type='text' name='title'/>"
+ "</div>"
+ "<div class='row'>"
+ "<label>{URL}</label>"
+ "<input class='outside_image' type='text' name='outside_image'/>"
+ "</div>"
+ "<div class='row row-indent'>"
+ "<input class='outside_submit' type='button' value='submit'/>"
+ "</div>"
+ "</fieldset>"
+ "</form>"
+ "</body>",
postInit: function(wym) {
jQuery(wym._box).find(wym._options.containersSelector)
.removeClass('wym_dropdown')
.addClass('wym_panel')
.find('h2 > span')
.remove();
jQuery(wym._box).find(wym._options.iframeSelector)
.css('height', '250px');
},
postInitDialog: function( wym, wdw ) {
var body = wdw.document.body;
var date = new Date();
var uploadImagePath = 'http://{{domain}}'
+ '/media/photos/site_image/'
+ date.getFullYear() + '/'
+ (date.getMonth() + 1) + '/'
+ date.getDate() + '/';
var options = {
url: '/admin/upload/picture/add/',
};
jQuery(body).find('#upload_form').submit(function() {
$(this).ajaxSubmit(options);
var title = jQuery(body).find('.upload_title').val();
var image = jQuery(body).find('.upload_image').val();
wym.insert('<p><img title=' + title + ' src="' + uploadImagePath + image + '" /></p>');
wdw.close();
});
jQuery( body )
.find('input.outside_submit')
.click(function() {
var title = jQuery(body).find('.outside_title').val();
var image = jQuery(body).find('.outside_image').val();
wym.insert('<p><img title=' + title + ' src="' + image + '" \/><\/p>');
wdw.close();
});
}
});
thanks for all your answers!