1

我第一次使用 CKEditor 并尝试做一些我认为很容易做的事情，但到目前为止我还没有成功。

本质上，我想将 editor.js、config.js 和 styles.js 放在脚本文件夹中，但希望包含 css 和图像的“皮肤”文件夹出现在单独的“样式”文件夹中。

该应用程序由一个简单的视图组成，该视图在加载时显示编辑器。

显示编辑器的代码如下：

angular.element(document).ready(function () {
    CKEDITOR.config.contentsCss = '/Styles/CKEditor/';
    CKEDITOR.replace('editor');
});

我认为的 HTML 如下：

@section scripts
{
    <script src="~/Scripts/ckeditor.js" type="text/javascript"></script>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/Main.js" type="text/javascript"></script>
}

<h2>Index</h2>

<textarea id="editor" name="editor"></textarea>

这是一个 MVC 应用程序，脚本在布局视图中呈现在正文的末尾。

编辑器不会显示在任何浏览器中。据我了解，设置 contentsCss 属性应该可以解决问题。

如果我将皮肤放在我的脚本文件夹下，它可以正常工作。我可以在生成的源代码中看到它正在添加指向 /Scripts/Skins/moono... 的标题的链接，但我希望它添加对 /Styles/Skins/moono... 的引用

我正在尝试做的事情是否可行，如果可以，我在这里缺少什么？我期待这很简单。

作为一种解决方法，我可以添加一些路由规则，将相关请求重定向到不同的位置，但我宁愿在执行此操作之前找到问题的根源。

更多信息：

  • 我的应用程序是一个 ASP.net 4.5/MVC 4 应用程序。
  • 我引用 angular 是因为一旦我解决了这个问题，我就会使用它。我已尝试删除对 angular 的所有引用，但问题仍然存在。
  • 我尝试通过以下方式设置 contentsCss 属性：
    • 直接使用CKEDITOR.config.contentsCss
    • 在 config.js 文件中。该示例为 CKEDITOR.editorConfig 分配了一个匿名函数，您可以在其中操作 congif 条目。
    • 在 CKEditor 对象上调用“replace”方法时传递配置参数。
    • 我尝试在调用替换之前和之后操作 contentsCss 属性。
  • 我正在使用最新版本的 CKEditor (4.2)
4

2 回答 2

4

感谢@Richard Deeming，我找到了答案。

我使用的是默认的 moono 样式，所以我需要设置 CKEDITOR.config.skin 属性，如下所示：

CKEDITOR.config.skin = 'moono,/Styles/CKEditor/Skins/moono/'

我的最终代码现在看起来像这样：

angular.element(document).ready(function () {
    CKEDITOR.config.skin = 'moono,/Styles/CKEditor/Skins/moono/';
    CKEDITOR.replace('editor');
});

您必须将 url 设置为包含皮肤本身的实际文件夹（我认为 CKEditor 可能会附加 skins/mooono 本身，但它没有）。

我还发现您必须在 URL 中包含最后的“/”。

于 2013-07-25T16:26:43.963 回答
3

查看文档，您需要将路径指定为皮肤名称的一部分：

CKEDITOR.skinName = 'CKeditor,/Styles/CKeditor/';
于 2013-07-25T16:04:00.347 回答