Hi, I am a fresher.Now I wanne to switch the FCK toolbar after its created in the page.
Just like the Demo on the FCKeditor HomePage:
http://www.fckeditor.net/demo/toolbar
but the Demo is use NET componet to load the ToolBar dynamic.
I just use JS function".ReplaceTextarea()";
After Its created, I try to reconfig it by a Button_onclick.
function Button_onclick(){
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.BasePath= '/fckeditor/';
oFCKeditor.ToolbarSet = 'Basic';
oFCKeditor.ReplaceTextarea() ;
}
but Its useless, and create another FCKeditor, 2 editor in one Page.
any one has solution for me? Really appreciate.
BestRegards,
Mead
Fri, 08/28/2009 - 02:56
#1
addition: How to clean the FCK editor
How to clean the FCK editor?
I think I can get the value in FCK, then clean the FCK editor which has created(with default toolbar),
and create another FCK with 'basic' toolbar.
set the textarea value into the new FCK(with 'basic' toolbar), at last.
But I can't find the API function to remove FCK editor.
any clue?
Re: How to "Select the toolbar to load", not use NET c
key code, following
<script src="fckeditor/fckeditor.js" type=text/javascript></script>
<script src="lib/jquery.js" type="text/javascript"></script>
<script language=javascript id=clientEventHandlersJS>
<!--
var sBasePath = '/fckeditor/' ;
var index = true;
function Button2_onclick(){
var content = getEditorHTMLContents("FCKeditor1");
$("#FCKeditor1").val(content);
$("iframe").remove();
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.BasePath = sBasePath ;
if(index==true)
{
oFCKeditor.ToolbarSet = 'Basic';
index=false;
}else{
oFCKeditor.ToolbarSet = 'Default';
index=true;
}
oFCKeditor.ReplaceTextarea() ;
}
function getEditorHTMLContents(EditorName) {
var oEditor = FCKeditorAPI.GetInstance(EditorName);
return(oEditor.GetXHTML(true));
}
function Button1_onclick() {
alert($("iframe").html());
$("iframe").remove();
$("a").html("OK");
}
//-->
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<div><textarea id="FCKeditor1" style="WIDTH: 100%; HEIGHT: 200px" name=FCKeditor1 rows=10 cols=80><p>This is some <strong>sample text</strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor</a>.</p></TEXTAREA>
////////////////////////////////////////<br>
<INPUT language=javascript id=Button2 onclick="return Button2_onclick()" type=button value=2 name=Button2></DIV>
<script type=text/javascript>
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.BasePath = '/fckeditor/';
oFCKeditor.ReplaceTextarea() ;
</script>
</body>
Re: How to "Select the toolbar to load", not use NET c
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head>
<title>mead</title>
<meta content=JavaScript name=vs_defaultClientScript>
<meta content=http://schemas.microsoft.com/intellisense/ie5 name=vs_targetSchema>
<meta content="Microsoft Visual Studio .NET 7.1" name=GENERATOR>
<meta content=VisualStudio.HTML name=ProgId>
<meta content="Microsoft Visual Studio .NET 7.1" name=Originator><LINK href="../sample.css" type=text/css rel=stylesheet >
<script src="fckeditor/fckeditor.js" type=text/javascript></script>
<script src="lib/jquery.js" type="text/javascript"></script>
<script language=javascript id=clientEventHandlersJS>
<!--
//fck的文件根目录
var sBasePath = '/fckeditor/' ;
//标记工具栏是basic还是default(复杂的)
var index = true;
function Button2_onclick(){
//获取FCK的内容(函数说明在下面)
var content = getEditorHTMLContents("FCKeditor1");
//将fck的内容填充到textarea中(保存原来的值)
//注意点:val("string")兼容ie,但是.html("string contnet")不兼容FF
$("#FCKeditor1").val(content);
//移除原来的FCK控件
$("iframe").remove();
//新建一个FCK
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.BasePath = sBasePath ;
//判断如果是basic的改为default,反之亦然
if(index==true)
{
oFCKeditor.ToolbarSet = 'Basic';
index=false;
}else{
oFCKeditor.ToolbarSet = 'Default';
index=true;
}
//FCK函数,替换textarea
oFCKeditor.ReplaceTextarea() ;
}
//函数功能:取出FCK的文本值
function getEditorHTMLContents(EditorName) {
//调用FCK的core_API,详细的调用官方的URL
//http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/JavaScript_API
var oEditor = FCKeditorAPI.GetInstance(EditorName);
//返回HTML文本
return(oEditor.GetHTML(true));
}
//-->
</script>
</HEAD>
<body>
<div><textarea id="FCKeditor1" style="WIDTH: 100%; HEIGHT: 200px" name=FCKeditor1 rows=10 cols=80><p>这是个工具条改变的测试程序,全部由js:JQuery和FCK组成,源代码有详细的注释<br>
用JQuery辅助持久化文本内容You are using <a href="http://www.fckeditor.net/">FCKeditor</a>.</p>
原理,
1,在网页载入时候,FCK会初始化一个编辑器(代码在文件尾部)<br>
2,单击id=button2会触发click事件Button2_onclick()<br>
3,先将FCK的内容保存到content中,用$("#FCKeditor1").val(content);填充textarea值,<br>
4,再次构造的FCK会默认读取textarea作为初始化的值....<br>
注意包含库文件<br>
fckeditor/fckeditor.js<br>
lib/jquery.js<br>
</TEXTAREA>
////////////////////////////////////////<br>
<INPUT language=javascript id=Button2 onclick="return Button2_onclick()" type=button value="改变工具条" name=Button2></DIV>
<script type=text/javascript>
//这里是原理1,第一步
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.BasePath = '/fckeditor/';
oFCKeditor.ReplaceTextarea() ;
</script>
</body>
</HTML>