昨天在hdwiki论坛看到有童鞋挖出hdwiki曾经使用过kindeditor编辑器,并且为hdwiki4.0.5成功更换强大的编辑器!可以来测试。。
模仿一下,我也在本地测试了下,还行
。
编辑页面模板是仿着词条页面模板来写的。
测试运行版本
hdwiki版本:4.0.5
kindeditor版本:3.3.1
editor.htm模板中嵌入编辑器的说明
<textarea id=”content” name=”content” style=”width:800px;height:300px;visibility:hidden;”>{$doc['content']}</textarea>
<script type=”text/javascript” charset=”utf-8″ src=”js/kindeditor/kindeditor.js”></script>
<script type=”text/javascript”>KE.show({id : ‘content’});</script>
这里配置文件单独写在一个js中来完成配置
<script type=”text/javascript” src=”js/kindeditor/keconfig.js”></script>
在kindeditor.js中添加“目录按钮”和“内链按钮”的插件(plugin)
关于插件的添加可以查看官方的说明文档
首先在kindeditor.js的以下位置
KE.lang = {
添加按钮对应的说明文字
innerlink : “内部链接”,
section : “目录”
然后在最后添加按钮对应的代码:
KE.plugin['section'] = {
click : function(id) {
KE.util.select(id);
KE.util.selection(id);
if (KE.browser == ‘IE’) {
var text=KE.g[id].range.text;
} else {
var text=KE.g[id].range.toString();
}
KE.util.insertHtml(id, ‘<div >’+text+’</div>’);
KE.util.focus(id);
}
};
KE.plugin['innerlink'] = {
click : function(id) {
KE.util.selection(id);
if (KE.browser == ‘IE’) {
var value=KE.g[id].range.text;
} else {
var value=KE.g[id].range.toString();
}
KE.util.insertHtml(id, ‘<a title=”‘+value+’” href=”index.php?doc-innerlink-’+encodeURI(value)+’”>’+value+’</a>’);
KE.util.focus(id);
}
};
为“插件”添加图标和定义内链在编辑器中的样式
.hdwiki_tmml {
float: left;
height: 14px;
font-size: 18px;
color: #333333;
font-weight: bold;
padding: 4px;
width: 95%;
margin-left: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #BFBFBF;
}
.ke-icon-innerlink {
background-image: url(button_link.png);
width: 23px;
height: 20px;
}
.ke-icon-section{
background-image: url(button_headline.png);
width: 23px;
height: 20px;
}
修改好的已经打包可下载使用
下载地址(可自行补全):/sa/kindeditor_for_hdwiki405.zip
Google code地址:http://luoyanglife.googlecode.com/files/kindeditor_for_hdwiki405_full.1.0.zip
补丁包说明
1、首先到kindeditor官方网站下载原版编辑器压缩包。http://www.kindsoft.net/down.php
2、解压原版编辑器(我下的是kindeditor-3.3.1)。
3、复制一份编辑器文件到网站js目录下比如(js\kindeditor)。
4、测试是否正确放置编辑器文件(http://hdwiki域名/js/kindeditor/examples/),测试完之后可以把examples目录删掉。
5、解压针对hdwiki4.0.5版本修改的补丁包。
6、可直接覆盖,也可以一个个覆盖
7、添加自己的广告到editor.htm中的右侧空区
补丁包对应的文件列表:
├─js
│ └─kindeditor
│ │ keconfig.js
│ │ kindeditor.js
│ │
│ └─skins
│ button_headline.png
│ button_link.png
│ default.css
│
└─view
└─default
editor.htm
editor.htm为重新编写的hdwiki4.05编辑器模板
keconfig.js为HTML编辑器kindeditor的自定义配置文件
button_headline.png和button_link.png分别为目录图标和内链图标(取自Mediawiki)
default.css为修改过的样式
default.css与kindeditor.js中修改过的地方都用注释做过标记/*add by clin003 */
补充:按照类似的办法可成功更换为ckeditor_3.0编辑器,内链按钮和目录还未测试。
20091008更新补充2:今天对keconfig.js配置文件中加入设置开启过滤功能同时可以选择保留的HTML标记和属性,也就是两个属性参数:
filterMode:’true’,
htmlTags : {
font : ['color', 'size', 'face', '.background-color'],
span : [
'.color', '.background-color', '.font-size', '.font-family',
'.font-weight', '.font-style', '.text-decoration', '.vertical-align'
],
div : [
'class', 'align', '.border', '.margin', '.padding', '.text-align', '.color',
'.background-color', '.font-size', '.font-family', '.font-weight',
'.font-style', '.text-decoration', '.vertical-align', '.margin-left'
],
table: [
'class', 'border', 'cellspacing', 'cellpadding', 'width', 'height', 'align',
'.padding', '.margin', '.border', 'bgcolor', '.text-align', '.color', '.background-color',
'.font-size', '.font-family', '.font-weight', '.font-style', '.text-decoration'
],
‘td,th’: [
'class', 'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor',
'.text-align', '.color', '.background-color', '.font-size', '.font-family', '.font-weight',
'.font-style', '.text-decoration', '.vertical-align'
],
a : ['class', 'href', 'target', 'name'],
embed : ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allownetworking', '/'],
img : ['src', 'width', 'height', 'border', 'alt', 'title', '.width', '.height', '/'],
hr : ['class', '/'],
br : ['/'],
‘p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6′ : [
'align', '.text-align', '.color', '.background-color', '.font-size', '.font-family',
'.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.text-indent', '.margin-left'
],
‘tbody,tr,strong,b,sub,sup,em,i,u,strike’ : []
}
对kindeditor.js中的插入flash默认大小进行调整,同时过滤掉AllowScriptAccess 参数(不设置AllowScriptAccess的值默认为“sameDomain”属于安全设置),插入的时候添加allowNetworking 参数,可以查看详细的 安全引用Flash视频,allownetworking=”internal” 参数的应用 介绍。
另外本地图片的上传路径需要自行在编辑器目录php下的upload.php中进行设置,参考设置办法(按照日期进行保存,可自行修改设置):
//文件保存目录路径
$save_path = ‘./../../../uploads/ke/’ . date(“Ymd”) .’/';
//文件保存目录URL
$save_url = ‘http://luoyanglife.com/baike/uploads/ke/’.date(“Ymd”) .’/';
当然这些仅仅在js端做的过滤是可以被绕过去的。。安全的做法是在服务端对接收的数据做过滤。
20091008补充说明:修正IE下在不使用其他按钮的前提下,目录按钮不起作用
Wiki支持, 今日一点
hdwiki, HTML编辑器, kindeditor
新鲜评论