更改 CKEditor 表单元素的 HTML(在对话框窗口中)

发布于 2024-09-04 10:08:15 字数 757 浏览 8 评论 0原文

我正在尝试修改 CKEditor 中对话框的 HTML。每个盒子中的 HTML 绝对是一场噩梦,更糟糕的是,源代码被压缩,并且不清楚执行路径是什么。

我想采用这样的方法:

<div class="cke_dialog_ui_select" id="44_uiElement" role="presentation"><label style="" for="42_select" id="43_label" class="cke_dialog_ui_labeled_label">Link Type</label><div role="presentation" class="cke_dialog_ui_labeled_content"><select aria-labelledby="43_label" class="cke_dialog_ui_input_select" id="42_select"><option value="url"> URL</option><option value="anchor"> Link to anchor in the text</option><option value="email"> E-mail</option></select></div></div>

将其变成更清晰、更易于样式化的内容,删除其中一个 div。这些分别用于图像和锚点对话框(模态对话框)。

感谢您的帮助。

I'm trying to modify the HTML of the dialog boxes in CKEditor. The HTML inside each of those boxes is an absolute nightmare, and even worse, the source code is compressed and it's unclear what the path of execution is.

I want to take something like this:

<div class="cke_dialog_ui_select" id="44_uiElement" role="presentation"><label style="" for="42_select" id="43_label" class="cke_dialog_ui_labeled_label">Link Type</label><div role="presentation" class="cke_dialog_ui_labeled_content"><select aria-labelledby="43_label" class="cke_dialog_ui_input_select" id="42_select"><option value="url"> URL</option><option value="anchor"> Link to anchor in the text</option><option value="email"> E-mail</option></select></div></div>

and turn it into something more legible and easier to style, removing one of the divs. These are for the Image and Anchor dialog boxes (Modal dialogues) respectively.

Thanks for your help.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

欢烬 2024-09-11 10:08:15

等等,您真的想在编辑器中编辑 HTML 文件吗?

有很棒的 AP​​I 和文档。当文档说它比我以前能做到的 100% 更好、更清晰时,就不值得在这里尝试描述。如果您尝试自定义对话框,这里是文档。

所有 api 的开发人员指南

所有文档、操作方法等。

如果您仍然需要除此之外的帮助,请告诉我。

Wait, are you really trying to edit the HTML files inside the editor?

There's superb api and documentation. It's not worth trying to describe here when the documentation says it 100% better and clearer than I ever could. If you're trying to customize the dialogs, here's the documentation.

The Developer Guide for all of the api

And all of the documentation, how to's etc.

If you still need help beyond that, give me a heads up.

墨洒年华 2024-09-11 10:08:15

这是我对这个问题的建议。

    var htmlId=dialog.getContentElement( 'tabId', 'htmlElement' ).domId;
    document.getElementById(htmlId).innerHTML='<img src="happy_face.jpg"/>';

我必须说,文档对于执行此操作的正确方法有点模糊。如果有人有更好的解决方案,我会很高兴看到。

http://docs.ckeditor.com/#!/api/CKEDITOR .dialog.definition.html

我使用了原生 javascript,但它很可能是 jquery。

var htmlId=dialog.getContentElement( 'tabId', 'htmlElement' ).domId;
    $("#"+htmlId).html('<img src="happy_face.jpg"/>');

This is my proposition for this problem.

    var htmlId=dialog.getContentElement( 'tabId', 'htmlElement' ).domId;
    document.getElementById(htmlId).innerHTML='<img src="happy_face.jpg"/>';

I must say that the documentation is a little bit vague on the proper way of doing this. If someone has a better solution, I would be glad to see.

http://docs.ckeditor.com/#!/api/CKEDITOR.dialog.definition.html

I used native javascript but it could very well be jquery.

var htmlId=dialog.getContentElement( 'tabId', 'htmlElement' ).domId;
    $("#"+htmlId).html('<img src="happy_face.jpg"/>');
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文