使用timymce编辑器只有一次文本区域

Use tinymce editor only once textarea

本文关键字：一次 文本 区域 timymce 编辑器 使用      更新时间：2023-09-26

我使用tinymce编辑器，我有4个文本区域在我的形式，当我使用tinymce改变我所有的文本区域编辑器，但我想改变只有一个我的文本区域编辑器。这是我的时间代码:

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

怎么能做到呢?谢谢你

阅读TinyMCE手册中的这篇文章。使用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>

这是一个有角度的解决方案:

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);   
  }
}
相关文章：