Question

我正在使用tinymce编辑器，当我使用tinymce将所有textarea更改为编辑器时，我在我的表单中有4个textarea但我想只更改一个我的textarea到编辑器。这是我的密码：

 <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>

怎么办？谢谢

Answer 1

阅读TinyMCE手册中的this article。将mode与specific_textareas或exact一起使用。

您的初始化代码应如下所示：

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

...或...

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

...您的HTML可能如下所示：

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

Answer 2

这是一个角度解决方案：

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);   
  }
}

仅使用tinymce编辑器一次textarea

2 个答案: