为Hdwiki4.0.5换个HTML编辑器!

昨天在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下在不使用其他按钮的前提下,目录按钮不起作用