Skip to main content

Integrating PrizmDoc Editor and Using a Workflow in Your Application

Integrating PrizmDoc Editor and Using a Workflow in Your Application

For a little under a year now, I’ve been working on Accusoft’s recently released PrizmDoc Editor, and I’m really excited to see how our customers start to integrate it into their products! Originally I was going to be writing a post about how to get PrizmDoc Editor running and embedded into your app, but if you’ve seen our getting started guide you already know how easy it is.

Instead, I’m going to write a sample application with you that integrates the editor and goes through a pretty basic (but typical) workflow with it. If you haven’t already read the getting started guide, do that now and make sure you understand how to start the docker container. I’ll wait for you here.

Our goal will be to create an application called SketchyDocx that allows users to upload and edit DOCX files. We’ll use React to create the UI for the sample, style it with handdrawn.css, and (to keep things simple for purposes of the sample) Parcel to build the project. I chose to use yarn as my package manager, but npm works as well.

If you want to set up your project directory before getting to the code, this is what it will look like when we’re done:

/.../sketchydocx/
├── package.json
├── src
│   ├── components
│   │   ├── DocumentList
│   │   │   └── index.jsx
│   │   ├── EditorContainer
│   │   │   └── index.jsx
│   │   └── UploadArea
│   │       └── index.jsx
│   ├── config.json
│   ├── index.html
│   └── index.jsx

Let’s start by initializing the project and installing some dependencies:

yarn init
# Set up the project however you want, then:
yarn add react react-dom
yarn add -D parcel-bundler

And now let’s set up some scripts and a basic React app:

Package.json (yours will look slightly different depending on what you specified in yarn init):

{
 "name": "SketchyDocx",
 "version": "1.0.0",
 "description": "Sample application using PrizmDoc Editor",
 "main": "index.js",
 "author": "Joshua Letcher <jletcher@accusoft.com>",
 "license": "MIT",
 "scripts": {
   "start": "parcel src/index.html"
 },
 "dependencies": {
   "react": "^16.7.0",
   "react-dom": "^16.7.0"
 },
 "devDependencies": {
   "parcel-bundler": "^1.11.0"
 }
}

src/index.html

<!DOCTYPE html>
<html>
<head>
<title>SketchyDocx – PrizmDoc Editor Sample App</title>
<link rel=”stylesheet” type=”text/css” href=”http://fxaeberhard.github.io/handdrawn.css/handdrawn.css” />
</head>
<body>
<div id=”app”></div>
<img src=”data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7″ data-wp-preserve=”<script src=”index.jsx”></script>” data-mce-resize=”false” data-mce-placeholder=”1″ class=”mce-object” width=”20″ height=”20″ alt=”<script>” title=”<script>” />
</body>
</html>

src/index.jsx

import React from "react";
import ReactDOM from "react-dom";
class SketchyDocx extends React.Component {
render() {
return
Hello SketchyDocx!
;
}
}
var mountNode = document.getElementById("app");
ReactDOM.render(, mountNode);

If you go ahead and run yarn start now, Parcel will build the project for you and start a development server so you can navigate to it in your browser. The default location should be http://localhost:1234/.

Next up, we’ll upload documents into PrizmDoc Editor. I’ll show you how in the rest of my article here.