2 回答

TA貢獻1865條經驗 獲得超7個贊
在你想要添加編輯器的頁面加上這些代碼,注意js的路徑
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',//editor1是你文本域的ID
{
skin : 'kama'//想要使用的皮膚
});
//]]>
</script>

TA貢獻1804條經驗 獲得超3個贊
ckeditor 3.3.1 編輯器使用說明
1、編輯器調用:
=======================================================================
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>
2、皮膚設置:【注意:腳本replace后的名稱要和編輯器名稱對應】
===============================皮膚一===================================
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',
{
skin : 'kama'
});
//]]>
</script>
===============================皮膚二===================================
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',
{
skin : 'office2003'
});
//]]>
</script>
===============================皮膚三===================================
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',
{
skin : 'v2'
});
//]]>
</script>
3、用戶界面顏色設置
===============================默認顏色===================================
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>
<script type="text/javascript">
//<![CDATA[
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor1',
{
extraPlugins : 'uicolor',
toolbar :
[
[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
[ 'UIColor' ]
]
});
//]]>
</script>
===============================#14B8C4顏色===================================
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<textarea class="ckeditor" cols="80" id="editor1" name="editor2" rows="10"></textarea>
<script type="text/javascript">
//<![CDATA[
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor2',
{
extraPlugins : 'uicolor',
uiColor: '#14B8C4',
toolbar :
[
[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
[ 'UIColor' ]
]
} );
//]]>
</script>
4、讓編輯器支持文件、圖片、Flash上傳的調用方法【注意:必須配合ckfinder使用】
===========================================================================
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<textarea class="ckeditor" cols="80" id="Content" name="Content" rows="10"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'Content',
{
filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl : '/ckfinder/core/connector/asp/connector.asp?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '/ckfinder/core/connector/asp/connector.asp?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '/ckfinder/core/connector/asp/connector.asp?command=QuickUpload&type=Flash'
});
</script>
5、ckeditor與ckfinder的配置【使用ckfinder必須安裝AspJpeg組件】
============================================================================
CKEditor圖片上傳功能開啟方法:
調用方法如下(假設CKFinder在網站根目錄,可以使用相對路徑):
CKEDITOR.replace( 'editor1',
{
filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
同時默認情況下是禁止上傳的,還需要打開CKFinder目錄下的config.php,CheckAuthentication()函數的權限值,如:CheckAuthentication = Session( "UserName" )
============================================================================
更改CKEditor圖片上傳路徑:
打開CKFinder目錄下的config.php,修改baseUrl = "/ckfinder/userfiles/"即可
=============================================================================
5、ckeditor與ckfinder的配置【使用ckfinder必須安裝AspJpeg組件】
============================================================================
CKEditor圖片上傳功能開啟方法:
調用方法如下(假設CKFinder在網站根目錄,可以使用相對路徑):
CKEDITOR.replace( 'editor1',
{
filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
同時默認情況下是禁止上傳的,還需要打開CKFinder目錄下的config.php,CheckAuthentication()函數的權限值,如:CheckAuthentication = Session( "UserName" )
============================================================================
更改CKEditor圖片上傳路徑:
打開CKFinder目錄下的config.php,修改baseUrl = "/ckfinder/userfiles/"即可
============================================================================
修改上傳文件名為日期時間格式:
找到ckfinder\core\connector\asp\CommandHandler目錄下的FileUpload.asp文件,查找下面語句
sFileName = oUFS.getFileNameWithoutExtension( sOriginalFileName ) & "(" & iCounter & ")." & sExtension
修改為
sFileName = year(date) & month(date) & day(date) & hour(time) & minute(time) & second(time) & "." & sExtension
修改后生成的文件名格式如:2010620164241.jpg
添加回答
舉報