几天前，我需要一个HTML编辑器，找到了Contenttools。真的很棒的库，但我在添加我需要的功能时遇到了一些问题。
我试图使图像可编辑，但它无法移除/调整大小（并且始终具有固定大小！）。我试图制作它，这样你就可以点击打开ImageDialog的图像，在那里你可以清除当前图像并插入一个新图像（替换src-attribute）。我做了一些编码，它看起来很有效，但我在撤消/重做和停止编辑时遇到了一些问题。
问题1 当我替换图像时，然后按撤消并在重做之后。一切都在浏览器中按预期工作，但是当我点击保存时，没有Ajax调用。看起来Contenttools在撤消/重做后没有看到图像被更改。
问题2 当我取消Contenttools编辑器时，图像作为Contenttools生成的DIV保留在屏幕上。我还没有恢复到正常的图片标记，所以它始终保持可编辑状态。
我在下面添加了我的代码的简化版本。我希望有人能引导我朝着正确的方向前进。我觉得它必须是一个小问题，而不是做方法调用或其他什么。
<html>
<head>
<link rel="stylesheet" href="content-tools.min.css">
</head>
<body>
<img src="img/old.jpeg" data-fixture class="width480 height380 fixture-image">
<script src="jquery-2.2.0.min.js"></script>
<script src="content-tools.min.js"></script>
<script src="script.js"></script>
</body>
</html>
的script.js
var editor;
/* Overwrite revertToSnapshot method */
var editorApp = ContentTools.EditorApp.getCls();
editorApp.prototype.revertToSnapshot = function (snapshot, restoreEditable) {
if(!restoreEditable) restoreEditable = true;
for(name in this._regions) {
var region = this._regions[name];
if($(this._regions[name]._domElement).hasClass('fixture-image')) {
var image = $($.parseHTML(snapshot.regions[name]));
region.children[0].unmount();
region.children[0].attr('src', image.attr('src'));
region.children[0].taint();
} else {
for(child in region.children) {
region.children[child].unmount();
}
region.domElement().innerHTML = snapshot.regions[name];
}
}
if(restoreEditable) {
if(ContentEdit.Root.get().focused()) {
ContentEdit.Root.get().focused().blur();
}
this._regions = {};
this.syncRegions();
this.history.replaceRegions(this._regions);
this.history.restoreSelection(snapshot);
this._inspector.updateTags();
}
};
/* Load the editor */
window.addEventListener('load', function() {
editor = ContentTools.EditorApp.get();
editor.init('*[data-editable], [data-fixture]', 'data-editable-id');
editor.addEventListener('saved', function (ev) {
var name, payload, regions, xhr;
// Check that something changed
regions = ev.detail().regions;
if (Object.keys(regions).length == 0) {
return;
}
// Set the editor as busy while we save our changes
this.busy(true);
// Collect the contents of each region into a FormData instance
payload = {};
for (name in regions) {
if (regions.hasOwnProperty(name)) {
payload[name] = regions[name];
}
}
console.log(payload);
});
new FixturedImageEditor();
});
/* Object for handling fixture images */
function FixturedImageEditor()
{
this.events();
}
FixturedImageEditor.prototype.events = function(){
var self = this;
$("body").on("click", ".ce-element--type-image.fixture-image", function() {
var $el = $(this),
image = ContentEdit.Root.get().focused();
var dimensions = {
width: 0,
height: 0
};
$.each($el.attr('class').split(" "), function(key, value){
if(value.indexOf("width") === 0) {
dimensions.width = value.replace("width", "");
} else if(value.indexOf("height") === 0) {
dimensions.height = value.replace("height", "");
}
});
self.fire($el, image, dimensions.width, dimensions.height);
});
}
FixturedImageEditor.prototype.fire = function($el, image, width, height){
var dialog = new ContentTools.ImageDialog(),
modal = new ContentTools.ModalUI(false, false);
dialog.fixedWidth = width;
dialog.fixedHeight = height;
this.addEventListeners(dialog, modal, $el, image);
editor.attach(modal);
editor.attach(dialog);
dialog.show();
modal.show();
dialog.populate(image._attributes.src, [dialog.fixedWidth, dialog.fixedHeight]);
$(dialog._domInsert).css('visibility', 'hidden');
$(dialog._domCrop).css('visibility', 'hidden');
$(dialog._domRotateCW).css('visibility', 'hidden');
$(dialog._domRotateCCW).css('visibility', 'hidden');
}
FixturedImageEditor.prototype.addEventListeners = function(dialog, modal, $el, image) {
var self = this;
dialog.addEventListener('cancel', function(){
modal.hide();
dialog.hide();
});
dialog.addEventListener('save', function(e){
self.save(e, dialog, modal, $el, image);
});
dialog.addEventListener('imageuploader.fileready', function(e){
$(dialog._domInsert).css('visibility', 'visible');
});
}
FixturedImageEditor.prototype.save = function(e, dialog, modal, $el, image) {
detail = e.detail();
imageURL = detail.imageURL;
imageSize = detail.imageSize;
imageAttrs = detail.imageAttrs;
image.attr('src', imageURL);
image.attr('alt', imageAttrs.alt);
image.mount();
image.taint();
modal.hide();
dialog.hide();
}
ContentTools.IMAGE_UPLOADER = imageUploader;
function imageUploader(dialog) {
var image, xhr, xhrComplete, xhrProgress;
// Set up the event handlers
dialog.addEventListener('imageuploader.cancelupload', function () {
// Cancel the current upload
// Stop the upload
if (xhr) {
xhr.upload.removeEventListener('progress', xhrProgress);
xhr.removeEventListener('readystatechange', xhrComplete);
xhr.abort();
}
// Set the dialog to empty
dialog.state('empty');
});
dialog.addEventListener('imageuploader.clear', function () {
// Clear the current image
dialog.clear();
image = null;
});
dialog.addEventListener('imageuploader.fileready', function (ev) {
var image = {
size: [480, 380],
url: 'img/ajax-new.png'
};
// Populate the dialog
dialog.populate(image.url, image.size);
});
dialog.addEventListener('imageuploader.save', function () {
dialog.save(
'img/ajax-new.png',
[100,100],
{}
);
// Set the dialog to busy while the rotate is performed
dialog.busy(true);
});
}