fckeditor字体、样式、接口、其它

1。这一页主要内容是字体相关:
     ①更换字体大小
      默认情况下,fckeditor使用的是相对字体,但个人不习惯,特别是到了前台,就乱了。
      (158行)FCKConfig.FontSizes        = '8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px' ;
     在FCKConfig.CoreStyles的后面加上(257行):
     FCKConfig.CoreStyles.Size =
    {
        Element        : 'font',
        Attributes    : { 'size' : '#("Size")' },
        Styles        : { 'font-size' : '#("Size","fontSize")' }
    } ;

   ②字体样式更紧凑一些,节省更大空间(['StyleSimple','FontFormatSimple','FontNameSimple','FontSizeSimple'],):
    添加:FCKConfig.Plugins.Add( 'simplecommands' ) ;将原来的样式换成上面的就OK了。

 
2。这一页主要内容是样式相关:
     方法①:添加样式(目前不太成熟,但可以正常使用,在前台区必须将这些样式添加进去,前台区才能正常显示):
     fckconfig.js  ------------> CustomStyles然后,添加一些样式:
         'Strong Emphasis' : { Element : 'strong' },
        'Emphasis' : { Element : 'em' },

        'Computer Code' : { Element : 'code' },
        'Keyboard Phrase' : { Element : 'kbd' },
        'Sample Text' : { Element : 'samp' },
        'Variable' : { Element : 'var' },

        'Deleted Text' : { Element : 'del' },
        'Inserted Text' : { Element : 'ins' },

        'Cited Work' : { Element : 'cite' },
        'Inline Quotation' : { Element : 'q' }
  
 完成后,请在editor\css\fck_editorarea.css上加上:
  code
{
    font-family: courier, monospace;
    background-color: #eeeeee;
    padding-left: 1px;
    padding-right: 1px;
    border: #c0c0c0 1px solid;
}

kbd
{
    padding: 0px 1px 0px 1px;
    border-width: 1px 2px 2px 1px;
    border-style: solid;
}

blockquote
{
    color: #808080;
}

 
3。这一页主要内容是接口相关:
     ①切换fckeditor窗口与textarea的并保持数据(详情请见_samples\html\sample13.html)。
     ②得到fckeditor框里数据的长度
function GetLength(){
     var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
    var oDOM = oEditor.EditorDocument ;
    var iLength ;

    if ( document.all )        // If Internet Explorer.
    {
        iLength = oDOM.body.innerText.length ;
    }
    else                    // If Gecko.
    {
        var r = oDOM.createRange() ;
        r.selectNodeContents( oDOM.body ) ;
        iLength = r.toString().length ;
    }

    alert( 'Actual text length (without HTML markups): ' + iLength + ' characters' ) ;
}

③得到fckeditor里的内容
function GetInnerHTML(){
    var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
    alert( oEditor.EditorDocument.body.innerHTML ) ;
}

④得到fckeditor里的内容(XHTML格式)  function GetContents(){
    var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
    // Get the editor contents in XHTML.
    alert( oEditor.GetXHTML( true ) ) ;        // "true" means you want it formatted.
}

⑤设置fckeditor里的内容:
function SetContents(){
    var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
    oEditor.SetData( 'This is the <b>new content<\/b> I want in the editor.' ) ;
}

⑥在当前光标处插入代码(请在本站搜索)

⑦执行命令
function ExecuteCommand( commandName ){
      var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
    oEditor.Commands.GetCommand( commandName ).Execute() ;
}

⑧自动收缩工具栏(先要设置oFCKeditor.Config['ToolbarStartExpanded'] = false)⑨⑩
function FCKeditor_OnComplete( editorInstance ){
    editorInstance.Events.AttachEvent( 'OnBlur'    , FCKeditor_OnBlur ) ;
    editorInstance.Events.AttachEvent( 'OnFocus', FCKeditor_OnFocus ) ;
}

function FCKeditor_OnBlur( editorInstance ){
    editorInstance.ToolbarSet.Collapse() ;
}

function FCKeditor_OnFocus( editorInstance ){
    editorInstance.ToolbarSet.Expand() ;
}




 
4。①多个fckeditor实例共享同一个工具栏,核心代码:oFCKeditor.Config[ 'ToolbarLocation' ] = 'Out:xToolbar' ;
       完整代码:
<script type="text/javascript" src="FCKeditor/fckeditor.js"></script>
<div id='tmp'></div>
<script type="text/javascript">
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.BasePath    = 'FCKeditor/';
oFCKeditor.ToolbarSet='Default';
oFCKeditor.Config['ToolbarLocation'] = 'Out:tmp';
oFCKeditor.Height='250';
oFCKeditor.Value    = 'http://blog.csdn.net/cathyeagle/archive/2006/11/18/1394208.aspx#515000不知道行不行,你试一下吧。在此我已经改为br了。' ;
oFCKeditor.Create() ;
var oFCKeditor = new FCKeditor( 'FCKeditor2' ) ;
oFCKeditor.BasePath    = 'FCKeditor/';
oFCKeditor.Height='250';
oFCKeditor.Config['ToolbarLocation'] = 'Out:tmp';
oFCKeditor.Value    = '' ;
oFCKeditor.Create() ;
</script>

  ②初始化时收缩工具栏
     fck.Config['ToolbarStartExpanded'] = false;

  ③如果修改FCKConfig.EnterMode = ‘p’;为<br>的话,在chrome内核中会无法复制剪切板中的内容。这也是我最近才发现的。至少我用firefox和opera11.64都是正常的,就chrome内核有问题。

 

 

  

300*300
  • 没有相关文章
  • 没有评论
 文章首页关于迷茫时代关于我写意人生
版权所有:迷茫时代 All rights reserved   
执行时间:0.00681 秒