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

6 thoughts on “为Hdwiki4.0.5换个HTML编辑器!

  1. But, there are pros and cons associated with each designer product and eyeglasses are no exception.If you don some Louis Vuittion sunglasses you happen to be setting up a critical manner affirmation.
    [url=http://www.joecwilliams.com/sac-longchamps/sacoche-longchamps/sacoche-longchamps-106341.html]sacoche longchamps[/url]

  2. 我按你说的换了编辑辑,但图片在主页没有显示的,就是在推荐词条下的文章没有图,我的网站是www.100gen.com,请帮我看下,谢谢~·

    《如何在生活中修禅 》为新编辑器建的文章

Leave a Reply

Your email address will not be published. Required fields are marked *