ckeditor 从 javascript 更新文本区域
ckeditor update textarea from javascript
我已经使用 CKEditor 一年了,一切正常。
现在我需要使用 javascript.
更改文本区域中的文本
我创建了一个示例来说明我的问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor Sample</title>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
function othertext() {
document.getElementById('button').value = 'xxx';
document.getElementById('noteditor').innerHTML = '<h1>Hello other world!</h1><p>I'm also an instance of <a href="http://ckeditor.com">CKEditor</a>.</p>';
document.getElementById('editor').innerHTML = '<h1>Hello other world!</h1><p>I'm also an instance of <a href="http://ckeditor.com">CKEditor</a>.</p>';
CKEDITOR.replace('editor');
}
</script>
</head>
<body id="main">
<input type="button" id="button" onclick="othertext();" value="NewText" />
<br>
<textarea id=noteditor>
<h1>
Hello world!
</h1>
<p>
I'm an instance of <a href="http://ckeditor.com">CKEditor</a>.
</p>
</textarea>
<br>
<textarea name=text id=editor>
<h1>
Hello world!
</h1>
<p>
I'm an instance of <a href="http://ckeditor.com">CKEditor</a>.
</p>
</textarea>
<script type="text/javascript">
CKEDITOR.replace('editor');
</script>
</body>
</html>
当我点击按钮时,按钮的值发生变化,与第一个文本区域(id=noteditor)相同。
但是textarea(id=editor)不受影响。
为什么?
在调试器中,当执行函数 othertext 中的 "CKEDITOR.replace('editor1');" 行时,我得到 :TypeError.
我做错了什么?
我找到了解决问题的方法!
偶然的机会,我在这里找到了问题的答案:"Using CKEditor API" 下的 http://sdk.ckeditor.com/samples/api.html。
我在下面重写了我的第一个代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor Sample</title>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
function SetContents() {
// Get the editor instance that you want to interact with.
var editor = CKEDITOR.instances.editor_Area1;
var value = document.getElementById('HTMLArea' ).value;
// Set editor content (replace current content).
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData
editor.setData( value );
}
</script>
</head>
<body id="main">
<input type="button" id="button" onclick="SetContents();" value="Set text" />
<br>
<textarea id=HTMLArea>
<h1>
Hello other world!
</h1>
<p>
I'm an other instance of <a href="http://ckeditor.com">CKEditor</a>.
</p>
</textarea>
<br>
<textarea name=text id=editor_Area1>
<h1>
Hello world!
</h1>
<p>
I'm an instance of <a href="http://ckeditor.com">CKEditor</a>.
</p>
</textarea>
<script type="text/javascript">
CKEDITOR.replace('editor_Area1');
</script>
</body>
</html>
单击按钮时,编辑区的内容被文本区 "HTMLArea" 中的 html 替换。
我已经使用 CKEditor 一年了,一切正常。
现在我需要使用 javascript.
更改文本区域中的文本
我创建了一个示例来说明我的问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor Sample</title>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
function othertext() {
document.getElementById('button').value = 'xxx';
document.getElementById('noteditor').innerHTML = '<h1>Hello other world!</h1><p>I'm also an instance of <a href="http://ckeditor.com">CKEditor</a>.</p>';
document.getElementById('editor').innerHTML = '<h1>Hello other world!</h1><p>I'm also an instance of <a href="http://ckeditor.com">CKEditor</a>.</p>';
CKEDITOR.replace('editor');
}
</script>
</head>
<body id="main">
<input type="button" id="button" onclick="othertext();" value="NewText" />
<br>
<textarea id=noteditor>
<h1>
Hello world!
</h1>
<p>
I'm an instance of <a href="http://ckeditor.com">CKEditor</a>.
</p>
</textarea>
<br>
<textarea name=text id=editor>
<h1>
Hello world!
</h1>
<p>
I'm an instance of <a href="http://ckeditor.com">CKEditor</a>.
</p>
</textarea>
<script type="text/javascript">
CKEDITOR.replace('editor');
</script>
</body>
</html>
当我点击按钮时,按钮的值发生变化,与第一个文本区域(id=noteditor)相同。
但是textarea(id=editor)不受影响。
为什么?
在调试器中,当执行函数 othertext 中的 "CKEDITOR.replace('editor1');" 行时,我得到
我做错了什么?
我找到了解决问题的方法! 偶然的机会,我在这里找到了问题的答案:"Using CKEditor API" 下的 http://sdk.ckeditor.com/samples/api.html。 我在下面重写了我的第一个代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor Sample</title>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
function SetContents() {
// Get the editor instance that you want to interact with.
var editor = CKEDITOR.instances.editor_Area1;
var value = document.getElementById('HTMLArea' ).value;
// Set editor content (replace current content).
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData
editor.setData( value );
}
</script>
</head>
<body id="main">
<input type="button" id="button" onclick="SetContents();" value="Set text" />
<br>
<textarea id=HTMLArea>
<h1>
Hello other world!
</h1>
<p>
I'm an other instance of <a href="http://ckeditor.com">CKEditor</a>.
</p>
</textarea>
<br>
<textarea name=text id=editor_Area1>
<h1>
Hello world!
</h1>
<p>
I'm an instance of <a href="http://ckeditor.com">CKEditor</a>.
</p>
</textarea>
<script type="text/javascript">
CKEDITOR.replace('editor_Area1');
</script>
</body>
</html>
单击按钮时,编辑区的内容被文本区 "HTMLArea" 中的 html 替换。