Use tinymce editor only once textarea

0
votes

I am using tinymce editor and i have 4 textarea in my form when i use tinymce change all my textarea to editor but i want change only one my textarea to editor. it's my tinymce code:

 <script type="text/javascript">
  tinymce.init({
   selector: "textarea",
    plugins: [
    "advlist autolink lists link image charmap print preview anchor",
    "searchreplace visualblocks code fullscreen",
    "insertdatetime media table contextmenu paste ",
    "textcolor"
   ],
  toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter   alignright alignjustify | bullist numlist outdent indent | link image | forecolor backcolor"
 });
  </script>

how can do it? thank you

2
javascriptjqueryhtmltinymce

2 Answers

1
votes

Read this article in the TinyMCE manual. Use mode either with specific_textareas or exact.

Your initialisation code should look like this:

tinyMCE.init({
    ...
    mode : "specific_textareas",
    editor_selector : "YourOwnEditor"
});

...or...

tinyMCE.init({
    ...
    mode : "exact",
    elements : "myarea1"
});

...and your HTML could look like this:

<textarea id="myarea1" class="YourOwnEditor">This will be the editor!</textarea>
<textarea id="myarea2">This will not be an editor.</textarea>
0
votes

this is a angular solution:

import { Component, OnInit, Input, OnDestroy, AfterViewInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { EditorFieldInfo } from '@app/shared/models/editorfieldinfo';

import 'tinymce';
declare let tinymce: any;

@Component({
  selector: 'rich-text-field',
  templateUrl: './rich-text-field.component.html',
  styleUrls: ['./rich-text-field.component.scss']
})
export class RichTextFieldComponent implements OnInit, OnDestroy, AfterViewInit {

  formControl: FormControl;

  editor: any;

  @Input()
  formGroup: FormGroup;

  @Input()
  fieldDefinition: EditorFieldInfo;

  constructor() { 
    this.fieldDefinition = { name: '??', description:'', placeholder:'', hint:'', fieldtype:'', length:0, defaultValue:'', listValues: null};      
  }

  ngOnInit(): void 
  {
    this.formControl = <FormControl> this.formGroup.get(this.fieldDefinition.name);         
  }
  
  ngAfterViewInit() { 
        
    tinymce.init({
      base_url: '/tinymce',
      suffix: '.min',
      selector: '#mce-' + this.fieldDefinition.name,
      toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent',
      menubar: 'edit insert format table tools', branding: false, placeholder: '',
      external_plugins: {'placeholder': '/assets/scripts/placeholder.min.js'},
      content_style: 'body {font-weight: 400;line-height:1.125;font-family:RO Sans,Calibri,sans-serif;letter-spacing:normal;}',
      setup: editor => { 
        this.editor = editor;              
      }      
    });      
  }

  ngOnDestroy() {
    tinymce.remove(this.editor);   
  }
}