I successfully incorporated the tinyMCE editor into my Vue.js Application.
init = {
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount',
'image imagetools',
],
toolbar:
'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | image code | help',
}
An issue arises when I try to click on options in the TinyMCE Editor, such as Paragraph. The options list drops down instead of appearing like a dropdown. https://i.sstatic.net/HZO5O.png
I attempted to utilize the class of the paragraph option and override the CSS associated with it, but it seems to be reverting back to the default CSS. Is there a method for effectively overriding the CSS of the options in the TinyMCE Editor?
#. Update I managed to successfully override the CSS
{
position: absolute;
left: 534.828px;
top: 312.203px;
max-height: 341px;
overflow: hidden auto;
min-width: 130px;
}
This was achieved by applying a media query to it
.tox .tox-menu.tox-collection.tox-collection--list {
top: -38rem !important;
left: 39rem !important;
}
Is there a more efficient way to achieve this without resorting to writing media queries?