FCKEditor~使用Javascript

2008-04-02

5866
0
Javascirpt
2008-05-07

摘要:FCKEditor~使用Javascript

前天使用ASP的方式來呈現FCKEditor

覺得有一點美中不足的地方就是

當我載入頁面時載入FCKEditor的速度稍微慢一些

於是我在思考是不是可以在載入時讓其隱藏起來

當按某一個按鈕時才載入FCKEditor

因此看了FCKEditor的說明文件及Google了一下

似乎只能利用Javascript來達到我想要的功能

Step1

我們在<head>跟</head>之間置入

Step2

我們在<form>跟</form>之間置入

我們放2個DIV的目的是在於一個負責呈現FCKEditor，另一個則是將其隱藏起來

我們一開始預設是不載入FCKEditor，所以在FCKeditor這個DIV我們設其style="display:none"

接下來我們看Editor()這個function做什麼事

function Editor()

{

// Try to get the FCKeditor instance, if available.

var oEditor ;

if ( typeof( FCKeditorAPI ) != 'undefined' )

oEditor = FCKeditorAPI.GetInstance('DataFCKeditor') ;

// Get the _Textarea and _FCKeditor DIVs.

var eTextareaDiv = document.getElementById('sEditor') ;

var eFCKeditorDiv = document.getElementById('FCKeditor') ;

// If the _Textarea DIV is visible, switch to FCKeditor.

if ( eTextareaDiv.style.display != 'none' )

{

// If it is the first time, create the editor.

if ( !oEditor )

{

CreateEditor() ;

}

// Switch the DIVs display.

eTextareaDiv.style.display = 'none' ;

eFCKeditorDiv.style.display = '' ;

// This is a hack for Gecko 1.0.x ... it stops editing when the editor is hidden.

if ( oEditor && !document.all )

{

if ( oEditor.EditMode == FCK_EDITMODE_WYSIWYG )

oEditor.MakeEditable() ;

}

else

{

// Switch the DIVs display.

eTextareaDiv.style.display = '' ;

eFCKeditorDiv.style.display = 'none' ;

}

這個function主要有1個事情要做

就是如果FCKEditor未被建立的話，他會去呼叫CreateEditor這個function

然後把FCKeditor這個DIV呈現出現，把sEditor這個DIV 變成hide

接下來我們來看CreateEditor()

function CreateEditor()

{

// Copy the value of the current textarea, to the textarea that will be used by the editor.

//document.getElementById('DataFCKeditor').value = document.getElementById('DataTextarea').value ;

// Automatically calculates the editor base path based on the _samples directory.

// This is usefull only for these samples. A real application should use something like this:

// oFCKeditor.BasePath = '/fckeditor/' ; // '/fckeditor/' is the default value.

var sBasePath = 'fckeditor/' ;//'fckeditor/' ;

// Create an instance of FCKeditor (using the target textarea as the name).

var oFCKeditor = new FCKeditor('DataFCKeditor') ;

oFCKeditor.BasePath = sBasePath ;

oFCKeditor.Height = 300 ;

oFCKeditor.ToolbarSet = "UDefined"

oFCKeditor.ReplaceTextarea() ;

}

// The FCKeditor_OnComplete function is a special function called everytime an

// editor instance is completely loaded and available for API interactions.

function FCKeditor_OnComplete( editorInstance )

{

document.getElementById('BtnSwitchTextarea').disabled = false ;

}

在這邊我們就會去建立FCKEditor元件出來

利用我們剛才放在頁面上的textarea的id(DataFCKeditor)來當作FCKEditor的ID

利用oFCKeditor.ReplaceTextarea()來置換掉我們頁面上的textarea

到此我們只完成了2/3 還有最重要的還沒做就是我們的DataFCKeditor這個textarea沒有"name"

醬子我們在post出去後要怎麼取值呢?

而各位應該也有看到我在畫面上放了一個textarea，其為hide

沒錯我就是要將FCKEditor的值傳到這個textarea，醬子我們就可以透過這個textarea將值取出來

所以我們在form的事件裡加入onsubmit 的動作，讓他去執行轉換的動作

function PrepareSave()

{

if ( document.getElementById('sEditor').style.display == 'none' )

{

var oEditor = FCKeditorAPI.GetInstance('DataFCKeditor') ;

document.getElementById('DataTextarea').value = oEditor.GetXHTML() ;

}

到目前為止醬子我們就可以在post這一頁取到值了

取值的方式跟ASP一樣利用server.HTMLEncode(Request.Form("Data"))

詳細的程式碼如下

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=big5" />
    <link rel="stylesheet" href="all.css" />
    <script type="text/javascript" src="fckeditor/fckeditor.js"></script>
    <script language="javascript" type="text/javascript">
    function Editor()
    {
     // Try to get the FCKeditor instance, if available.
     var oEditor ;
     if ( typeof( FCKeditorAPI ) != 'undefined' )
  oEditor = FCKeditorAPI.GetInstance('DataFCKeditor') ;

     // Get the _Textarea and _FCKeditor DIVs.
     var eTextareaDiv    = document.getElementById('sEditor') ;
     var eFCKeditorDiv    = document.getElementById('FCKeditor') ;

     // If the _Textarea DIV is visible, switch to FCKeditor.
     if ( eTextareaDiv.style.display != 'none' )
     {
      // If it is the first time, create the editor.
      if ( !oEditor )
      {
       CreateEditor() ;
      }

      // Switch the DIVs display.
      eTextareaDiv.style.display = 'none' ;
      eFCKeditorDiv.style.display = '' ;

      // This is a hack for Gecko 1.0.x ... it stops editing when the editor is hidden.
      if ( oEditor && !document.all )
      {
       if ( oEditor.EditMode == FCK_EDITMODE_WYSIWYG )
        oEditor.MakeEditable() ;
      }
     }
     else
     {

      // Switch the DIVs display.
      eTextareaDiv.style.display = '' ;
      eFCKeditorDiv.style.display = 'none' ;
     }
    }

    function CreateEditor()
    {
     // Copy the value of the current textarea, to the textarea that will be used by the editor.
     //document.getElementById('DataFCKeditor').value = document.getElementById('DataTextarea').value ;

     // Automatically calculates the editor base path based on the _samples directory.
     // This is usefull only for these samples. A real application should use something like this:
     // oFCKeditor.BasePath = '/fckeditor/' ;    // '/fckeditor/' is the default value.
     var sBasePath = 'fckeditor/' ;//'fckeditor/' ;

     // Create an instance of FCKeditor (using the target textarea as the name).
        var oFCKeditor = new FCKeditor('DataFCKeditor') ;
        oFCKeditor.BasePath    = sBasePath ;
        oFCKeditor.Height    = 300 ;
        oFCKeditor.ToolbarSet = "UDefined"
        oFCKeditor.ReplaceTextarea() ;
    }

    // The FCKeditor_OnComplete function is a special function called everytime an
    // editor instance is completely loaded and available for API interactions.
    function FCKeditor_OnComplete( editorInstance )
    {
     document.getElementById('BtnSwitchTextarea').disabled = false ;
    }

    function PrepareSave()
    {
     if ( document.getElementById('sEditor').style.display == 'none' )
     {
      var oEditor = FCKeditorAPI.GetInstance('DataFCKeditor') ;
      document.getElementById('DataTextarea').value = oEditor.GetXHTML() ;
     }
    }

    </script>
</head>
<body>
    <form id="form1" method="post" action="FCKAction.asp" onsubmit="PrepareSave();">
        <div id="sEditor">
            <table width="784" border="1" cellpadding="3" cellspacing="0" bordercolor="#CCCCCC">
                <tr>
                    <td bordercolor="#FFFFFF" bgcolor="E1E4F2" align="center">
                        <input type="button" value="Show Editor" class="text2" onclick="Editor();">
                    </td>
                </tr>
            </table>
        </div>
        <div id="FCKeditor" style="display: none">
        <table width="784" border="1" cellpadding="3" cellspacing="0" bordercolor="#CCCCCC">
            <tr>
                <td bordercolor="#FFFFFF" bgcolor="E1E4F2">
                    <input id="BtnSwitchTextarea" type="button" disabled="disabled" value="Switch"  class="text2" onclick="Editor()" />
                </td>
            </tr>
            <tr>
                <td>
                    <textarea id="DataFCKeditor" cols="80" rows="20"></textarea>
                    <textarea id="DataTextarea" name="Data" cols="80" rows="20" style="width: 95%;display:none"></textarea>
                </td>
            </tr>
            <tr>
                <td align="center">
                    <input type="submit" value="Send" class="text2"/>
                </td>
            </tr>
        </table>
        </div>
    </form>
</body>
</html>

參照圖形

回首頁