将 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 一样,直到我尝试调整它的大小。
使用您的代码,编辑器标签的高度将分配给将在编辑器组件中创建的 iframe。现在,编辑器标签没有采用封闭 div 的高度,因此您看不到您想要的高度。
添加样式=“高度:100%;”到编辑器标签,那么它将具有包围 div 的高度,然后 iframe 将具有包围编辑器标签的高度。
我似乎无法在您的代码中找到错误,但我建议您不要像以前那样共享您的 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 或我正在使用的函数。这些服务用于我的特定目的,并且仅包含粘贴当前正在工作的确切代码。根据您的需要删除或修改。