Ledzz / angular2-tinymce

Angular 2 component for TinyMCE MCE WYSIWYG editor
https://angular2-tinymce.surge.sh
66 stars 37 forks source link

Add new options #15

Closed reinaldovale closed 6 years ago

reinaldovale commented 7 years ago
"table_default_styles": { "width": "100%" },
"table_default_attributes": {
        "border": 1,
        "cellspacing": 0,
},

Thanks in advance

eryi commented 7 years ago

"branding" is missing as well

https://www.tinymce.com/docs/configure/editor-appearance/#branding

joshvito commented 7 years ago

+1 The src/angular2-tinymce.config.interface.ts does not include definitions for all of the options that are listed on the tinymce docs (https://www.tinymce.com/docs/plugins/).

To get around the type error, I created a config class and used the return of a .get() method as the passed in config object for the global config settings; e.g.

import { TinymceModule } from 'angular2-tinymce'; 
import { MyConfigClass } from '../path/to/MyConfigClass';
let myMceConfig = new MyConfigClass();

@NgModule({
  imports: [
    ...
    TinymceModule.withConfig(myMceConfig.getConfig())
  ],
  ...
})
export class AppModule { }
Ledzz commented 7 years ago

I tried to read all the docs but haven't succeed:) Thank you for feedback, if you have more options to add please write here.

reinaldovale commented 7 years ago

Thank you skin your time. In the link below, the documentation of the properties I need.

Https://www.tinymce.com/docs/plugins/table/

dottodot commented 7 years ago

Please can you add

imagetools_cors_hosts image_advtab

thanks

Jbz797 commented 7 years ago

Please also add :

cantuket commented 6 years ago

@joshvito

How did you get that to work. TypeSrcript is giving me this error on compile....

ERROR in src/app/app.module.ts(48,20): Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'TinyMCEConfigClass' was called.

Works fine in development though. This is the configuration I'm trying to implement...

  }
      plugins: ['image', 'code','link', 'table'],
      image_title: true, 
      min_height:400,
      file_picker_types: 'image', 
      file_picker_callback: function(cb, value, meta) {
          var input = document.createElement('input') as HTMLInputElement;
          input.setAttribute('type', 'file');
          input.setAttribute('accept', 'image/*');
          input.onchange = function() {
              var res = <HTMLInputElement>this;
              var file:File = res.files[0];
              var reader = new FileReader();
              reader.onload = function () {
              var base64 = reader.result.split(',')[1];
              // call the callback and populate the Title field with the file name
              cb('data:image/png;base64,'+base64, { title: file.name });
              };
              reader.readAsDataURL(file);
          };

          input.click();
      }
kynetiv commented 6 years ago

Please add option: ui_container

kynetiv commented 6 years ago

Well turns out, similar to @joshvito, I was able to get around missing options error with the following (which may help @cantuket get around the function call error.)


// assets/tinymce/TinymceConfigOptions.ts
export const TinymceConfigOptions = { 
  ui_container: '.ui-container-mce'
};

// app.module.ts
import {TinymceModule, TinymceOptions} from 'angular2-tinymce';
import { TinymceConfigOptions } from '../assets/tinymce/TinymceConfigOptions';

// use Type Assertion <TinymceOptions> to allow extra options not in the interface
const myTinymceConfig = <TinymceOptions>TinymceConfigOptions;

@NgModule({
  imports: [
    ...
    TinymceModule.withConfig(myTinymceConfig)
  ],
  ...
})