Skip to content

Commit

Permalink
Added editHTMLDocumentMode in iframe plugin - it allows edit whole do…
Browse files Browse the repository at this point in the history 
…cument instead BODY in different case

Fixed #241
  • Loading branch information
@xdan
xdan committed Jan 15, 2020
1 parent 4f4b262 commit eec6e52
Show file tree
Hide file tree
Showing 7 changed files with 329 additions and 259 deletions.
2 changes: 1 addition & 1 deletion src/plugins/iframe.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,7 @@ export function iframe(editor: IJodit) {
Dom.toggleAttribute(
doc.body,
'contenteditable',
editor.getMode() !== MODE_SOURCE
editor.getMode() !== MODE_SOURCE && !editor.getReadOnly()
);
};

Expand Down
3 changes: 3 additions & 0 deletions src/types/jodit.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@ interface IJodit extends IViewWithToolbar {
getEditorValue(removeSelectionMarkers?: boolean): string;
setEditorValue(value?: string): void;

getReadOnly(): boolean;
setReadOnly(enable: boolean): void;

places: IWorkPlace[];
currentPlace: IWorkPlace;
addPlace(source: HTMLElement | string, options?: IViewOptions): void;
Expand Down
6 changes: 5 additions & 1 deletion test/bootstrap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -438,7 +438,11 @@ function sortStyles(matches) {
.join(':');
})
.sort(function(a, b) {
return a - b;
if (a < b) {
return - 1;
}

return a > b ? 1 : 0;
});

return styles.join(';');
Expand Down
2 changes: 1 addition & 1 deletion test/tests/acceptance/iframeTest.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ describe('Iframe mode', function() {
it('Should replace entire document', function() {
const editor = Jodit.make(appendTestArea(), opt);
editor.value =
'<htm lang="en"><head><title>Hi</title></head><body><strong>Test</strong></body></html>';
'<html lang="en"><head><title>Hi</title></head><body><strong>Test</strong></body></html>';

expect(
sortAttributes(
Expand Down
245 changes: 149 additions & 96 deletions test/tests/acceptance/plugins/dragAndDropElement.js
View file
Original file line number Diff line number Diff line change
@@ -1,97 +1,150 @@
describe('Drag and drop element inside Editor', function () {
['mousedown|mousemove|mouseup', 'touchstart|touchmove|touchend'].map(function (item) {
return item.split('|');
}).forEach(function (events) {
describe(events[0] + ' and move image inside the editor', function () {
it('Should ' + events[1] + ' dom element', function () {
const editor = new Jodit(appendTestArea());
editor.value = '<p>1111</p>' +
'<p>2222</p>' +
'<img style="width: 100px" src="https://xdsoft.net/jodit/build/images/artio.jpg" alt="">' +
'<p>3333</p>' +
'<p>4444</p>';

simulateEvent(events[0], 0, editor.editor.getElementsByTagName('img')[0]);

window.scrollTo(0, 100000);
const box = offset(editor.editor.querySelectorAll('p')[1]);
// createPoint(box.left + 15, box.top + 5);

simulateEvent(events[1], 0, editor.editor, function (options) {
options.clientX = box.left + 15;
options.clientY = box.top + 5 - document.documentElement.scrollTop;
});

simulateEvent(events[2], 0, editor.editor, function (options) {
options.clientX = box.left + 20;
options.clientY = box.top + 5 - document.documentElement.scrollTop;
});

expect(sortAttributes(editor.value)).equals(
'<p>1111</p>' +
'<p>22<img alt="" src="https://xdsoft.net/jodit/build/images/artio.jpg" style="width:100px">22</p>' +
'<p>3333</p>' +
'<p>4444</p>'
);
});
});
describe(events[1] + ' image inside anchor', function () {
it('Should ' + events[1] + ' anchor with image', function () {
const editor = new Jodit(appendTestArea());
editor.value = '<p>1111</p>' +
'<p>2222</p>' +
'<a href="#test"><img style="width: 100px" src="https://xdsoft.net/jodit/build/images/artio.jpg" alt=""></a>' +
'<p>3333</p>' +
'<p>4444</p>';

simulateEvent(events[0], 0, editor.editor.getElementsByTagName('img')[0]);

const box = Jodit.modules.Helpers.offset(editor.editor.querySelectorAll('p')[1], editor, editor.editorDocument);

simulateEvent(events[1], 0, editor.editor, function (options) {
options.clientX = box.left + 15;
options.clientY = box.top + 5 - document.documentElement.scrollTop;
});
simulateEvent(events[2], 0, editor.editor, function (options) {
options.clientX = box.left + 20;
options.clientY = box.top + 5 - document.documentElement.scrollTop;

});

expect(editor.value).equals('<p>1111</p><p>22<a href="#test"><img style="width: 100px" src="https://xdsoft.net/jodit/build/images/artio.jpg" alt=""></a>22</p><p>3333</p><p>4444</p>');
});
});
describe('Disable dragging', function () {
it('Should not move image', function () {
const editor = new Jodit(appendTestArea(), {
draggableTags: [],
});

const defaultValue = '<p>1111</p>' +
'<p>2222</p>' +
'<a href="#test"><img style="width: 100px" src="https://xdsoft.net/jodit/build/images/artio.jpg" alt=""></a>' +
'<p>3333</p>' +
'<p>4444</p>';

editor.value = defaultValue;

simulateEvent(events[0], 0, editor.editor.getElementsByTagName('img')[0]);

const box = Jodit.modules.Helpers.offset(editor.editor.querySelectorAll('p')[1], editor, editor.editorDocument);

simulateEvent(events[1], 0, editor.editor, function (options) {
options.clientX = box.left + 15;
options.clientY = box.top + 5 - document.documentElement.scrollTop;
});
simulateEvent(events[2], 0, editor.editor, function (options) {
options.clientX = box.left + 20;
options.clientY = box.top + 5 - document.documentElement.scrollTop;
});

expect(editor.value).equals(defaultValue);
});
});
});

afterEach(removeStuff);
describe('Drag and drop element inside Editor', function() {
['mousedown|mousemove|mouseup', 'touchstart|touchmove|touchend']
.map(function(item) {
return item.split('|');
})
.forEach(function(events) {
describe(
events[0] + ' and move image inside the editor',
function() {
it('Should ' + events[1] + ' dom element', function() {
const editor = new Jodit(appendTestArea());
editor.value =
'<p>1111</p>' +
'<p>2222</p>' +
'<img style="width: 100px" src="https://xdsoft.net/jodit/build/images/artio.jpg" alt="">' +
'<p>3333</p>' +
'<p>4444</p>';

simulateEvent(
events[0],
0,
editor.editor.getElementsByTagName('img')[0]
);

window.scrollTo(0, 100000);
const box = offset(
editor.editor.querySelectorAll('p')[1]
);
// createPoint(box.left + 15, box.top + 5);

simulateEvent(events[1], 0, editor.editor, function(
options
) {
options.clientX = box.left + 15;
options.clientY =
box.top +
5 -
document.documentElement.scrollTop;
});

simulateEvent(events[2], 0, editor.editor, function(
options
) {
options.clientX = box.left + 20;
options.clientY =
box.top +
5 -
document.documentElement.scrollTop;
});

expect(sortAttributes(editor.value)).equals(
'<p>1111</p>' +
'<p>22<img alt="" src="https://xdsoft.net/jodit/build/images/artio.jpg" style="width:100px">22</p>' +
'<p>3333</p>' +
'<p>4444</p>'
);
});
}
);
describe(events[1] + ' image inside anchor', function() {
it('Should ' + events[1] + ' anchor with image', function() {
const editor = new Jodit(appendTestArea());
editor.value =
'<p>1111</p>' +
'<p>2222</p>' +
'<a href="#test"><img style="width: 100px" src="https://xdsoft.net/jodit/build/images/artio.jpg" alt=""></a>' +
'<p>3333</p>' +
'<p>4444</p>';

simulateEvent(
events[0],
0,
editor.editor.getElementsByTagName('img')[0]
);

const box = Jodit.modules.Helpers.offset(
editor.editor.querySelectorAll('p')[1],
editor,
editor.editorDocument
);

simulateEvent(events[1], 0, editor.editor, function(
options
) {
options.clientX = box.left + 15;
options.clientY =
box.top + 5 - document.documentElement.scrollTop;
});
simulateEvent(events[2], 0, editor.editor, function(
options
) {
options.clientX = box.left + 20;
options.clientY =
box.top + 5 - document.documentElement.scrollTop;
});

expect(editor.value).equals(
'<p>1111</p><p>22<a href="#test"><img style="width: 100px" src="https://xdsoft.net/jodit/build/images/artio.jpg" alt=""></a>22</p><p>3333</p><p>4444</p>'
);
});
});
describe('Disable dragging', function() {
it('Should not move image', function() {
const editor = new Jodit(appendTestArea(), {
draggableTags: []
});

const defaultValue =
'<p>1111</p>' +
'<p>2222</p>' +
'<a href="#test"><img style="width: 100px" src="https://xdsoft.net/jodit/build/images/artio.jpg" alt=""></a>' +
'<p>3333</p>' +
'<p>4444</p>';

editor.value = defaultValue;

simulateEvent(
events[0],
0,
editor.editor.getElementsByTagName('img')[0]
);

const box = Jodit.modules.Helpers.offset(
editor.editor.querySelectorAll('p')[1],
editor,
editor.editorDocument
);

simulateEvent(events[1], 0, editor.editor, function(
options
) {
options.clientX = box.left + 15;
options.clientY =
box.top + 5 - document.documentElement.scrollTop;
});
simulateEvent(events[2], 0, editor.editor, function(
options
) {
options.clientX = box.left + 20;
options.clientY =
box.top + 5 - document.documentElement.scrollTop;
});

expect(editor.value).equals(defaultValue);
});
});
});

afterEach(removeStuff);
});
Loading

0 comments on commit eec6e52

Please sign in to comment.