Skip to content

标签:JavaScript

修复列表问题

之前都说过了,是因为新加的功能造成的冲突。现在只要来修改一下新增加的CSS就可以了。

需要修改的文件是Dphighlighter.css,在FCKeditor\editor\css目录下。

只需要把正面的代码注释掉就OK了,简单吧?

[css]

/* 小冬修改,修复列表无效

.Content-body li {

list-style:disc

}

*/

[/css]

新增加的引用和代码功能在FCKeditor下并不是所见即所得,感觉总不爽。哈哈,期待吧。。有空改成所见即所得的。

Leave a Comment

把Blog升级到3.0.6.170

    这次升级比较彻底!并没有使用升级包,而是直接使用完整安装包。

    升级方法如下:

  1. 先在本地完成装最新版本PJBlog。
  2. 下载旧Blog数据库,还有所有附件(就是attachments目录)。
  3. 手工修改数据库,把数据库升级到3版本。
  4. 把之前旧版本修改过的文件作相应的修改。
  5. 哈哈,大功告成!!上传到空间去。。
  6. 更新Blog缓存。

    这次升级过程中遇到几个问题:

  1. 第一次手工升级数据库后Blog运行不正常。最终才查到是blog_Info表里的blog_postFile字段由“是/否”类型转到“数字”类型。
  2. FCKeditor高亮插件运行不正常,在编辑状态下可以显示行数,可是最终页面却没有了行数。经过几番波折才查到是最新的“引用”和“代码”功能的CSS有冲突,最后修改高亮插件的CSS解决。
  3. 默认并没有把“代码”功能放出来,顺便放出来。不过应该少用,一般都用高亮插件。

 

Leave a Comment

代码语法高亮在FCKeditor2.6.3上的问题

    这两天试升级Blog就这问题最麻烦了,试了一整晚都没有结果。

    一直报错,用FireBug调试显示第一行?/*语法错误。

    于是昨晚又搞了一下,最后才发现是我的编辑器的问题。因为我习惯使用TC作文件管理器,并且使用SynPlus插件编辑文件。这个编辑器对UTF-8格式和Unicode格式的支持有点问题。经常都把文件头识别错,会在前面多加一个“?”。

1 Comment

DOM示例3

    之前学习DOM的时候写的示例,已经发现了两个,现在把第三个也发布出来吧。主要是增加了鼠标操作,可以在DIV标签点击进行编辑。

 

[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> DOMDocument 对象示例3 </TITLE>

<STYLE type="text/css">

<!–

.JobFlow {

width: 102px;

position: relative;

background-color: #00CCFF;

padding: 1px;

float: left;

}

.JobStep {

background-color: #00FF99;

height: 100px;

width: 100px;

margin: 1px;

}

.EditDiv {

cursor: hand;

background-color: #00CCFF;

width: 100%;

height: 20;

}

.EditText {

width: 100px;

height: 18;

}

–>

</STYLE>

<SCRIPT language="javascript">

<!–

// XML 原形

var str = "<?xml version=’1.0′?><TS>" +

"<TT><TD>Kend</TD><TD>Programmer</TD></TT>" +

"<TT><TD>小明</TD><TD>技术员</TD></TT></TS>";

// 创建DOM对象并加载XML

var dom = new ActiveXObject("MSXML2.DOMDocument");

dom.loadXML(str);

// 获取DOM里顶层数据行数

var cols = dom.getElementsByTagName("TT").length;

// 动态产生表格并显示

function makeTable(){

var html = "";

// 获取DOM里顶层数据列表

var TTs = dom.getElementsByTagName("TT");

for (var i=0; i<TTs.length; i++)

{

// 获取DOM里第二层数据列表

var TDs = TTs.item(i).getElementsByTagName("TD");

html += "<div class=\"JobFlow\">";

html += "<div class=\"JobTitle\">Job_" + i + "</div>";

for (var j=0; j<TDs.length; j++)

{

html += "<div class=\"JobStep\">" +

"<div class=\"EditDiv\" OnClick=\"editText(" + i + "," + j + ", this);\">" + TDs[j].text + "</div>" +

// "<input size=’10’ type=’text’ onChange=’saveValue(" + i + "," + j + ", this.value);’ value=’" + TDs[j].text + "’ />" +

"<BR />ROW:" + i + "|COL" + j +

"|<a href=’JavaScript:insertAt(" + i + "," + j + ");’>Ins</a></div>";

}

html += "<div><a href=’JavaScript:insertAt(" + i + "," + j + ");’>Append</a></div>";

html += "</div>";

}

// 显示XML代码

document.getElementById("src").innerHTML = "<textarea style=’width:100%; height=100;’>" + dom.xml + "</textarea>";

// 显示HTML代码

document.getElementById("htmlsrc").innerHTML = "<textarea style=’width:100%; height=100;’>" + html + "</textarea>";

// 显示表格

document.getElementById("tt").innerHTML = html;

}

// 创建一个顶层数据

function makeCol() {

var TT = dom.createElement("TT");

var TD1 = dom.createElement("TD");

TD1.text = cols;

TT.appendChild(TD1);

return TT;

}

// 创建一个第二层数据

function makeNode() {

var TD = dom.createElement("TD");

TD.text = cols;

return TD;

}

// 创建一个顶层数据并加到表格最后

function appendCol() {

cols++;

var TS = dom.getElementsByTagName("TS").item(0);

TS.appendChild(makeCol());

makeTable();

}

// 创建一个顶层数据并插入到表格相应地方

function insertAt(x, y) {

cols++;

var TTs = dom.getElementsByTagName("TT");

var TT = TTs.item(x);

TT.insertBefore(makeNode(), TT.childNodes[y]);

makeTable();

}

// 处理编辑框Enter键和Escape键

function editKeyPress(e, x, y, edit){

if (e.keyCode == 13) { // Enter

saveValue(x, y, edit);

resetEdit(x, y, edit);

}

if (e.keyCode == 27) // Escape

resetEdit(x, y, edit);

}

// 保存表格上修改的数据

function saveValue(x, y, edit) {

if (x<0||y<0)

return;

var TTs = dom.getElementsByTagName("TT");

if (x>=TTs.length)

return;

if (y>=TTs.item(x).childNodes.length)

return;

TTs.item(x).childNodes[y].text = edit.value;

// 显示XML代码

document.getElementById("src").innerHTML = "<textarea style=’width:100%; height=100;’>" + dom.xml + "</textarea>";

}

// 重置div

function resetEdit(x, y, edit){

var tmpDiv = document.createElement("DIV");

tmpDiv.className = "EditDiv";

tmpDiv.onclick = "editText(" + x + "," + y + ", this);";

tmpDiv.innerHTML = edit.value;

edit.parentNode.outerHTML = tmpDiv.outerHTML;

}

// 动态编辑数据

function editText(x, y, div) {

if (x<0||y<0)

return;

var TTs = dom.getElementsByTagName("TT");

if (x>=TTs.length)

return;

if (y>=TTs.item(x).childNodes.length)

return;

var editBox = document.createElement("input");

editBox.type = "text";

editBox.className = "EditText";

editBox.value = TTs.item(x).childNodes[y].text;

editBox.onchange = "saveValue(" + x + ", " + y + ", this);";

editBox.onblur = "resetEdit(" + x + ", " + y + ", this);";

editBox.onkeypress = "editKeyPress(event, " + x + ", " + y + ", this);";

div.className = "";

div.onclick = "";

div.innerHTML = editBox.outerHTML;

div.childNodes[0].focus();

}

–>

</SCRIPT>

</HEAD>

<BODY>

<DIV style="height:30;">This page demo3 how to using DOMDocument</DIV>

<DIV style="height:30;">This demo for Job flow in an ERP project</DIV>

<TABLE border="1" align="center"><TR><TD>

<DIV id="tt" style="border:1; background-color:#00ccee;;">Dynamic Face</DIV>

</TD></TR></TABLE>

<DIV>XML Data</DIV>

<DIV id="src" style="width:100%;"></DIV>

<DIV>HTML source</DIV>

<DIV id="htmlsrc" style="width:100%;"></DIV>

<INPUT type="button" onClick="makeTable()" value="Make Table" /><INPUT type="button" onClick="appendCol()" value="Append Col" />

<INPUT name="textfield" type="text" id="textfield" onKeyPress="editKeyPress(event, 2, 3, this)">

</BODY>

</HTML>

[/html]

 

Leave a Comment

利用JavaScript动态修改select标签的内容

    标题写得非常简单,实现业务需求比较复杂。业务是这样的,一个页面,要同时修改多行记录。并且可以在这个页面实时添加记录。记录里有一下拉,下拉内容跟随记录行数变动,内容为某一字段。

    复杂吧?我这里说的只是一个小细节,这样的细节还可以多达10多个。真是晕啊。

    这里随便说一下啦,具体要贴代码才能说明白。

Leave a Comment

发布FCKeditor语法高亮插件

    语法高亮的插件已经使用一段时间了,感觉没什么大问题。现在也有网友问我什么时候可以下载,今天有点空,就把它打包放上来了。 

使用方法:

1、在您的FCKeditor的配置文件中(一般为fckconfig.js或custom.config.js)

配置其中的FCKConfig.ToolbarSets,添加HighLighter。

如:

    FCKConfig.ToolbarSets["review"] = [

        [‘HighLighter’,’Bold’,’Italic’,’Underline’,’StrikeThrough’,’Link’,’Unlink’,’Image’,’Rule’,’Smiley’,’TextColor’,’BGColor’]

    ];

当然,你可以放到别的工具栏,不过记得注意大小写。

 

2、根据你指定的plugin目录,注册plugin

如:

    // 代码语法高亮插件

    FCKConfig.Plugins.Add( ‘highlighter’, ‘zh-cn,en’ ) ;

3、OK,你会发现你的FCK工具栏的图片多了一个带有"ab"字母,黄底的图标。你就可以使用语法高亮显示功能了。

点击下载语法高亮的插件

8 Comments

JavaScript,真的是不错的脚本!

    这段时间看的<<JavaScript高级编程>>已经接近尾声了。我以前也搞过网页(用ASP比较多,当时ASP很火),写过网页脚本(JavaScript和VBScript都有写,不过还是以JavaScript为主),都是基于IE下的开发。有时需求也比较特殊,也经常要上网找资料。不过这次看这本书也学到了不少的新知识,对JavaScript有了较全面的了解和认识。

    前面说的JavaScript特殊语法http://myvnet.com/?p=43在这本书后面也有提到,不过只是当作优化的一种方式简单说了一下。ayeah网友也给我说了一下这语法叫JSON,其实它是ECMAScript 3rd的一个子集。目的是创建一种利于人类阅读也利于计算机解释的语法。

[javascript]

// JSON语法与传统ECMAScript语法简单比较

// 创建数组

// ECMAScript

var array = new Array;

array = ["Kend", "http://MyvNet.com"];

// JSON

var array = [];

array = ["Kend", "http://MyvNet.com"];

// 创建对象

// ECMAScript

var objMyvNet = new Object;

objMyvNet.author = "Kend";

objMyvNet.url = "http://MyvNet.com";

objMyvNet.goHomePage = function() { top.location.href = this.url; };

// JSON

var objMyvNet = {

author: "Kend";

url: "http://MyvNet.com";

goHomePage: function() { top.location.href = this.url; };

};[/javascript]

  可以看到JSON语法比传统的语法直观多了,也节省了很多空间。.js文件少点,下载的速度就可以快点。

Leave a Comment

再次修改FCKeditor

    这几天帖代码的时候发现先前添加的语法高亮插件在输入代码时不能输入TAB键, 今天抽个时间改了一下代码, 其实也比较简单, 就是处理一下onkeydown事件就可以了.

[javascript]

function codingKeyDown( event, obj ) {

// Process Tab key

var tabKeyCode = 9;

var keycode = event.keyCode;

if (keycode == tabKeyCode) {

if (obj.setSelectionRange) {

// mozilla

var s = obj.selectionStart;

var e = obj.selectionEnd;

obj.value = obj.value.substring(0, s) + "\t" + obj.value.substr(e);

obj.setSelectionRange(s + 1, s + 1);

obj.focus();

} else if (obj.createTextRange) {

// ie

document.selection.createRange().text="\t"

event.returnValue = false;

} else {

// unsupported browsers

}

if (event.preventDefault) // dom

event.preventDefault();

return false; // should work in all browsers

}

// Process Ctrl+A key for select all code

if ( event.ctrlKey && event.keyCode == 65 || event.keyCode == 97 ) {

document.getElementById("code").select();

return;

}

}[/javascript]

 

3 Comments

最近爱上看JavaScript了,呵呵

    可能是修改FCKeditor的原因吧, 在深入研究一些JavaScript后对它比较感兴趣. 最近也在看JavaScript的书,在 网上找了一本叫<<JavaScript高级编程>>(英文名:<<Professional JavaScript for Web Developers>>)的书. 结果看上瘾了, 发现电子书只有前六章, 竟然去书城买了一本书回来.

    个人觉得这本书不错, 讲得比较全面. 从语法到对象, 从定义对象到继承. 还讲到DOM(文档对象模型)/BOM(浏览器对象模型), 还有正则表达式和一些高级应用. 我现在才看到第5章.

  以前看到一些JavaScript的代码, 总看不惜语法, 像这样的代码:

[javascript]

var MyvNet = {

"Name": "Kend";

"URL": "http://MyvNet.com";

};[/javascript]

3 Comments