我想制作包含編輯器的對話框，想要行內或堅持它打開的元素，但它是通過template.ejs現在看起來像模態的
那么，無論如何我可以獲得元素的X，Y位置還是有更好的方法來做到這一點？
在這里，我獲取元素this.$el，然后將其添加到編輯器中，我要么將編輯器粘貼到該元素在編輯器中打開的位置。
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 我想獲得我打開編輯器的元素的 x,y 位置，$(this.options.editingElm)在獲得我希望編輯器在其中的坐標后，我獲得了該元素。
uj5u.com熱心網友回復：
在這里你可以移動 .cke5-dialog
小心編輯器不會覆寫另一個復選框 - 你沒有邊框所以它不明顯
https://jsfiddle.net/mplungjan/fnthmy2u/
const $editor = $(".cke5-dialog");
$(".text").on("contextmenu", function(e) {
e.preventDefault();
$editor.hide()
$editor.css({left:e.pageX, top:e.pageY});
$editor.show()
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/336957.html
標籤：javascript 查询
上一篇：如何使用現有值觸發jquery自動完成點擊輸入和空輸入的默認結果
下一篇：UncaughtReferenceError:jQueryisnotdefinedDjangojQueryCDN