aurelia TinyMCE
Aurelia TinyMCE HTML Rich Text 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" "resources": "**/*.html" "name": "tinymce" "path": "../node_modules/tinymce" "main": "tinymce""timers"
- copy the directory
node_modules/tinymce/skins
to thescripts
folder. - If you get the error
plugin.load is not a function
go back toaurelia.json
and set build loader plugins stub to false
"loader": "type": "require" "configTarget": "vendor-bundle.js" "includeBundleMetadataInConfig": "auto" "plugins": "name": "text" "extensions": ".html" ".css" "stub": false
Usage
- add the plugin to your main.js file.
; { aureliause //<-- This line ; if environmentdebug aureliause; if environmenttesting aureliause; aureliastart;}
- add the element to the view where you want the editor to go.
- app.html :
My Html Editor <!--This line-->
- app.js :
; //Don't forget to import the theme you want to use { thiscontent = 'Hello World!'; }
- the same, inline version
- app.html :
My Html Editor <!--This line-->
- app.js :
; //Don't forget to import the theme you want to use { thiscontent = 'Hello World!'; }
Bindable attribute
content {string}
You can bind the content attribute, even with a two-way binding, like this :
${content}
options {object}
One of the most important attributes. It gives you access to Tincymce configuration options. You can find these options in the documentation on Tinymce's website. Here is an example:
- app.js :
;;;;;;;; { thisoptions = toolbar:"formatselect bold italic | bullist numlist | link unlink | image media | code" menubar:false plugins: 'link' 'paste' 'code''media''image''lists' branding: false hidden_input:true browser_spellcheck: true ; }
- app.html :
${content}
theme {string} - "modern"|"inlite"|"mobile"
Allows you to choose between the 3 available themes:"modern","inlite" and "mobile". "modern" is selected by default. If you choose the theme "inlite", you must also activate the attribute "inline". Conversely, the "mobile" theme cannot work with the "inline"attribute. To be able to use a theme, you must import it into your view-model.
- app.js :
; //Don't forget to import the theme you want to use { thiscontent = 'Hello World!'; }
- app.html :
My Html Editor <!--This line-->
inline
If present, activate inline mode. The inline mode only works with the themes "modern" and "inlite".
${content}
Localization
First you need to go to Tinymce's website to retrieve the language package file and the corresponding code : https://www.tinymce.com/download/language-packages/
Then you must import this file and activate the language selected in the configuration. Here is an example with french :
- app.js :
;; { thisoptions = language :'fr_FR' ; }
- app.html :
${content}