Vyčištění tabulky z MS Wordu v MSIE JavaScriptem

3. června 2004

•

Drtivá většina podkladů pro firemní nety je v současnosti dodávána v podobě souborů vytvořených programem MS Word. Převod takových souborů do (X)HTML může být i při využití různých utilitek docela zdlouhavá práce, především když jsou součástí textu objemnější tabulky. Vytvoříme proto jednoduchý doplněk, kterým lze tabulku vyčistit od nepotřebného balastu automaticky, takže ho mohou použít i úplní laici.

Řešení je vcelku logicky určeno pouze pro MSIE s povoleným JavaScriptem – je to daň za jednoduché a rychlé řešení, nehledě na to, že běžní uživatelé MS Wordu sotva využijí sofistikovanější způsoby editace obsahu (X)HTML. Připomínám to zejména proto, že v aplikaci není pro jednoduchost pracováno se standardizovaným DOM a jsou využity proprietární postupy Microsoft Internet Exploreru, mimo jiné i proto, že aplikace vznikala za běhu na koleně, jako reakce na aktuální potřeby uživatelů. A protože svůj účel plní, neměl jsem důvod její kód dále přepisovat a upravovat na „spisovný“ s metodou getElementById() a dalšími.

Čištění tabulky probíhá vizuálně v iframe, který je přepnutý do režimu editace obdobně, jako třeba již dříve popsaný HtmlTextBox (z této aplikace jsem použil i soubor stylu). Čištění je prováděno metodou replace(), která by měla pomocí regulárních výrazů z kódu vyřadit nepotřebné a nežádoucí části. Úprava tabulky pak probíhá v několika krocích:

uživatel zkopíruje do editační části tabulku, kterou předtím vložil do schránky z editoru nebo prohlížeče dokumentů MS Word
stiskne tlačítko vyčistit – kód je zbaven „smetí“, z tabulky jsou vyjmuty nepotřebné elementy a jejich atributy
vyčištěnou tabulku si uživatel opět zkopíruje do schránky a dále vloží kam potřebuje

Pro vyšší komfort jsou doplněna tlačítka pro lepší práci se schránkou, možnost posunu zpět a vpřed a také možnost zasáhnout přímo do HTML kódu tabulky. Do jisté míry je možné také ovlivnit co vše se z kódu odstraní, uživatel má proto k dispozici i zatrhávací políčka, pomocí kterých si zvolí důkladnost čištění – například je možné se pokusit zachovat tučné písmo. Prohlédněte si ukázku (zdrojový kód).

Zde je stránka s lištou ovládacích tlačítek, editačním iframe a zatrhávacími políčky. Vychází z výše zmíněného editoru – za pozornost zde snad stojí použití výrazu v definici výšky editačního pole height: expression(document.body.clientHeight-60), v libovolně velkém okně tak bude iframe vždy roztažen na maximum a současně ve stránce zbude místo pro ovládací prvky.

<html>
<head>
    <meta http-equiv=“content-type“ content=“text/html; charset=windows-1250″ />
    <title>Čistič tabulky z MS Word</title>
</head>
<body style=“background-color:buttonface;overflow:auto;margin:6px;padding:0px;“ onload=“cleaner.document.body.focus()“>
    <script type=“text/javascript“>
    .
    .
    </script>
    <link rel=“stylesheet“ media=“screen“ type=“text/css“ href=“HtmlTextBox.css“ />
    <span class=“btnPanel“>
      <img id=“imgViewSource“ title=“Režim HTML“ class=“imgBtn“ unselectable=“on“ onmouseover=“className=’imgBtnAct‘;“ onmouseout=“className=’imgBtn‘;“ onclick=“sourceHTML();“ src=“Images/Html.gif“ border=“0″ />
      <img src=“Images/Separator.gif“ class=“separator“ unselectable=“on“ alt=““ />
    </span>
    <span id=“lblFunctions“>
      <span class=“btnPanel“>
        <img id=“imgRemoveFormat“ title=“Vyčistit tabulku z MS Wordu od zbytečných tagů a "smetí"“ class=“imgBtn“ unselectable=“on“ onmouseover=“className=’imgBtnAct‘;“ onmouseout=“className=’imgBtn‘;“ onclick=“cleanTable();“ src=“Images/TableClean.gif“ border=“0″ />
        <img id=“imgCut“ title=“Vyjmout do schránky“ class=“imgBtn“ unselectable=“on“ onmouseover=“className=’imgBtnAct‘;“ onmouseout=“className=’imgBtn‘;“ onclick=“cutToClipBoard();“ src=“Images/Cut.gif“ border=“0″ />
        <img id=“imgCopy“ title=“Kopírovat do schránky“ class=“imgBtn“ unselectable=“on“ onmouseover=“className=’imgBtnAct‘;“ onmouseout=“className=’imgBtn‘;“ onclick=“copyToClipBoard();“ src=“Images/Copy.gif“ border=“0″ />
        <img id=“imgPaste“ title=“Vložit ze schránky“ class=“imgBtn“ unselectable=“on“ onmouseover=“className=’imgBtnAct‘;“ onmouseout=“className=’imgBtn‘;“ onclick=“pasteClipBoard();“ src=“Images/Paste.gif“ border=“0″ />
        <img id=“imgPastePlain“ title=“Vložit, vyčistit a připravit do schránky“ class=“imgBtn“ unselectable=“on“ onmouseover=“className=’imgBtnAct‘;“ onmouseout=“className=’imgBtn‘;“ onclick=“cleanFromClipBoard();“ src=“Images/PastePlain.gif“ border=“0″ />
        <img id=“imgUndo“ title=“Vymazat“ class=“imgBtn“ unselectable=“on“ onmouseover=“className=’imgBtnAct‘;“ onmouseout=“className=’imgBtn‘;“ onclick=“cleaner.document.body.innerHTML=“;“ src=“Images/Delete.gif“ border=“0″ />
        <img src=“Images/Separator.gif“ class=“separator“ unselectable=“on“ alt=““ />
      </span>
      <span class=“btnPanel“>
        <img id=“imgUndo“ title=“Zpět (CTRL-Z)“ class=“imgBtn“ unselectable=“on“ onmouseover=“className=’imgBtnAct‘;“ onmouseout=“className=’imgBtn‘;“ onclick=“cleaner.document.execCommand(‚Undo‘);“ src=“Images/Undo.gif“ border=“0″ />
        <img id=“imgRedo“ title=“Odvolat zpět“ class=“imgBtn“ unselectable=“on“ onmouseover=“className=’imgBtnAct‘;“ onmouseout=“className=’imgBtn‘;“ onclick=“cleaner.document.execCommand(‚Redo‘)“ src=“Images/Redo.gif“ border=“0″ />
        <img src=“Images/Separator.gif“ class=“separator“ unselectable=“on“ alt=““ />
      </span>
    </span>
    <iframe id=“cleaner“ style=“height:expression(document.body.clientHeight-60);width:100%“></iframe>
    <script type=“text/javascript“>
      cleaner.document.designMode=“On“;
    </script>
    <span style=“font-family:Arial,sans-serif; font-size:10px;white-space:nowrap;“>
      Pokusit se zachovat:
      <input type=“checkbox“ checked=“checked“ id=“brd“ title=“Ohraničení tabulky“ />
      <label for=“brd“>ohraničení</label>
      <input type=“checkbox“ checked=“checked“ id=“tpad“ title=“Odsazení buněk“ />
      <label for=“brd“>odsazení</label>
      <input type=“checkbox“ id=“tsize“ title=“Rozměry tabulky a buněk“ />
      <label for=“tsize“>rozměry</label>
      <input type=“checkbox“ id=“tcenter“ title=“Vodorovné zarovnání tabulky a buněk“ />
      <label for=“tcenter“>vodorovně</label>
      <input type=“checkbox“ checked=“checked“ id=“tvcenter“ title=“Svislé zarovnání tabulky a buněk“ />
      <label for=“tvcenter“>svisle</label>
      <input type=“checkbox“ id=“bold“ title=“Tučné písmo“ />
      <label for=“bold“>tučné</label>
      <input type=“checkbox“ id=“cursive“ title=“Kurzíva“ />
      <label for=“cursive“><i>kurzíva</i></label>
      <input type=“checkbox“ checked=“checked“ id=“underline“ title=“Podtržené písmo“ />
      <label for=“underline“><u>podtržené</u></label>
    </span>
</body>
</html>

Vyčištění tabulky provádí funkce cleanTable(). Do dočasného řetězce se načte obsah editačního pole a poté se prostřednictvím regulárních výrazů na několikero užití metody replace() kód tabulky vyčistí. Některá nahrazení jsou provedena jen při zatržení odpovídajícího políčka. Nakonec je vyčištěný obsah vrácen zpět jako zdroj editačního pole. Tvar jednotlivých regulárních výrazů jsem stanovil empiricky, podle mých testů by měl vyhovět pro dokumenty vytvářené v MS Office 2000/XP/2003 (Word, Excel), pravděpodobně však bude funkční i pro předchozí verze – ne vždy se však podaří zachovat zvolené formátování. Proto je možnost zachování formátování bez záruky s poznámkou „Pokusit se…“.

Funkce sourceHTML() slouží pro přepínání režimu editace – vizuální (wysiwyg) nebo zdrojového kódu (html). Pokud je zvolen režim zdrojového kódu, je navíc skryta lišta doplňkových funkcí, protože by v tomto režimu nepracovaly správně.

Následující funkce nejsou pro aplikaci nezbytně nutné, jde jen o určitou „bižuterii“, která vylepší komfort uživatele při čištění tabulky, jejím vkládání a kopírování. Je využit princip popsaný v článku JavaScript a data ve schránce Windows. Co která funkce dělá, je zřejmé z ukázky a tak je ani nebudu nějak zvláště pitvat.

V aplikaci se potom hodí tento čistič otevírat do nového okna bez nástrojových lišt, menu a adresního řádku, jak je popsáno v článku Nové okno a jeho parametry.