唐山網(wǎng)站建設(shè),唐山網(wǎng)站制作,唐山做網(wǎng)站,唐山網(wǎng)頁設(shè)計,唐山網(wǎng)站優(yōu)化,唐山網(wǎng)絡(luò)公司,唐山400電話業(yè)務(wù) 24小時熱線：15031560143 關(guān)于我們 | 網(wǎng)站模版 | 支付方式 | 網(wǎng)站地圖
這是國人編寫的優(yōu)秀輕巧的編輯器軟件！唐山網(wǎng)絡(luò)公司強烈推薦
下面闡述一下 ASP PHP JSP的使用方法：
分別測試了fckeditor和kindeditor這兩款，下面做一個簡單的說明：
[1].fckeditor編輯器對于從word復(fù)制過來的格式會亂掉，另外考慮其自身的安全問題，就沒用它了
[2].kindeditor則是js+html的編輯器，當(dāng)然另外如果你加入圖片上傳功能就要提供php或asp的腳本
[3].比較遺憾的是kindeditor只能傳圖片，其他附件無法上傳，不過如果加入這個功能也不難，可以參考image上傳來編寫
因此本次的重點就是講解kindeditor的使用，剛好這次同時使用了asp和php編寫，因此兩個都會分享。<!--more-->
1.ASP版KindEditor3.5.2使用方法及常見問題
使用的時候可以參考原版里面的asp/demo.asp來操作，這里要重點說明是關(guān)于調(diào)用編輯器代碼：
[javascript]
<script type="text/javascript" charset="utf-8" src="../keditor/kindeditor.js"></script>
<script type="text/javascript">
KE.show({
id : 'content',
// 這個是相對于/plugins/image目錄而言，一般保持默認(rèn)即可
imageUploadJson : '../../asp/upload_json.asp',
fileManagerJson : '../../asp/file_manager_json.asp',// 同上
allowFileManager : true,
afterCreate : function(id) {
KE.event.ctrl(document, 13, function() {
KE.util.setData(id);
document.forms['editForm'].submit();
});
KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
KE.util.setData(id);
document.forms['editForm'].submit();
});
}
});
</script>
[/javascript]
在asp要調(diào)用編輯器比較常見問題是圖片上傳問題，我說下我這個編輯器的配置目錄問題
(1).編輯器在根目錄，而我調(diào)用編輯器是后臺文章編輯，如下方式：
|--keditor # 放在根目錄防止爆后臺路徑
|--admin/newedit.asp
|--upload #上傳目錄放在根目錄防止暴露后臺地址
(2).在asp的2個上傳文件
keditor\asp\file_manager_json.asp # 圖片瀏覽
在該文件中，涉及到上傳目錄的設(shè)置問題，代碼如下：
[vb]
rootPath = "/upload/"
rootUrl = "../upload/"
[/vb]
keditor\asp\upload_json.asp # 圖片上傳
在該文件中，涉及到上傳目錄的設(shè)置問題，代碼如下：
[vb]
'文件保存目錄路徑
savePath = "/upload/"
'文件保存目錄URL
saveUrl = "../upload/"
[/vb]
(3)同時在編輯器中加入插入代碼的功能，具體不詳說，查看附件代碼
這樣子設(shè)置完目錄的結(jié)構(gòu)就不會出現(xiàn)"服務(wù)器出現(xiàn)故障"的提示，出現(xiàn)這個提示一般可能有以下幾種情況：
(1).上傳目錄設(shè)置問題
(2).從官方下載的版本默認(rèn)是utf-8格式，如果用到gbk中可能會出現(xiàn)這個錯誤提示
(3).程序本身出錯（沒有修改程序是不會這個問題！）
<a >點我下載:keditor 3.5.2 for asp Modify by 冷鋒</a>
2.PHP版KindEditor3.5.2使用方法及常見問題
PHP版的和ASP原理差不多就是在目錄設(shè)置有點不一樣，注意下就可以了，就不多說，只說下目錄結(jié)構(gòu)：
|--keditor # 更目錄
|--keditor/attached # 上傳目錄
|--system/newedit.php # 調(diào)用編輯器頁面目錄在后臺
目錄設(shè)置常見keditor/php目錄下兩個php文件，建議不要調(diào)整目錄結(jié)構(gòu)。我是先調(diào)試的PHP版通過了，可是后面我按PHP結(jié)構(gòu)目錄設(shè)置
發(fā)現(xiàn)不行，于是就另外調(diào)試了一種方法。
以上所說兩個版本在后臺上傳后能夠直接插入到編輯器中預(yù)覽，在前臺和后臺均可正常顯示圖片。當(dāng)然對于上傳附件你可以直接添加允許上傳的文件擴展名即可上傳附件。
<a >點我下載:keditor 3.5.2 for php Modify by 冷鋒</a>
插入代碼功能需配合syntax使用，前臺包含文章頁面調(diào)用如下代碼：
[javascript]
<script type="text/javascript" src="syntax/scripts/shCore.js"></script>
<script type="text/javascript" src="syntax/scripts/shLegacy.js"></script>
<script type="text/javascript" src="syntax/scripts/shBrushAll.js"></script>
<link type="text/css" rel="stylesheet" href="syntax/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="syntax/styles/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'syntax/scripts/clipboard.swf';
SyntaxHighlighter.all();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
[/javascript]
這樣后臺插入的代碼就可以顯示高亮的效果了。
1，首先去官網(wǎng)下載http://www.kindsoft.net/
2，解壓之后如圖所示：
由于本人做的是用的是JSP，所以ASP,PHP什么的就用不上了，直接把那些去掉然后將整個文件夾扔進Myeclipse，如圖：
里面有個報錯，估計是我自己IDE的問題，沒有處理照常使用。
3，就可以開工寫JSP了，下面把自己的一個JSP的代碼貼出來，頁面代碼神馬的不太規(guī)范，湊合著當(dāng)示例，能跑通就行;
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" href="kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="kindeditor/kindeditor.js">
</script>
<script charset="utf-8" src="kindeditor/lang/zh_CN.js">
</script>
<script charset="utf-8" src="kindeditor/plugins/code/prettify.js">
</script>
<script>
KindEditor.ready(function(K) {
var editor1 = K.create('textarea[name="article.content1"]', {
cssPath : 'kindeditor/plugins/code/prettify.css',
uploadJson : 'kindeditor/jsp/upload_json.jsp',
fileManagerJson : 'kindeditor/jsp/file_manager_json.jsp',
allowFileManager : true,
afterCreate : function() {
var self = this;
K.ctrl(document, 13, function() {
self.sync();
document.forms['example'].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
document.forms['example'].submit();
});
}
});
prettyPrint();
});
</script>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="menu">
<ul>
<li>
<a href="main.jsp">首頁</a>
</li>
<li>
<a href="jsp/update_password.jsp">個人信息</a>
</li>
<li>
<a href="jsp/article_add.jsp">提交論文</a>
</li>
<li>
<a href="article_returnList.action">審批論文</a>
</li>
<li>
<a href="#">后臺管理</a>
</li>
</ul>
</div>
<div id="mainContent">
<form name="example" method="post" action="article_add.action">
題目：
<input type="text" name="article.title">
<br />
內(nèi)容：
<textarea name="article.content1" cols="100" rows="8"
></textarea>
<br />
<input type="submit" name="button" value="提交" />
(提交快捷鍵: Ctrl + Enter)
</form>
</div>
<div id="footer">
Copyright 2012 by Lai Xuansi.
</div>
</div>
</body>
</html>