TinyMCE 角高度 100% 不起作用

Question

将 TinyMCE 添加到我的项目中，但无法获取填充页面的高度。这是我的 html 页面，只是一个简单的全屏 div，里面有编辑器：

<div class="page-layout blank p-24" fusePerfectScrollbar>
    <editor
        apiKey="8zpue1x5ae105wdqusojcbzo6vov9mpymvixyf4375qv9mfk"
        [init]="{
            menubar: false,
            resize: true,
            height: '100%',
            min_height: 350,
            plugins: [
                'advlist autolink lists link image imagetools imagecharmap preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code'
            ],
            toolbar:
                'undo redo | formatselect | bold italic backcolor | \
                alignleft aligncenter alignright alignjustify | \
                bullist numlist outdent indent | removeformat | image'
            }"
    ></editor>

</div>

但是当它加载时，它开始就像我将高度设置为 0 一样，直到我尝试调整它的大小。

Answer 1

使用您的代码，编辑器标签的高度将分配给将在编辑器组件中创建的 iframe。现在，编辑器标签没有采用封闭 div 的高度，因此您看不到您想要的高度。

添加样式=“高度：100％；”到编辑器标签，那么它将具有包围 div 的高度，然后 iframe 将具有包围编辑器标签的高度。

Answer 2

我似乎无法在您的代码中找到错误，但我建议您不要像以前那样共享您的 api 密钥。该代码适用于我，因此您可以根据需要复制/粘贴和编辑：

<editor id="myTextarea" class="editor" apiKey="pasteYourApiKeyHere" [init]="{ 
    width: 600,
    height: 8000,
    plugins: [
      'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
      'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime',
      'media', 'table', 'emoticons', 'help'
    ],}" [(ngModel)]="initialContent" (ngModelChange)="onEditorContentChange()">
 </editor>

请注意，您可能不需要 ngModel 或我正在使用的函数。这些服务用于我的特定目的，并且仅包含粘贴当前正在工作的确切代码。根据您的需要删除或修改。