With the new version of DocMaker 3.1, it is now pretty easy to create a word-a-like rich text box in your custom studio. In this blog post I will explain you how the use the API features and how easy it is to integrate them with a (free) rich text editor.

Getting the CSS from your document

First of all, when visualizing something on the web, most of the time you are using CSS. Therefore we have a property on the Document class which is called CssClasses. This property gives you all the available CSS styles that are neccesary for the visualization of paragraphs, characters, tables and cells.

It's important that you use this property to register all the CSS classes within your webpage. My recommendation would be that you create a HttpHandler that writes these CSS to your browser.

1
2
3
4
5
6
7
8
9
10
11
12
13

public class CssHandler : IHttpHandler, IRequiresSessionState
{  
   public void ProcessRequest(HttpContext context)
   {
       Record record = new Record(App);
       record.Load(RecordId);
       using (Document document = Document.CreateFromFile(record.Files.Master))
       {
           context.Response.ContentType = "text/css";
           context.Response.Write(document.CssClasses);
       }
   }
}

You can link it on your page like this:

1

<link id="DocMakerStylesheet" rel="stylesheet" type="text/css" runat="server" href="CssHandler.ashx" />

Extracting the HTML to your webpage

With the first step behind us, we can now focus on getting the HTML from your document and passing it to your asp.net application. First you should decide which editor you would like to use in your project. There are a lot of them available on the market. Some of them are free (CKEditor, TinyMce), but it's also possible you use one from Telerik or even Infragistics. We at ADAM use TinyMce because of its flexibility, but you can just pick one that suites you the best.

We have 2 main functions for working with Html, both available on story level inside a document. For getting the HTML from your document, you can call the ToHtml() function

1
2
3
4
5
6
7
8
9
10

 public void BindStoryHtmlToTextBox()
 {
  Record record = new Record(App);
  record.Load(RecordId);
  using (Document document = Document.CreateFromFile(record.Files.Master))
  {
   Story story = document.Stories.First();
   RichTextBoxEditor.Text = story.ToHtml();
  }
 }

In the code example whe have a normal asp.net textarea (which is converted to a rich text editor by TinyMce) that now contains all the HTML from your first story of the document. You can start editing your Html the 'rich text' way and save it with our second main function: FromHtlm()

1
2
3
4
5
6
7
8
9
10

 protected void ButtonSaveClicked(object sender, EventArgs e)
 {
  Record record = new Record(App);
  record.Load(RecordId);
  using (Document document = Document.CreateFromFile(record.Files.Master))
  {
   Story story = document.Stories.First();
   story.FromHtml(RichTextBoxEditor.Text);
  }
 }

The FromHtml() function has a string input parameter, containing the HTML from your rich text box. It will translate all the HTML to a proper InDesign document.

In summary, we have 3 important things you'll have te bear in mind when you start using the HTML capabilities within the DocMaker API

• First, you must register all the CSS classes from the document on your page.
• Second, you call the ToHtml() function from the story object, and put that result in your textarea
• And last you can use the FromHtml() function to save the edited text

And that's how simple it is to start using rich text editing with DocMaker