Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Text "Welcome to Deno" with Dinosaur emoji, as it appears when you run the welcome app.

Your first Deno app with WYSIWYG editing

Ben Long

July 29th, 2020

Written by

Ben Long
Ben Long

Category

How-tos & Tutorials

Deno is a simple, modern, and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust.

Whether you’re using Deno to build a CMS or the next popular real-time chat app, you’re most likely going to want a modern, robust, and reliable WYSIWYG editor for your users to enter text with. When you’re looking to innovate in your own ways, getting the rich text component right is the last thing you want to worry about.

Getting started with a WYSIWYG HTML editor in your applications is simple, and when building applications with Deno it’s no different. So let’s have a look at running your first Deno app and take it further from there.

Simple Deno app with WYSIWYG editor.

About Deno

Deno (an anagram of Node) was created by Ryan Dahl, who also created Node.js, to simplify the mounting complications that come with building Node projects. It was announced by Dahl in 2018 during his talk 10 Things I Regret About Node.js

Although Node.js has been a very successful platform for building web development tooling, building standalone web servers, and myriad other use-cases, it was designed in 2009 when JavaScript was a much different language. With the changing JavaScript language, and new additions like TypeScript, building Node projects has become more complex.

We feel that the landscape of JavaScript and the surrounding software infrastructure has changed enough that it was worthwhile to simplify. We seek a fun and productive scripting environment that can be used for a wide range of tasks.

Ryan Dahl, Bert Belder, and Bartek Iwańczuk

For a more detailed overview of Deno and its benefits, check out their blog post: Deno 1.0.

Your first Deno app

If you haven’t already, install Deno now. For example, I used Homebrew: 

brew install deno

Once Deno is installed, you can run this simple application, and if it’s installed and working correctly, you’ll be presented with the welcome message:

$ deno run https://deno.land/std/examples/welcome.ts
Welcome to Deno 🦕

On the Deno home page, there’s another simple example, that runs an application on localhost.

Create a file, for example called denoapp.ts, with the following code:

import { serve } from "https://deno.land/std/http/server.ts";
const s = serve({ port: 8000 });
console.log("http://localhost:8000/");
for await (const req of s) {
  req.respond({ body: "Hello World\n" });
}

Then run the following command:

deno run --allow-net denoapp.ts

When you open http://localhost:8000/ in a browser, you’ll see the message - “Hello World”.

Now have a way of serving HTML, so we can start marking things up and using JavaScript to make it even more interesting.

Your first Deno app with WYSIWYG editing

Continuing with the same example, adding a WYSIWYG editor to a Deno application is as easy as inserting the HTML from the TinyMCE quickstart. (Of course, it would be nicer to start separating these things out instead of mashing it all together in the one file, but for now, let’s just get it up and running.)

Remember to replace no-api-key with your own Tiny Cloud API key. If you haven’t yet got one, you can get a free API key now.

import { serve } from "https://deno.land/std/http/server.ts";
const s = serve({ port: 8000 });
console.log("http://localhost:8000/");
for await (const req of s) {
  req.respond({ body: "<!DOCTYPE html> \
    <html lang='en'> \
    <head> \
      <meta charset='utf-8'> \
      <meta name='viewport' content='width=device-width, initial-scale=1'> \
      <script src='https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js' referrerpolicy='origin'></script> \
      <script> \
        tinymce.init({ \
          selector: '#mytextarea' \
        }); \
      </script> \
    </head> \
    <body> \
    <h1>TinyMCE Quick Start Guide</h1> \
      <form method='post'> \
        <textarea id='mytextarea'><span style='font-family: "courier new", courier, monospace;'>Welcome to Deno 🦕</span></textarea> \
      </form> \
    </body> \
    </html>"
  });
}

Now, run the application again:

deno run --allow-net denoapp.ts

And when you open http://localhost:8000/ in a browser, you’ll see the WYSIWYG editor with its default config.

Simple Deno app with TinyMCE editor (default config).

From here, you can build almost anything. For example...

A Deno chat app with WYSIWYG editing

The best WYSIWYG editors are extremely powerful and flexible and can be configured to fit almost any use case for text entry in your apps.

In our next post, we demonstrate how we’ve added the TinyMCE WYSIWYG editor to a Deno chat app, adding the ability for users to add basic formatting, plus links, colors, lists, and emojis.

Deno chat app with TinyMCE WYSIWYG editing.

What next?

TinyMCE continues to be used and trusted in over 100M+ products worldwide - there is no limit to the types of products and use cases that can be implemented or enhanced with it. Check out 9 products you can build with TinyMCE.

For more information about configuring TinyMCE, we recommend starting with our article on how to customize the TinyMCE toolbar. There’s also loads of information about configuring TinyMCE in the Tiny documentation.

Javascript
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • Text "Insert Template" with corresponding icon above.
    How-tos & Tutorials

    Making the most of templates in TinyMCE

    by Marty Friedel in How-tos & Tutorials
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor