在fckeditor中,有一欄「樣式」,預設提供了「red title」「marker: yellow」等一組預設樣式。但是這樣的樣式通常並不能滿足我們的需要,這時候,我們就可以通過修改fckeditor的配置檔案來自定義樣式。修改方法有兩種,分別如下(示例的fckeditor版本號為2.6.4.1):
方法一:修改fckconfig.js檔案
開啟fckconfig.js檔案(在fckeditor目錄下),找到fckconfig.customstyles,可以看到如下定義:
fckconfig.customstyles = }
}; 這個就是預設的第乙個"red title"的樣式定義,其中element:'h3'表示此樣式使用標籤圍繞,styles中的hash值設定的是中的style屬性,所以這個樣式定義等價於這樣的html:
<
h3 style
="color:red;"
>
some words
h3>
那麼如果我們需要加乙個名為"tnt2 style"的樣式,並且顯示為粗體,同時style中的background-color為黃色,需要怎麼做呢?很簡單,依葫蘆畫瓢:
fckconfig.customstyles
= },
'tnt2 style
': }
}; 其生成的html等價於:
<
strong
style
="background-color: yellow"
>
some words
strong
>
以上這些只是設定外部標籤以及定義style,如果我有乙個現成的class需要引用呢?那麼只需要使用如下**:
fckconfig.customstyles
= },
'tnt2 style
': , attributes: }};
生成的html等價於:
<
strong
class
="tnt2"
style
="background-color: yellow"
>
some words
strong
>
從上面的**可以發現,其實就是定義了乙個attributes的屬性,attributes中可以定義標籤中的任意屬性,如size,width等等。
方法二:修改fckstyles.xml檔案
開啟fckstyles.xml檔案(和fckconfig.js位於同一目錄下),可以看到這是乙個根節點為,子節點為的配置檔案,如果要完成上面等價於
<
strong
class
="tnt2"
style
="background-color: yellow"
>
some words
strong
>的效果,只需要新增乙個style節點:
<
style
name
="tnt2 style 2"
element
="strong"
>
<
style
name
="background-color"
value
="yellow"
/>
<
attribute
name
="class"
value
="tnt2"
/>
style
>
其中:element
="strong"等同於方法一中的element:
'strong
';<
style
name
="background-color"
value
="yellow"
/>等同於方法一中的styles : ;
<
attribute
name
="class"
value
="tnt2"
/>等同於方法一中的attributes: 。
注意:fckconfig.js中使用的styles和attributes用的都是負數,而fckstyles.xml中使用的節點名稱是單數,如果有多個引數需要設定,就插入多個並列的標籤即可。
雖然是雕蟲小技,不過很實用,可以很好地提高客戶體驗,同時提高編輯效率。
FckEditor自定義按鈕
fckeditor自定義按鈕 1目錄2 修訂歷史紀錄 3 1 fckeditor簡介 4 2 使用fckeditor4 3 新增自定義按鈕4 一款比較好的網頁文字編輯器 2.請設定資料夾的user使用者的訪問許可權 3.在web.config中新增 4.新增對fredck.fckeditorv2.d...
FCKeditor自定義非空驗證
有時在使用fck的,需要對它做非空的驗證。以前一直是使用requiredfieldvalidator控制項來完成的。但是會有乙個小小的bug,在提交的時候第一次不能通過驗證。需要提交兩次才能通過。解決的辦法是禁用requiredfieldvalidator控制項的客戶端指令碼驗證功能。只在伺服器端驗...
android 自定義actionbar樣式和布局
1.首先,新增自定義的actionbar樣式 在style.xml中新增樣式actionbarstyle 2.在style.xml中新增activity的樣式customtheme,並在改樣式中設定actionbar的樣式為actionbarstyle 3.在manifest中為對應的activit...