时间戳

首页 > 解决方案 > 从 ngx-editor 禁用特定项目

html - 从 ngx-editor 禁用特定项目

问题描述

我正在尝试从 ngx-editor 禁用特定项目，但它不起作用......

这是我的实际代码：

<app-ngx-editor [placeholder]="'Enter text here...'"
                     [enableToolbar]="true" [editable]="false"
                     [spellcheck]="true" [(ngModel)]="htmlContent"></app-ngx-editor>

当我设置“可编辑”=“假”时，工具栏的所有项目都被禁用......我怎样才能只禁用“视频”按钮？

标签： htmlcssangular

解决方案

我遇到了一些问题。我找到解决方案

<app-ngx-editor  [config]="editorConfig" [placeholder]="'Enter text here...'" [spellcheck]="true" [(ngModel)]="content"></app-ngx-editor>

在你的组件里面

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-new-job-offer',
  templateUrl: './new-job-offer.component.html',
  styleUrls: ['./new-job-offer.component.css']
})
export class NewJobOfferComponent implements OnInit {
    content = '<h1>Hello2</h1>';
    editorConfig = {
        editable: true,
        spellcheck: false,
        height: '10rem',
        minHeight: '5rem',
        placeholder: 'Type something. Test the Editor... ヽ(^。^)丿',
        translate: 'no',
        "toolbar": [
            ["bold", "italic", "underline", "strikeThrough", "superscript", "subscript"],
            ["fontName", "fontSize", "color"],
            ["justifyLeft", "justifyCenter", "justifyRight", "justifyFull", "indent", "outdent"],
            ["cut", "copy", "delete", "removeFormat", "undo", "redo"],
            ["paragraph", "blockquote", "removeBlockquote", "horizontalLine", "orderedList", "unorderedList"],
            ["link", "unlink", "image", "video"]
        ]
    };


  constructor() { }

  ngOnInit() {
  }

}

请记住将 [config]="editorConfig" 添加到您的 html 代码中的 app-ngx-editor 中。

在工具栏部分可以禁用一些无用的图标；）

推荐阅读