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 = "");
          });
        },
      }

CodePudding user response：

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:

https://fiddle.tiny.cloud/Pjiaab