CKEditor - 不显示

Question

我正在尝试将 ckeditor 集成到我用 java 用 play2 编写的网站中。

现在我下载了 javascript 文件并阅读了示例。

我认为重要的部分是ckeditor.js

<script type="text/javascript" src="/assets/javascripts/ckeditor.js"></script>

我还使用了样本中完全相同的表格

<form action="sample_posteddata.php" method="post">
        <label for="editor1">
            CKEditor using the <code>docprops</code> plugin and working in the Full Page mode:</label>
        <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;html&gt;&lt;head&gt;&lt;title&gt;CKEditor Sample&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</textarea>
        <script type="text/javascript">
        //<![CDATA[

            CKEDITOR.replace( 'editor1',
                {
                    fullPage : true,
                    extraPlugins : 'docprops'
                });

        //]]>
        </script>
    <p>
        <input type="submit" value="Submit" />
    </p>
</form>

但是它不起作用，它只是渲染了一个普通的文本区域。我正在使用 twitter bootstrap + jquery 1.7.1.

也许我忽略了一个重要的部分？

Answer 1

你只需要使用这个脚本

<script type="text/javascript">
    CKEDITOR.replace("editor1");
</script>

Answer 2

如果您在设置 ckeditor 时遇到问题，可能是您的页面加载缓慢。表明您需要调用 CKEDITOR.replace("editor1")。当你使用backbone.js时，你会遇到这个问题。希望以下的旅行对你有帮助。

代码

 jQuery(document).ready(function() {
  CKEDITOR.replace("editor1")
 });

Answer 3

如果 ckeditor.js 文件的源路径不正确，那么您可能会收到错误“CKEDITOR not Define”。试试这个......

 <script type="text/javascript" src="../assets/javascripts/ckeditor.js"></script>

Answer 4

我遇到了类似的问题，它与属性

CKEDITOR.basePath

有关，如果您在控制台中查看并看到类似

Uncaught TypeError: Cannot set property 'dir' of undefined

的错误，这意味着您必须将 basePath 属性设置到正确的位置....

Answer 5

我发现了完全相同的条件，看起来元素需要有 id 属性才能工作

Answer 6

我认为你需要的不仅仅是ckeditor.js。 也添加这些资源，它应该可以工作。

<link rel="stylesheet" href="assets/css/ckeditor/contents.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/ckeditor/skins/boostrap/editor.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/ckeditor/skins/boostrap/editor_gecko.css" rel="stylesheet">
<script src="assets/js/ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="assets/js/ckeditor/styles.js" type="text/javascript"></script>
<script src="assets/js/ckeditor/config.js" type="text/javascript"></script>
<script src="assets/js/ckeditor/lang/en.js" type="text/javascript"></script>

Answer 7

我得到了解决方案，它在您视图的控制器内工作，您应该将脚本代码发布在控制器代码内

Answer 8

当仅包含 ckeditor.js 不起作用时，这几乎是您所需要的：

<script>
            var CKEDITOR_BASEPATH = window.location.origin + '/.../CKEditor/';
</script>

此处的文档对此进行了描述：http://docs.ckeditor.com/#!/guide/dev_basepath

当我将其放入 html 的 head 部分时，这解决了我的问题。

Answer 9

Ckeditor 无法工作并出现很多问题 正在阅读或查看的页面。

面对问题

与普遍看法相反，

Lorem Ipsum 并不是简单的随机文本。它源于公元前 45 年的一部古典拉丁文学，已有 2000 多年的历史。理查德·麦克林托克 (Richard McClintock) 是弗吉尼亚州汉普登悉尼学院的拉丁语教授，他从 Lorem Ipsum 的一篇文章中查找了一个比较晦涩难懂的拉丁语单词 consectetur，并浏览了该词在古典文学中的引用