Add a 3rd party Markdown Editor to your application

How To
1

In this post, I will illustrate how to use a 3rd party markdown editor in a Stadium application. I will be using SimpleMDE as my markdown editor.

Add the 3rd party library to your application

  1. Select the application node in the Application Explorer.
    image

  2. In the Property Grid, open the Head editor

    image
    image501×544 52.4 KB

  3. Type in the following and click SAVE:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

Display the markdown editor on the page

Use the 3rd party library to load the markdown editor into a textarea.

  1. Go to the page you want to add the editor on. I will be using the StartPage.
  2. Drag on a TextBox and name it myMarkdownEditor.
  3. Open the StartPage.Load script.
  4. Drag in a JavaScript action and set its Code property to:
    new SimpleMDE({ element: document.getElementById('StartPage_myMarkdownEditor') });
    P.S. The Code editor will show an error saying SimpleMDE is not defined. Do worry about this. It’s because the JavaScript linter is simply not aware of the 3rd party library at this point, but it will be at runtime.

If you preview your application at this point and navigate to the StartPage, you will see the markdown editor and be able to write some markdown in it. Press F9 to see the live preview of the markdown you are writing.

image
image1107×793 37.5 KB

Use the markdown in your application

Our next goal is to use the markdown the user wrote in the editor. In my example, we will simply display the raw markdown string in a MessageBox.

To accomplish this we need to be able to access the editor instance across scripts. We therefore need to create a global variable and store the SimpleMDE editor instance in that variable.

  1. Open the StartPage.Load script, select the Javascript action and change the Code property to:
    window.myEditorInstance = new SimpleMDE({ element: document.getElementById('StartPage_myMarkdownEditor') });
    Great! We now have access to the myEditorInstance across scripts and eventhandlers on that page.
  2. Select the StartPage, drag on a Button and set its Text property to Submit. Also click the ‘Create Eventhandler’ link to create a click eventhandler
    image
  3. Drag in a DisplayMessageBox action and set its
    • Buttons to OK
    • Message to = window.myEditorInstance.value()
  4. That’s it. Preview the application. Now when you write some markup and click the Submit button, the markup will be displayed in the message box as seen below.
    image
    image1472×956 45 KB

Here is the completed application. I built it using the Stadium Designer v5.23.2827.
UsingAMarkdownEditor.sapz (6.3 KB)

2 Likes