用Javascript 把 HTML 转换为dokuwiki语法
- November 8th, 2010
- Posted in 学以致用
- Tags: dokuwiki : html : JavaScript
- Write comment
试了几个dokuwiki上的所见即所得编辑器（WYSIWYG），都不太理想。就想到做一个程序，能把HTML 语法转换为dokuwiki的语法。
编辑器我用的是CKEditor，看这里：如何在网页中嵌入CKEditor。Dokuwiki的语法看这里
首先先处理一下提交上来的数据
<html> <body> <head> </head> <?php $code = $_POST['editor']; $code=stripslashes($code); echo $code; ?> <script type="text/javascript" src ="wiki.js"></script> </body> </html>
用 stripslashes 把提交上来的数据里多余的"\"去掉，然后在调用一个 Javascript 文件，处理dokuwiki语法
处理<h1>,<h2>,<h3>,<h4>,<h5> 标签
var headers = ["h1","h2","h3","h4","h5"];
for(j=0; j < headers.length; ++j){
var str = headers[j];
replaceHead(str);
}
function replaceHead(header) {
var h = document.getElementsByTagName(header);
var p = document.createElement("p");
for (i=0; i< h.length; ++i) {
if(header == "h1") {
p.innerHTML = '====== ' + h[i].innerHTML + ' ======';
} else if(header == "h2") {
p.innerHTML = '===== ' + h[i].innerHTML + ' =====';
} else if(header == "h3") {
p.innerHTML = '==== ' + h[i].innerHTML + ' ====';
} else if(header == "h4") {
p.innerHTML = '=== ' + h[i].innerHTML + ' ===';
} else if(header == "h5") {
p.innerHTML = '== ' + h[i].innerHTML + ' ===';
}
h[i].parentNode.replaceChild(p, h[i]);
}
}
把<h>标签替换为相应的等号
替换<ul>和<ol>
function replaceList(){
var ul = document.getElementsByTagName("ul");
var ol = document.getElementsByTagName("ol");
var items = ul[0].getElementsByTagName("li");
var itemsOL = ol[0].getElementsByTagName("li");
ul[0].style.listStyle = "none";
ul[0].style.padding = "0px";
ol[0].style.listStyle = "none";
ol[0].style.padding = "0px";
for(i = 0; i < items.length; ++i){
items[i].innerHTML = " * " + items[i].innerHTML;
}
for(j = 0; j < itemsOL.length; ++j){
itemsOL[j].innerHTML = " - " + itemsOL[j].innerHTML;
}
}
这里主要用了CSS 改变了列表的显示样式。
处理链接和图片
function replaceImage(){
var img = document.getElementsByTagName("img");
var i = 0;
for (i = 0; i < img.length;){
var span = document.createElement("span");
span.innerHTML = "{{" + img[i].src + "?nolink}}"
img[i].parentNode.replaceChild(span, img[i]);
}
}
function replaceLink(){
var a = document.getElementsByTagName("a");
var i = 0;
for (i = 0; i < a.length;){
var span = document.createElement("span");
span.innerHTML = "[[" + a[i].href + "|" + a[i].innerHTML + "]]"
a[i].parentNode.replaceChild(span, a[i]);
}
}
处理文字标签
CKEditor 分别用<strong>, <em>, <u>, <strike>表示粗体，斜体，下划线和删除号。
function replaceTxtFormat(){
var txtFormats = ["strong","em","u","strike"];
var i,j;
for (i = 0; i < txtFormats.length; ++i){
var txt = document.getElementsByTagName(txtFormats[i]);
for(j=0; j < txt.length;){
var span = document.createElement("span");
if(txtFormats[i] == "strong"){
span.innerHTML = "**" + txt[j].innerHTML + "**";
} else if(txtFormats[i] == "em"){
span.innerHTML = "//" + txt[j].innerHTML + "//";
} else if(txtFormats[i] == "u") {
span.innerHTML = "__" + txt[j].innerHTML + "__";
} else if(txtFormats[i] == "strike") {
span.innerHTML = "<del>" + txt[j].innerHTML + "</del>";
}
txt[j].parentNode.replaceChild(span, txt[j]);
}
}
}
目前只做了这么几个基本语法的转换，以后有空继续更新
No comments yet.