Package Exports

aurelia-tinymce-wrapper

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (aurelia-tinymce-wrapper) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

aurelia TinyMCE

Aurelia TinyMCE HTML Editor Plugin

Installation

npm install aurelia-tinymce-wrapper --save
(aurelia-cli) add package to the dependencies in the aurelia.json file.

{
  "name": "aurelia-tinymce-wrapper",
  "path": "../node_modules/aurelia-tinymce-wrapper/dist/amd",
  "main": "index"            
},
{
  "name": "tinymce",
  "path": "../node_modules/tinymce",
  "main": "tinymce"
},
"timers"

create a fonts and img directory in the root of your project (if you dont already have them).
copy the contents of node_modules/tinymce/skins/lightgray/fonts to the fonts folder you created.
copy the contents of node_modules/tinymce/skins/lightgray/img to the img folder you created.

Usage

add the plugin to your main.ts file.

import environment from './environment';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .plugin('aurelia-tinymce-wrapper') //<-- This line
    .feature('resources');

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  if (environment.testing) {
    aurelia.use.plugin('aurelia-testing');
  }

  aurelia.start().then(() => aurelia.setRoot());
}

add the element to the view where you want to editor to go.

<template>
  <h1>My Html Editor</h1>
  <tiny-mce theme="modern" menubar="false" content="hello world"></tiny-mce> <!--This line-->
</template>

the same, inline version

<template>
  <h1>My Html Editor</h1>
  <tiny-mce inline theme="modern" menubar="false" content="hello world"></tiny-mce> <!--This line-->
</template>