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了。
方法①:添加样式(目前不太成熟,但可以正常使用,在前台区必须将这些样式添加进去,前台区才能正常显示):
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;
}
①切换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() ;
}
完整代码:
<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内核有问题。
- 没有相关文章
- 没有评论