Rev. 2.73

KO GmbH에 의해서 시작된 WebODFOpenDocument Format(ODF)를 웹사이트에서 사용할 수 있도록 CSS와 HTML을 이용하여 문서를 출력하거나 생성할 수 있게 하는 자바스크립트 라이브러리입니다. 실시간 협업 편집 서비스인 ownCloud와 문서를 손쉽게 웹페이지에 추가할 수 있게 하는 ViewerJS 등에서 WebODF를 사용하고 있습니다.

ODF는 여러 업무용 애플리케이션에서 사용할 수 있도록 고안되었습니다. XML기반의 파일 포맷이고 스프레드시트, 차트, 프리젠테이션 그리고 워드 프로세싱 등의 사무용 문서를 저장할 수 있습니다. 이 파일 포맷은 Microsoft의 오피스에서 지원되며, 선 마이크로스시템즈OpenOffice에서 사용었고 지금은 순수 웹 브라우저만으로도 다룰 수 있게 된 것입니다.

이 라이브러리는 뷰어와 에디터로 구분하여 사용할 수 있는데, 단순히 ODF 파일을 보여주기만 할 것이라면 webodf.js를 로드하고 다음과 같이 코드를 작성하면 됩니다.

<html>
 <head>
  <script src="webodf.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
function init() {
  var odfelement = document.getElementById("odf"),
      odfcanvas = new odf.OdfCanvas(odfelement);
  odfcanvas.load("myfile.odt");
}
window.setTimeout(init, 0);
  </script>
 </head>
 <body>
  <div id="odf"></div>
 </body>
</html>

webodf.js는 여러 개의 자바스크립트가 하나로 합쳐져 만들어진 것입니다. 소스는 GitHub 리파지토리에서 확인하거나 다운로드 할 수 있으며, CMake를 이용하여 빌드하는 방법은 다음과 같습니다.

git clone https://github.com/kogmbh/WebODF.git webodf
mkdir build
cd build
cmake ../webodf
make webodf.js-target

에디터는 일반 편집과 협업 편집모드를 제공하며, Wodo.TextEditor라는 컴포넌트를 필요로 합니다. Wodo.TextEditor는 Dojo를 기반으로 작성되었으며, webodf.js를 포함하고 있습니다. 다음과 같은 코드로 페이지에 추가할 수 있습니다.

<head>
<!-- ... -->

<script src="wodotexteditor/wodotexteditor.js" type="text/javascript" charset="utf-8"></script>

<!-- ... -->
</head>
<body>
<!-- ... -->

<div id="editorContainer" style="width: 600px;height: 600px;"></div>

<!-- ... -->

<script type="text/javascript">
// ...

Wodo.createTextEditor('editorContainer', {
    allFeaturesEnabled: true,
    userData: {
        fullName: "Tim Lee",
        color:    "blue"
    }
}, function (err, editor) {
    if (err) {
        // something failed unexpectedly, deal with it (here just a simple alert)
        alert(err);
        return;
    }
    editor.openDocumentFromUrl("document.odt", function(err) {
        if (err) {
            // something failed unexpectedly, deal with it (here just a simple alert)
            alert("There was an error on opening the document: " + err);
        }
    });
});

// ...
</script>

<!-- ... -->

</body>

Node.js용 프로젝트인 Etherpad에서 제공하는 것과 같은 협업모드 편집은 웹소켓을 이용한 것으로 서버 컴포넌트가 필요하지만 서버-사이드의 소스코드는 공개되어 있지 않습니다. 단, "programs/editor/backend/pullbox"에 클라이언트-사이드에서 데이터 송/수신을 위한 구현한 코드가 포함했으니 참고하라고 하네요. 이 과정은100% 클라이언트(브라우저)에서 발생하며, 데이터를 서버로 전송하지는 않는다고 합니다.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar