I want to make the dialog which has the editor in it, want to to be either inline or stick to the element which it gets open to,but it is rendered through a template.ejs which looks like a modal right now
So,is there anyway i can get either X,Y position of the element or is there a better way to do this?
Here i get the element through this.$el and then add that into the editor,i either the editor to stick where the element is been opened in the editor.
editor.js
render: function (options) {
var that = this;
// get x, y position from options of editElement and set top left of cke5-dialog
this.options = $.extend(this.options, options);
this.preRender();
console.log(' Ckeditor5EditView rendered');
let $el = this.$el;
$el.show();
let $editConatiner = $el.find('div.editable-container');
let $toolConatiner = $el.find('div.toolbar-container');
$editConatiner.html(this.options.htmlElm);
$toolConatiner.html("");
// $(this.options.editingElm).after(this.$el);
// $(this.options.editingElm).hide();
DecoupledEditor.create($editConatiner[0]).then(editor => {
window.editor = editor;
$toolConatiner[0].appendChild(editor.ui.view.toolbar.element);
that.htmlEditor = editor;
}).catch(error => {
console.error('There was a problem initializing the editor.', error);
});
},
const sampleData = `
<p style="font:10pt Times New Roman, Times, Serif;margin:0pt 0;text-align:justify;text-indent:0.25in;">
In 2015, the Bangladesh subsidiary entered into agreements to rent office facilities under
<p>
`;
DecoupledEditor.create(sampleData)
.then((editor) => {
window.editor = editor;
document
.querySelector(".toolbar-container")
.appendChild(editor.ui.view.toolbar.element);
document
.querySelector(".editable-container")
.appendChild(editor.ui.view.editable.element);
})
.catch((error) => {
console.error(
"There was a problem initializing the editor.",
error
);
});.cke5-dialog {
position: absolute;
top: 30%;
width: calc(72% - 4px);
left: 25px;
display: none;
}
.cke5-header {
background-color: gray;
width: 100%;
padding: 5px;
height: 35px;
}
.cke5-button-pane {
float: right;
}
.cke5-dialog-content {
width: 100%;
height: 100%;
}
.cke5-editor-pane {
width: 100%;
}
.cke5-dialog .toolbar-container {
position: relative;
border: 1px solid #ddd;
background: #eee;
padding: 3px;
}
.cke5-dialog .editable-container {
position: relative;
border: 1px solid gray !important;
background: #eee;
}
.cke5-dialog p {
margin-top: 0px;
margin-bottom: 0px;
}
.cke5-dialog .editable-container {
padding: 10px!important;
min-height: 130px;
max-height: 600px;
}
.cke5-dialog .editable-container .document-editor__editable.ck-editor__editable {
min-height: 21cm;
padding: 2em;
border: 1px #D3D3D3 solid;
border-radius: var(--ck-border-radius);
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}<body>
<p style="font:10pt Times New Roman, Times, Serif;margin:0pt 0;text-align:justify;text-indent:0.25in;" xvid="774e1b176687ef278ec0984ac7cfb438">
In 2015, the Bangladesh subsidiary entered into agreements to rent office facilities under
<p>
<div class='cke5-dialog-content'>
<div class='cke5-header'>
<div class="cke5-button-pane">
<button type="button" class="btn btn-cancel-html btn-xs cursor-pointer margin-right-5" data-rel="tooltip">
<i class="fa fa-times"></i>
</button>
<button type="button" class="btn btn-update-html btn-xs cursor-pointer" data-rel="tooltip">
<i class="far fa-save"></i>
</button>
</div>
</div>
<div class='cke5-editor-pane'>
<div class="toolbar-container"></div>
<div class="editable-container"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@ckeditor/[email protected]/build/ckeditor.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
</body>#Update: S i want to get the x,y position of the element on which i open the editor , i get that element through $(this.options.editingElm) so after getting the coordinates of that i want the editor to be in it.
CodePudding user response：
Here you can move the .cke5-dialog-content
be careful the editor does not overlay the other checkbox - you do not have borders so it is not obvious
const editor = document.querySelector(".cke5-dialog-content");
document.body.addEventListener("change",function(e) {
const target = e.target;
if (target.classList.contains("editorCheck")) {
const {bottom} = target.getBoundingClientRect();
editor.style.top = (bottom 10) "px"
editor.style.display="block"
}
})
const sampleData = `
<p style="font:10pt Times New Roman, Times, Serif;margin:0pt 0;text-align:justify;text-indent:0.25in;">
In 2015, the Bangladesh subsidiary entered into agreements to rent office facilities under
<p>
`;
DecoupledEditor.create(sampleData)
.then((editor) => {
window.editor = editor;
document
.querySelector(".toolbar-container")
.appendChild(editor.ui.view.toolbar.element);
document
.querySelector(".editable-container")
.appendChild(editor.ui.view.editable.element);
})
.catch((error) => {
console.error(
"There was a problem initializing the editor.",
error
);
});
const editor = document.querySelector(".cke5-dialog-content");
document.body.addEventListener("change",function(e) {
const target = e.target;
if (target.classList.contains("editorCheck")) {
const {bottom} = target.getBoundingClientRect();
editor.style.top = (bottom 10) "px"
editor.style.display="block"
}
}) .cke5-dialog-content {
position: absolute;
top: 30%;
width: calc(72% - 4px);
left: 25px;
display: none;
}
.cke5-header {
background-color: gray;
width: 100%;
padding: 5px;
height: 35px;
}
.cke5-button-pane {
float: right;
}
.cke5-dialog-content {
width: 100%;
height: 100%;
}
.cke5-editor-pane {
width: 100%;
}
.cke5-dialog .toolbar-container {
position: relative;
border: 1px solid #ddd;
background: #eee;
padding: 3px;
}
.cke5-dialog .editable-container {
position: relative;
border: 1px solid gray !important;
background: #eee;
}
.cke5-dialog p {
margin-top: 0px;
margin-bottom: 0px;
}
.cke5-dialog .editable-container {
padding: 10px!important;
min-height: 130px;
max-height: 600px;
}
.cke5-dialog .editable-container .document-editor__editable.ck-editor__editable {
min-height: 21cm;
padding: 2em;
border: 1px #D3D3D3 solid;
border-radius: var(--ck-border-radius);
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}<body>
<p>In 2015, the Bangladesh subsidiary entered into agreements to rent office facilities under A<input type="checkbox" class="editorCheck" /></p>
<div style="height:300px">Dummy</div>
<p>In 2015, the Bangladesh subsidiary entered into agreements to rent office facilities under B<input type="checkbox" class="editorCheck" /></p>
<div class='cke5-dialog-content'>
<div class='cke5-header'>
<div class="cke5-button-pane">
<button type="button" class="btn btn-cancel-html btn-xs cursor-pointer margin-right-5" data-rel="tooltip">
<i class="fa fa-times"></i>
</button>
<button type="button" class="btn btn-update-html btn-xs cursor-pointer" data-rel="tooltip">
<i class="far fa-save"></i>
</button>
</div>
</div>
<div class='cke5-editor-pane'>
<div class="toolbar-container"></div>
<div class="editable-container"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@ckeditor/[email protected]/build/ckeditor.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
</body>jQuery version
const $editor = $(".cke5-dialog-content");
$(".editorCheck").on("change", function() {
const top = $(this).position().top
$editor.css("top", (top 20) "px")
$editor.show()
})
const sampleData = `
<p style="font:10pt Times New Roman, Times, Serif;margin:0pt 0;text-align:justify;text-indent:0.25in;">
In 2015, the Bangladesh subsidiary entered into agreements to rent office facilities under
<p>
`;
DecoupledEditor.create(sampleData)
.then((editor) => {
window.editor = editor;
document
.querySelector(".toolbar-container")
.appendChild(editor.ui.view.toolbar.element);
document
.querySelector(".editable-container")
.appendChild(editor.ui.view.editable.element);
})
.catch((error) => {
console.error(
"There was a problem initializing the editor.",
error
);
});
const $editor = $(".cke5-dialog-content");
$(".editorCheck").on("change", function() {
const top = $(this).position().top
$editor.css("top", (top 20) "px")
$editor.show()
}).cke5-dialog-content {
position: absolute;
top: 30%;
width: calc(72% - 4px);
left: 25px;
display: none;
}
.cke5-header {
background-color: gray;
width: 100%;
padding: 5px;
height: 35px;
}
.cke5-button-pane {
float: right;
}
.cke5-dialog-content {
width: 100%;
height: 100%;
}
.cke5-editor-pane {
width: 100%;
}
.cke5-dialog .toolbar-container {
position: relative;
border: 1px solid #ddd;
background: #eee;
padding: 3px;
}
.cke5-dialog .editable-container {
position: relative;
border: 1px solid gray !important;
background: #eee;
}
.cke5-dialog p {
margin-top: 0px;
margin-bottom: 0px;
}
.cke5-dialog .editable-container {
padding: 10px!important;
min-height: 130px;
max-height: 600px;
}
.cke5-dialog .editable-container .document-editor__editable.ck-editor__editable {
min-height: 21cm;
padding: 2em;
border: 1px #D3D3D3 solid;
border-radius: var(--ck-border-radius);
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<body>
<p>In 2015, the Bangladesh subsidiary entered into agreements to rent office facilities under A<input type="checkbox" class="editorCheck" /></p>
<div style="height:600px">Dummy</div>
<p>In 2015, the Bangladesh subsidiary entered into agreements to rent office facilities under B<input type="checkbox" class="editorCheck" /></p>
<div class='cke5-dialog-content'>
<div class='cke5-header'>
<div class="cke5-button-pane">
<button type="button" class="btn btn-cancel-html btn-xs cursor-pointer margin-right-5" data-rel="tooltip">
<i class="fa fa-times"></i>
</button>
<button type="button" class="btn btn-update-html btn-xs cursor-pointer" data-rel="tooltip">
<i class="far fa-save"></i>
</button>
</div>
</div>
<div class='cke5-editor-pane'>
<div class="toolbar-container"></div>
<div class="editable-container"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@ckeditor/[email protected]/build/ckeditor.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
</body>