tinyMCE setContent无法与语法高亮代码一起使用

Question

我已经卡在这里几个小时了，希望能得到帮助。我正在使用 tinyMCE 与 syntaxhl 插件，使用 syntaxhighlighter 2.1.382。非高亮代码的一切都很好用。但是，当我使用 setContent 与高亮代码时，就不起作用了。我希望有什么明显的问题我没有看到。

$(window).load(function() {
     tinyMCE.activeEditor.setContent('<p>here is some code:</p>
    <pre class="brush: jscript;fontsize: 100; first-line: 1; ">var fs = require("fs");

    module.exports = function(app, service){
        fs.readdir(__dirname + "/controllers", function(err, files){
            if (err) throw err;
            files.forEach(function(file){
                var name = file.replace(".js", "");
                require("./controllers/" + name)(app, service);
            });
        });
    };</pre>');
});

然而，这并不起作用。我尝试调试javascript，但在那里遇到了麻烦（至少使用chrome开发工具）。没有错误消息，只是没有填充内容。我尝试使用tinyMCE文档中建议的{format：'raw'}，但没有成功。我希望有人尝试过这样做并成功了。

- Davin Tryon

---

一个简单的问题 - 你是在尝试使用你提问中的示例还是它只是一个抽象的例子？JS不支持你所写的多行字符串。 - Cheery

只是一个例子。然而，它可以是 pre 标签内的任何代码。 - Davin Tryon

Answer 1

我不知道高亮插件，但我猜它会将一个特殊的样式表插入到编辑器iframe的头部。这会导致特殊的HTML标签等被样式化（高亮）。

在这种情况下，内容不会受到影响/改变。

使用此插件无法获得与高亮内容相同的外观。

- Thariama

---

谢谢回复。抱歉，我不是很理解。我以为我可以在任何有效的HTML上执行setContent？我不是试图让样式在编辑器内工作。我正在尝试将编辑器先前生成的一些HTML设置为内容。您是否看到上面的代码存在问题？ - Davin Tryon

默认设置valid_elements和valid_children可能存在问题。请查看TinyMCE文档以获取有关如何调整此设置的进一步信息。 - Thariama

谢谢。我会去看看的。目前我已经将所有默认设置都设定好了。 - Davin Tryon

如果设置未针对您的用例进行设置，则所有声明为非有效HTML元素的内容都将被剥离。 - Thariama

我已经尝试了你的建议，但是还没有成功。保存时保留了所有内容。我认为如果extended_valid_elements中没有包含标签，它们会在保存时被剥离。是这样吗？ - Davin Tryon

是和否，清理工作在保存时以及其他编辑器事件（例如粘贴）上进行。 - Thariama

Answer 2

不幸的是，我从未让上面的代码正常工作。我认为浏览器中的<pre>标签可能会接管并搞乱一些东西。此外，我仍然对换行符造成的影响有些怀疑。@Thariama提供了一些帮助，这非常好，但是，在阅读了所有关于extended_valid_elements、valid_elements和valid_children的文档，并以多种方式配置了tinyMCE init之后，我无法让它正常工作。

然而，我找到了适合我的解决方案。事实证明，如果我直接使用编码的HTML设置<textarea>（因此<pre>标签变成<pre class="brush: bash;fontsize: 100; first-line: 1; ">），那么它就可以正常工作。由于这个方法可行且无需在初始化tinyMCE后执行setContent，所以对我来说很有效。

语法高亮功能很好用。我在搜索时发现了这个链接，如果其他人也想做同样的事情，可以参考一下。

- Davin Tryon

---

是的，这将有效，因为您输入的“<”被视为实体+1。 - Thariama