[英]Use tinymce editor only once textarea
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.我正在使用 tinymce 编辑器,当我使用 tinymce 将所有 textarea 更改为编辑器时,我的表单中有 4 个 textarea,但我只想将我的 textarea 更改为编辑器。 it's my tinymce code:
这是我的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>
how can do it?怎么办? thank you
谢谢你
Read this article in the TinyMCE manual.阅读 TinyMCE 手册中的这篇文章。 Use
mode
either with specific_textareas
or exact
.使用
mode
与specific_textareas
或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: ...您的 HTML 可能如下所示:
<textarea id="myarea1" class="YourOwnEditor">This will be the editor!</textarea>
<textarea id="myarea2">This will not be an editor.</textarea>
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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.