Above is a screen of how it appears. The lineheight seems to be double
How do I reduce this lineheight on this vue editor?
Below is the config I'm using
tinyMyceConfig: {
skin: "bootstrap",
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: "h1 h2 bold italic strikethrough blockquote bullist numlist backcolor | link image media | " +
"undo redo| alignleft aligncenter alignright alignjustify | removeformat help",
menubar: false,
height: 600,
setup: (editor) => {
// Apply the focus effect
editor.on("init", () => {
editor.getContainer().style.transition =
"border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out";
});
editor.on("focus", () => {
(editor.getContainer().style.boxShadow = "0 0 0 .2rem rgba(0, 123, 255, .25)"),
(editor.getContainer().style.borderColor = "#80bdff");
});
editor.on("blur", () => {
(editor.getContainer().style.boxShadow = ""),
(editor.getContainer().style.borderColor = "");
});
},
}
If you would like to apply CSS to editor content, you can do so with the content_css
or content_style
options in your config:
https://www.tiny.cloud/docs/tinymce/6/add-css-options/#content_css https://www.tiny.cloud/docs/tinymce/6/add-css-options/#content_style
These options allow you to apply styling to editor content, but that styling is not then injected inline to the editor content. If you want it applied to the content when it is rendered later, you will need to load the same CSS/styling there too.
Here is a Tiny Fiddle demonstration of reducing the line-height with content_style
: