2

最好的事情是从头开始.. 所以：在我正在处理的项目（AngularJS）中，我使用 CKEditor 作为所见即所得的编辑器。在我想添加代码片段功能之前，一切都运行良好。

CKE 生成纯 html 代码，我可以将其绑定到模型以实时查看正在发生的事情。在我这边，我一直在使用 ng-bind-html 来查看结果，并且效果很好。每个基本 html 代码都可以正常工作，粗体、斜体、标题……字体、大小等。

当 CodeSnippet 插件（http://ckeditor.com/addon/codesnippet）进入......它停止工作（我的意思是codesnippet部分）。不工作的 HTML 示例（顺便说一句，CKE 使用 ‚&lt 和 > 生成代码，而不是普通的标签 < 和 >.. 所以我必须替换它们……但没关系，这不是问题 :) ）。片段示例（在 ng-bind 端不起作用）：

<code class="language-      html">&lt;html&gt;&lt;body&gt;Test&lt;/body&gt;&lt;/html&gt;</code>

问题是编辑器内部一切正常，但外部（当绑定到 ng-bind-html 指令时），它不是。

到目前为止我尝试过的：
- 我包含了 CKE 编辑器在内部使用的 CSS 文件......毫无价值。- 代码片段插件使用highlight.js，所以我尝试将CKE html代码转换为highlight.js ..它工作！例子：

<div compile="true" hljs language="css”&gt;whatever</div>

但问题是 CKE 编辑器会产生复杂的文本（包括代码片段、其他内容、引号等）。因此，如果我将所有这些都放入 HLJS 指令中……它会突出显示所有内容。这不是我想要达到的。

我对这个问题的解决方案是使用 HLJS + 普通 html 代码添加动态指令。结果示例：（hljs 指令它的角度指令 hightlight.js）：

<div id="hl" compile="true" hljs language="css">example</div>
<p><strong>Damn</strong></p>
<div id="hl" compile="true" hljs language="cpp">Other snippet</div>

为了让它工作，我必须重新编译我添加的整个代码。所以我把它放入指令中，一旦更新就可以观察和重新编译代码。

而且..它奏效了！！但是……真正的问题来了：

*它只适用于 HTML 有效的代码片段，因为 $compile 以某种方式验证了里面的所有这些东西……发生了什么？'<' 标签转换为 '<' ...如果我打开一些 HTML 标签.. 它会立即关闭它..（如果我“忘记”了它）和许多其他奇怪和不可接受的东西。

你有什么主意吗？我试图尽可能清楚地解释这个问题，但如果你有任何进一步的问题..

4

0 回答 0