WYSIWYG Editor

Teddy Editor

The Teddy Editor is a WYSIWYG markdown editor extension for Visual Studio Code (VS Code), forked from zaaack/vscode-markdown-editor, that is seamlessly integrated with Teddy. It enables content editors to manage and build static sites, using Teddy, entirely within VS Code.

Prerequisites

1. Install Teddy
2. Install VS Code

Installation

Visual Studio Marketplace

It is recommended to install the Teddy Editor extension via the Visual Studio Marketplace, as follows.

1. Open VS Code.
2. Select 'Extensions' from either the left menu, by selecting File > Preferences > Extensions, or by pressing CTRL + SHIFT + X.
3. In the search input box, search for and install 'Teddy Editor' (as illustrated in the following screenshot).

The direct link to the extension in the Visual Studio marketplace is https://marketplace.visualstudio.com/items?itemName=teddyful.teddy-editor.

Manual Installation

Alternatively you may install the Teddy Editor extension manually, as follows.

1. Visit https://github.com/teddyful/teddy-editor/releases
2. Download teddy-editor-${version}.vsix, where ${version} is the latest release version of Teddy Editor.
3. Open VS Code.
4. Select 'Extensions' from either the left menu, by selecting File > Preferences > Extensions, or by pressing CTRL + SHIFT + X.
5. Select the three dots ... besides the 'Extensions' title, and select 'Install from VSIX…'.
6. Navigate to and select the teddy-editor-${version}.vsix file that was downloaded in step 2.

Configuration

In order to build static sites using Teddy from within VS Code, the Teddy Editor extension must be properly configured.

1. Open VS Code.
2. Select File > Preferences > Settings.
3. Select Extensions > Teddy.
4. Under Teddy: Path, enter the absolute path to the local instance of Teddy (required).
5. Under Teddy: Site Name, enter the name of the site that you wish to build, for example travelbook (required).
6. Under Teddy: Theme Name, enter the name of the theme that you wish to use, for example bear (required).
7. Under Teddy: Build Options, enter any build options that you would like to use, for example --env local --minify-html. Please visit the build guide for a full list of available build options.

Usage

Markdown Editor

To open the Teddy Editor, simply right-click on any markdown file in the Explorer view in VS Code, and select Open with Teddy from the resultant context menu.

Build

To build the configured static site, simply select the button with the Teddy icon found in the toolbar of the Teddy Editor.

Credits

Teddy Editor is a fork of the fantastic Markdown Editor VS Code extension, created by Zack Young (zaaack), which in turn uses the amazing Vditor in-browser Markdown editor. Please check out both of these wonderful open-source software projects and, if you are able, consider donating to them to support the awesome open-source community.

• Vditor - in-browser Markdown editor.
• Markdown Editor - VS Code extension.