tinymce.component.ts
3.43 KB
import { Component } from '@angular/core';
@Component({
template: `
<h2>Tiny Mce Two way Binding</h2>
<editor apiKey="uzbt478yqnylj2r2q44eh97rvsqmppn53wr58akhlurwzav9" [init]="init" [(ngModel)]="dataModel" cloudChannel="dev"></editor>
{{dataModel}}
`
})
export class TinymceComponent {
dataModel:string = `<!DOCTYPE html> <html> <head> </head> <body> <p><span style="background-color: #000080; color: #33cccc;"><strong><span style="text-decoration: underline;">sdsdsd</span></strong></span></p> <p> </p> <table style="border-collapse: collapse; width: 54.9891%; height: 149px;" border="1"> <tbody> <tr style="height: 49px; background-color: #8b32cf; border-color: #6231bd;"> <td style="width: 20%; height: 49px;">sadas <table style="border-collapse: collapse; width: 100%;" border="1"> <tbody> <tr> <td style="width: 33.3333%;"> </td> <td style="width: 33.3333%;"> </td> <td style="width: 33.3333%; background-color: #14b343;"> </td> </tr> <tr> <td style="width: 33.3333%;"> </td> <td style="width: 33.3333%;"> </td> <td style="width: 33.3333%;"> </td> </tr> <tr> <td style="width: 33.3333%;"> </td> <td style="width: 33.3333%;"> </td> <td style="width: 33.3333%;"> </td> </tr> </tbody> </table> </td> <td style="width: 20%; height: 49px;"><span style="background-color: #008080;">asdas</span></td> <td style="width: 20%; height: 49px;"><span style="color: #ccffff;">asdasasd</span></td> <td style="width: 20%; height: 49px;"> </td> <td style="width: 20%; height: 49px;"> </td> </tr> <tr style="height: 49px;"> <td style="width: 20%; height: 49px;"><span style="background-color: #003300;">asd</span></td> <td style="width: 20%; height: 49px;"> </td> <td style="width: 20%; height: 49px;">asdasd</td> <td style="width: 20%; height: 49px;"> </td> <td style="width: 20%; height: 49px;">asdas</td> </tr> <tr style="height: 49px;"> <td style="width: 20%; height: 49px;">asdasd</td> <td style="width: 20%; height: 49px;">dasd</td> <td style="width: 20%; height: 49px;">asda</td> <td style="width: 20%; height: 49px;"> </td> <td style="width: 20%; height: 49px;"> </td> </tr> <tr style="height: 49px;"> <td style="width: 20%; height: 49px;"> </td> <td style="width: 20%; height: 49px;"> </td> <td style="width: 20%; height: 49px;"> </td> <td style="width: 20%; height: 49px;">sdasd</td> <td style="width: 20%; height: 49px;">asd</td> </tr> </tbody> </table> <p> </p> <ol> <li>123asdasd</li> <li>123</li> <li>asd123</li> <li>123</li> <li>123</li> </ol> </body> </html>`
init:any = {
selector: 'textarea',
height: 500,
theme: 'modern',
plugins: 'print preview fullpage powerpaste searchreplace autolink directionality advcode visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount tinymcespellchecker a11ychecker imagetools mediaembed linkchecker contextmenu colorpicker textpattern help',
toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat',
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
],
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'
]
}
}