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.jsxLet’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-bundlerAnd 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.
Josh Letcher, Software Engineer
Josh Letcher joined Accusoft as a software engineer in support in 2016 after graduating from Stetson University with a degree in Computer Science and Mathematics. He was promoted to software engineer on the PrizmDoc team in November of that year and is currently working as a software engineer on the PrizmDoc Editor team. While in college, he had an internship focused on automated testing, where he gained the knowledge he uses to help with the testing efforts of Accusoft’s PrizmDoc family of products. When not programming, Josh enjoys playing video games, dancing, and playing with his dog Hazel.
Share This Article