使用附加（不可编辑）HTML 封装 CKEditor WYSYWG 内容以应用特定于元素的格式

发布于 2024-08-31 20:19:51 字数 884 浏览 2 评论 0原文

我试图在 CKEDITOR 中显示 WYSYWG 视图，其格式与最终呈现的 HTML 中的格式相同。

我目前正在通过在加载 CKEditor 时指定 contentCss 属性来应用正确的 CSS。

这对于某些格式来说效果很好，但是许多 css 格式应用于将围绕最终渲染页面中编辑的 HTML 的元素 - 因此 WYSYWG 视图与最终渲染视图不一致。

我希望能够在运行时指定 HTML 代码，将可编辑的 HTML 内容包装在 CKEditor WYSYWG 视图中 - 但不能将其作为可编辑代码的一部分，或在 HTML 代码中呈现。

例如，当前围绕可编辑内容的 HTML 代码是：

<body spellcheck="false" class="cke_show_borders">
  [Editable Content]
</body>

在一个特定实例中，我希望它像这样呈现：

<body spellcheck="false" class="cke_show_borders"><div id="container_everything"><div id="content_container"><div class="introduction_container"><div class="introduction_text">
  [Editable Content]
</div></div></div></div></body>

我需要能够在运行时指定不同的前缀和后缀代码块，因为特定的 HTML 取决于正在编辑的元素的上下文。

有人能指出我正确的方向吗？

谢谢。

原文

I am attempting to have the WYSYWG view within CKEDITOR display with the same formatting as it will within the final rendered HTML.

I am currently applying the correct CSS through specifying the contentsCss property when loading CKEditor.

This works fine for some of the formatting, however a lot of the css formatting is applied to elements which will surround the edited HTML within the final rendered page - and so the WYSYWG view is not consistent with the final rendered view.

I would like to be able to specify HTML code at runtime which will wrap the editable HTML content within the CKEditor WYSYWG view - but not have this be part of the editable code, or rendered within the HTML code.

For instance, currently the HTML code surrounding the editable content is:

<body spellcheck="false" class="cke_show_borders">
  [Editable Content]
</body>

Where as in one particular instance I would it like it to render like this:

<body spellcheck="false" class="cke_show_borders"><div id="container_everything"><div id="content_container"><div class="introduction_container"><div class="introduction_text">
  [Editable Content]
</div></div></div></div></body>

I need to be able to specify different prefix and suffix code blocks at runtime, as specific HTML depends on the context of the element being edited.

Can anyone point me in the right direction?

Thanks.

分享到QQ

分享到微博