需要将 contentEditable=false 添加到 CKEditor 内的 p 标签答案

【问题标题】：need to add contentEditable=false to p tag inside CKEditor需要将 contentEditable=false 添加到 CKEditor 内的 p 标签
【发布时间】：2018-06-02 11:00:51
【问题描述】：

我需要在我的 CKEditor 中使用一些不可编辑的样板语句，然后是我的字符串信息的其余部分。我将样板语言[在 p 标签中]连接到我的 CKEditor 在某个 div 中显示的字符串变量。到白话的时候，这里：

<p id='abc' contentEditable='false'>verbiage</p>

... 并且字符串信息显示在页面上，它们位于许多嵌套标签的深处 - 在具有多个类的主体中。因此，现在仅在没有属性的 ap 标记中 [它们被剥离] 的措辞都嵌套在原始正文标记 [第一个正文标记，在页面中向上] 中，有很多很多 div，然后终于来了一个iframe，然后……字面意思和字符串是这样的：

<body contenteditable="true" class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" spellcheck="false">
<p>boilerplate verbiage</p>

...然后其余信息显示在编辑器中，在各种跨度内等。我需要使样板语言只读，contentEditable='false'。然而，我从 Chrome 中的控制台和代码中尝试的所有内容......没有任何改变样板语言

标签。我尝试了各种方法，包括这些——也许你可以看到我需要调整的地方；我希望这将向您展示我尝试过的事情，并且到目前为止我已经没有选择了：

jQuery("body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders").first().contentEditable='false';
jQuery("body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders").attr("readonly", "1");
jQuery("body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders p:first-child").contentEditable='false';
jQuery("body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders").find( "p" ).contentEditable='false';
jQuery("iframe", ".cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders").contents().find("p").contentEditable='false';
jQuery("iframe", "body .cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders").contents().find("p").contentEditable='false';

var editor= jQuery("body", ".cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders");
editor.val(editor.val().replace(/<p>/gi, "<p class='tiny_p'>"))

var editor= jQuery("body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders");
editor.val(editor.val().replace(/<p>/gi, "<p class='tiny_p'>"))

如果我在 Chrome 浏览器中硬编码，contenteditable="false", 它完美地工作。那么，我怎样才能访问那个 p 标签并为其分配这个属性呢？

【问题讨论】：

标签： javascript jquery ckeditor contenteditable readonly

【解决方案1】：

这实际上取决于您想要访问的时间和方式，一个选项可以直接从单独的脚本访问。

CKEDITOR.instances[YOUR_INSTANCE].window.$.document.getElementById("your_p_tag")

注意，应该在CKEDITOR初始化之后完成

更新：

CKEDITOR.instances[YOUR_INSTANCE].window.$.document.body.firstChild

【讨论】：

谢谢 - 但您可能还记得，在 DOM 中，我用 id 定义的原始 p 标签被渲染到编辑器主体标签内的页面，就像
boilerplate verbiage
没有id，所以没有 id 可以通过 getElementById 获取。最好将该 id 添加到“body.class1.class2.class3 ...
@dcparham 我更新了 p 标签作为 body 的第一个孩子的答案（就像你原来的问题一样）
谢谢你，SAZ，我试过了，但无法触及那个
元素。所以我最终在他们的网站上使用构建器创建了一个新的 ckeditor，并添加了占位符。我使用了旧的 config.js，它只有我想要的工具栏上的工具；所以占位符现在也不在工具栏上；然而，当您将占位符添加到编辑器时，占位符创建的代码是这样的：[[placeholder goes here]] - 在一些数据和中提琴周围添加两个左 ['s 和两个右 ]，黄色突出显示占位符，只读。但是，您可以将其删除，这令人不安。不知道如何避免。