我正在制作一个网络应用，用户可以像medium.com一样发布自己的文章。我的应用程序是有角度的，我已经与firebase连接。现在，我希望用户应该能够在帖子中添加图片。我已经在我的应用程序中实现了中编辑器，但我无法实现其需要jquery的insert-image plugin。 我是angularjs的新手，无法找到解决方案。
答案 0 :(得分：0)
我终于做到了，解决方案就在这里 -
var editor = new MediumEditor('.editable', {
toolbar: {
/* These are the default options for the toolbar,
if nothing is passed this is what is used */
allowMultiParagraphSelection: true,
buttons: ['bold', 'italic', 'underline', 'anchor', 'strikethrough', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'quote', 'subscript', 'superscript', 'orderedlist', 'unorderedlist', 'indent', 'outdent', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'image'],
diffLeft: 0,
diffTop: -10,
firstButtonClass: 'medium-editor-button-first',
lastButtonClass: 'medium-editor-button-last',
relativeContainer: null,
standardizeSelectionStart: false,
static: false,
/* options which only apply when static is true */
align: 'center',
sticky: false,
updateOnEmptySelection: false
},
anchor: {
/* These are the default options for anchor form,
if nothing is passed this is what it used */
customClassOption: null,
customClassOptionText: 'Button',
linkValidation: true,
placeholderText: 'Paste or type a link',
targetCheckbox: false,
targetCheckboxText: 'Open in new window'
},
anchorPreview: {
/* These are the default options for anchor preview,
if nothing is passed this is what it used */
hideDelay: 500,
previewValueSelector: 'a',
color: "black"
},
autoLink: true,
});
$(function() {
$('.editable').mediumInsert({
editor: editor,
addons: { // (object) Addons configuration
images: { // (object) Image addon configuration
label: '<span class="fa fa-camera"></span>', // (string) A label for an image addon
uploadScript: null, // DEPRECATED: Use fileUploadOptions instead
deleteScript: 'delete.php', // (string) A relative path to a delete script
deleteMethod: 'POST',
fileDeleteOptions: {}, // (object) extra parameters send on the delete ajax request, see http://api.jquery.com/jquery.ajax/
preview: true, // (boolean) Show an image before it is uploaded (only in browsers that support this feature)
captions: true, // (boolean) Enable captions
captionPlaceholder: 'Type caption for image (optional)', // (string) Caption placeholder
autoGrid: 3, // (integer) Min number of images that automatically form a grid
formData: {}, // DEPRECATED: Use fileUploadOptions instead
fileUploadOptions: { // (object) File upload configuration. See https://github.com/blueimp/jQuery-File-Upload/wiki/Options
url: 'upload.php', // (string) A relative path to an upload script
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i // (regexp) Regexp of accepted file types
},
styles: { // (object) Available image styles configuration
wide: { // (object) Image style configuration. Key is used as a class name added to an image, when the style is selected (.medium-insert-images-wide)
label: '<span class="fa fa-align-justify"></span>', // (string) A label for a style
added: function($el) {}, // (function) Callback function called after the style was selected. A parameter $el is a current active paragraph (.medium-insert-active)
removed: function($el) {} // (function) Callback function called after a different style was selected and this one was removed. A parameter $el is a current active paragraph (.medium-insert-active)
},
left: {
label: '<span class="fa fa-align-left"></span>'
},
right: {
label: '<span class="fa fa-align-right"></span>'
},
grid: {
label: '<span class="fa fa-th"></span>'
}
},
actions: { // (object) Actions for an optional second toolbar
remove: { // (object) Remove action configuration
label: '<span class="fa fa-times"></span>', // (string) Label for an action
clicked: function($el) { // (function) Callback function called when an action is selected
var $event = $.Event('keydown');
$event.which = 8;
$(document).trigger($event);
}
}
},
messages: {
acceptFileTypesError: 'This file is not in a supported format: ',
maxFileSizeError: 'This file is too big: '
},
uploadCompleted: function($el, data) {}, // (function) Callback function called when upload is completed
uploadFailed: function(uploadErrors, data) {
alert('There is a problem in uploading the image');
console.log(uploadErrors);
console.log(data);
} // (function) Callback function called when upload failed
}
}
});
});
这是控制器代码。
<textarea class="editable" ng-model="full"></textarea>
这是HTML。
答案 1 :(得分：0)
默认情况下，MediumEditor支持将图像直接拖放到编辑器中。我不确定这是否是您正在寻找的功能，但它应该允许用户至少以这种方式拖动图像。