如何获取CKEditor的html

时间:2014-01-15 19:35:01

标签: ckeditor

我正潜入这个神奇的HTML世界。我有CKEditor woring和myFunction产生警报。我需要在编辑器中获取文本的HTML。

我从另一篇文章中得到了这个:

CKEDITOR.instances.textarea.on( 'instanceReady', function( instanceReadyEventObj )
{
var editorInstanceData = CKEDITOR.instances.textarea.getData();
alert( editorInstanceData );
});

我无法评论或回复帖子,因为我没有足够的积分,所以我不得不要求复制。 我有警报工作,并在myFunction中粘贴代码,但我在控制台中收到错误未捕获的TypeError:无法调用未定义的方法'on。

<!DOCTYPE html>
<html>


<head>
<script>
function myFunction()
{

var htmldata = CKEDITOR.instances.Editor.document.getBody().getHtml();
alert(htmldata);
}
</script>
    <title>A Simple Page with CKEditor</title>
    <!-- Make sure the path to CKEditor is correct. -->
    <script src="http://www.wilsea.com/ckeditor/ckeditor.js"></script>
</head>
<body>
    <form>
        <button onclick="myFunction()">Click me</button>

        <textarea id="editor1" name="editor1" rows="10" cols="80">
            This is my textarea to be replaced with CKEditor.....
        </textarea>
        <script>
            // Replace the <textarea id="editor1"> with a CKEditor
            // instance, using default configuration.
            CKEDITOR.replace( 'editor1' );
        </script>
    </form>
</body>

MrWarby

<!DOCTYPE html>
<html>
<head>

<script type="text/javaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://www.wilsea.com/ckeditor/ckeditor.js"></script>

</head>
<body>
        <textarea id="editor1" name="editor1" rows="10" cols="80">
            This is my textarea to be replaced with CKEditor
        </textarea>

<script>
function myFunction()
{

alert('test');

CKEDITOR.instances.textarea.on( 'instanceReady', function( instanceReadyEventObj )
{
var editorInstanceData = CKEDITOR.instances.textarea.getData();
alert( editorInstanceData );
});


}
CKEDITOR.replace( 'editor1' );
</script>

<p>Click the button to trigger a function.</p>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

</body>
</html>

我试过搬到不同的地方,但我仍然得到同样的错误。

测试页面位于http://www.wilsea.com/ckeditor/testckeditor.html

MrWarby。

1 个答案:

答案 0 :(得分:0)

在HEAD中的SCRIPT之前再添加两行:

<script type="text/javaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="/ckeditor/ckeditor.js"></script>

但是改变了CkEditor脚本的路径。