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>

但它不起作用，它只是渲染一个普通的textarea。我正在使用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 defined”。试试这个......

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

Answer 4

我有一个类似的问题，如果你在控制台中查看并看到像CKEDITOR.basePath这样的错误，这意味着你必须将basePath属性设置为正确的位置，它与属性Uncaught TypeError: Cannot set property 'dir' of undefined有关。 ....

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部分时，这解决了我的问题。