如何自訂自己的Fck Editor..
2010-03-17 22:31
218 查看
此文對如何自訂 Fck Editor 做了一些介紹.
原文來自 : http://www.smart-thinker.com/Default.aspx?tabid=1070&EntryID=35
Objective: I wanted to customize the look of the FCK Editor on PokerDIY and allow users to select poker card icons as custom smileys in all modules that use the Rich HTML Editor, for example, Private Messages, the Poker Forums (in particular) and on all Wall posts (for example on Poker Player Profiles and Event Walls).
After reading my web usability book ("Steve Krug - Don't make me think!", highly recommend!) I also wanted to remove a lot of the options that the average poker player cares little about - e.g. "Paste from Word", "Tables" and the ubiquitous "Add Flash Object" ("Does a Flash Object beat a Straight?").
You can see the end result in the screenshot, or log in to PokerDIY and make a Wall post on your Wall to see the customized FCK editor (click on the Smileys icon to open the new smileys).
Lets start with adding a nice set of custom smileys - namely my cool poker cards! This is fairly simple to do (the hardest part was finding the right file to change and fighting my browser cache) :
Decide on the smiley set you want (either make your own or download some of the many free sets of smileys) Copy them to the following location under your DNN install: "\Providers\HtmlEditorProviders\Fck\FCKeditor\editor\images\smiley" (I made a new folder called "poker") Open the fckconfig.js (Back it up first!) file in Notepad under "\Providers\HtmlEditorProviders\Fck\Custom" Scroll down to the very bottom (or search for "FCKConfig.SmileyPath") Here you will see the current Smiley set (MSN) -
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;
FCKConfig.SmileyImages = ['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif'] ;
FCKConfig.SmileyColumns = 8 ;
FCKConfig.SmileyWindowWidth = 320 ;
FCKConfig.SmileyWindowHeight = 240 ;
You need to customize this to your new folder, for example, I changed mine to use my new icons in the "poker" folder (I copied the existing ones from "MSN" to "Poker" as they were nice too - I have removed some for clarity's sake):
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/poker/' ;
FCKConfig.SmileyImages = ['spade2.gif','spade3.gif','spade4.gif','spade5.gif','spade6.gif','spade7.gif','spade8.gif','broken_heart.gif','kiss.gif','envelope.gif'] ;
FCKConfig.SmileyColumns = 13 ;
FCKConfig.SmileyWindowWidth = 500 ;
FCKConfig.SmileyWindowHeight = 350 ;
I also increased the width, height and number of columns (13 spaded in a deck!) to make it more user-friendly.
Thats all there is to it - my users are going to love that - now on to the reduced toolbar:
Firstly, I want to mention Tom Kraak's article on customizing FCK toolbars - this is worth reading first to get an idea of how the process works. We going to go one step further and customize the buttons on one of the toolbars.
We are going to start with the Basic toolbar as it is the simplest already (you could modify any/all of them of course).
Before you start I would recommend opening your site as a user and as an admin (and any other roles you have) and identifying exactly WHAT you want to display on each toolbar for each role (my requirements are simple - I only have one role (user and admin see the same) and I want to make it as simple as possible, but still allow linking, smileys etc. Once you have done this, open the fckconfig.js again (under "\Providers\HtmlEditorProviders\Fck\Custom"). Search for "FCKConfig.ToolbarSets["Basic"]" This is the default, current Basic Toolbar layout. You can read Tom's article to learn how to show it instead of the other toolbars. If you look just above this section in the .js file you will see the other toolbars and you can work out what command relates to what icon on the toolbar (e.g. 'Smiley' is the Smiley icon).
Here is the original Basic toolbar
FCKConfig.ToolbarSets["Basic"] = [
['Smiley','Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
and here is my PokerDIY toolbar with the icons I wanted (I grabbed them from the options above and edited the file). You can see the scaled down toolbar in the screenshot below or log on to PokerDIY to test it.
FCKConfig.ToolbarSets["Basic"] = [
['FitWindow','Link','Unlink','-','Smiley','Image','Table','-','Bold','Italic','Underline','StrikeThrough','-','OrderedList','UnorderedList'],
['FontName','FontSize','TextColor','BGColor'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull','-','About']
Save the file and ensure that your Rich Text boxes are displaying the Basic editor (if this is the one you modified).
Notes:
The FCK custom editor options are notoriously tricky - they sometimes save and sometimes don't, and on a slow connection can contribute greatly towards hair-loss. I recommend trying this all locally first (clear your browser cache if the changes are not showing). I actually wanted to ADD a new custom toolbar type after "Basic" but I could not get this to work. Considering I only use 1 toolbar for all users I just edited the "Basic" toolbar. This also made the site easier to change. On upgrade the fckconfig.js file is overwritten, so remember to back your changed one up and replace it afterwards. Anyone know an easy way to preserve your changes on upgrade? I use the same FCK toolbar on Smart-Thinker but I refrained from adding the poker cards ;)
Hope this helps someone...
原文來自 : http://www.smart-thinker.com/Default.aspx?tabid=1070&EntryID=35
Objective: I wanted to customize the look of the FCK Editor on PokerDIY and allow users to select poker card icons as custom smileys in all modules that use the Rich HTML Editor, for example, Private Messages, the Poker Forums (in particular) and on all Wall posts (for example on Poker Player Profiles and Event Walls).
After reading my web usability book ("Steve Krug - Don't make me think!", highly recommend!) I also wanted to remove a lot of the options that the average poker player cares little about - e.g. "Paste from Word", "Tables" and the ubiquitous "Add Flash Object" ("Does a Flash Object beat a Straight?").
You can see the end result in the screenshot, or log in to PokerDIY and make a Wall post on your Wall to see the customized FCK editor (click on the Smileys icon to open the new smileys).
Lets start with adding a nice set of custom smileys - namely my cool poker cards! This is fairly simple to do (the hardest part was finding the right file to change and fighting my browser cache) :
Decide on the smiley set you want (either make your own or download some of the many free sets of smileys) Copy them to the following location under your DNN install: "\Providers\HtmlEditorProviders\Fck\FCKeditor\editor\images\smiley" (I made a new folder called "poker") Open the fckconfig.js (Back it up first!) file in Notepad under "\Providers\HtmlEditorProviders\Fck\Custom" Scroll down to the very bottom (or search for "FCKConfig.SmileyPath") Here you will see the current Smiley set (MSN) -
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;
FCKConfig.SmileyImages = ['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif'] ;
FCKConfig.SmileyColumns = 8 ;
FCKConfig.SmileyWindowWidth = 320 ;
FCKConfig.SmileyWindowHeight = 240 ;
You need to customize this to your new folder, for example, I changed mine to use my new icons in the "poker" folder (I copied the existing ones from "MSN" to "Poker" as they were nice too - I have removed some for clarity's sake):
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/poker/' ;
FCKConfig.SmileyImages = ['spade2.gif','spade3.gif','spade4.gif','spade5.gif','spade6.gif','spade7.gif','spade8.gif','broken_heart.gif','kiss.gif','envelope.gif'] ;
FCKConfig.SmileyColumns = 13 ;
FCKConfig.SmileyWindowWidth = 500 ;
FCKConfig.SmileyWindowHeight = 350 ;
I also increased the width, height and number of columns (13 spaded in a deck!) to make it more user-friendly.
Thats all there is to it - my users are going to love that - now on to the reduced toolbar:
Firstly, I want to mention Tom Kraak's article on customizing FCK toolbars - this is worth reading first to get an idea of how the process works. We going to go one step further and customize the buttons on one of the toolbars.
We are going to start with the Basic toolbar as it is the simplest already (you could modify any/all of them of course).
Before you start I would recommend opening your site as a user and as an admin (and any other roles you have) and identifying exactly WHAT you want to display on each toolbar for each role (my requirements are simple - I only have one role (user and admin see the same) and I want to make it as simple as possible, but still allow linking, smileys etc. Once you have done this, open the fckconfig.js again (under "\Providers\HtmlEditorProviders\Fck\Custom"). Search for "FCKConfig.ToolbarSets["Basic"]" This is the default, current Basic Toolbar layout. You can read Tom's article to learn how to show it instead of the other toolbars. If you look just above this section in the .js file you will see the other toolbars and you can work out what command relates to what icon on the toolbar (e.g. 'Smiley' is the Smiley icon).
Here is the original Basic toolbar
FCKConfig.ToolbarSets["Basic"] = [
['Smiley','Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
and here is my PokerDIY toolbar with the icons I wanted (I grabbed them from the options above and edited the file). You can see the scaled down toolbar in the screenshot below or log on to PokerDIY to test it.
FCKConfig.ToolbarSets["Basic"] = [
['FitWindow','Link','Unlink','-','Smiley','Image','Table','-','Bold','Italic','Underline','StrikeThrough','-','OrderedList','UnorderedList'],
['FontName','FontSize','TextColor','BGColor'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull','-','About']
Save the file and ensure that your Rich Text boxes are displaying the Basic editor (if this is the one you modified).
Notes:
The FCK custom editor options are notoriously tricky - they sometimes save and sometimes don't, and on a slow connection can contribute greatly towards hair-loss. I recommend trying this all locally first (clear your browser cache if the changes are not showing). I actually wanted to ADD a new custom toolbar type after "Basic" but I could not get this to work. Considering I only use 1 toolbar for all users I just edited the "Basic" toolbar. This also made the site easier to change. On upgrade the fckconfig.js file is overwritten, so remember to back your changed one up and replace it afterwards. Anyone know an easy way to preserve your changes on upgrade? I use the same FCK toolbar on Smart-Thinker but I refrained from adding the poker cards ;)
Hope this helps someone...
相关文章推荐
- 在CuteEditor中如何让用户来管理自己的文件夹
- 如何修改geditor的配置文件 -好像geditor没有文本格式的配置文件? 要使用dconf-editor来配置- geditor自己配置编码格式
- 在CuteEditor中如何让用户来管理自己的文件夹
- IE10 FCK Editor 不支持selectSingleNode 如何解决?
- 如何实现android清理后台时,自己的软件不被清理
- 【discuzX2】如何二次开发自己的程序?
- 程序员如何通过旅行让自己轻松赚钱实现财务自由
- 【完全指南】如何在Github上使用Hexo搭建自己的Blog
- 职业的秘密(10)如何面对自己内心的恐惧?
- 如何在Linux下添加自己的驱动
- 如何在工作中提高自己
- (转)在日企面试如何主动给自己加分
- 如何为Adobe Reader加入自己的书签
- Android 如何监听自己是否被卸载及卸载后打开的浏览器进行反馈功能的实现 --- 仿360卫士
- 如何有效的保护自己的手机被盗?
- 如何防止自己的子程序成为僵尸进程
- Js简介1——如何创建自己的js库
- 如何把oslo.config使用到自己的项目中
- 如何在java版的world wind加载自己的高程数据
- 如何在网上隐藏自己的IP地址