Setting Up Line-Height via Tinymce

Setting up line-height via TinyMCE

As per my comment,

Someone else was experiencing an issue similar to yours and a member of the TinyMCE forums provided a solution:

http://www.tinymce.com/forum/viewtopic.php?id=28774

How to default font family, font size and line spacing in TinyMce?

1.Create a StyleSheet.css file and placed into CSS folder of your project.

2.put following style into StyleSheet.css

body
{
  font-family:Tahoma;
  font-size:11.5pt;
  line-height:100%;
}

3. Add follwing code to tinymce.init

tinyMCE.init({
    ...
     content_css: "/CSS/StyleSheet.css",
    ...
});

Decrease the line spacing in TinyMCE textarea

There is a css class that is applied to the TinyMCE html content. It looks like you have <p> tags causing the spacing. Honestly, it looks pretty good to me. But you can override in the css class:

.tinymce-content p {
    padding: 0;
    margin: 2px 0;
}

See the tinymce docs for more info.

tinyMCE - Can you configure an editor height below 100px?

After digging around a bit, it seems that you cannot configure the editor directly with a height below 100px. There is a workaround using the editor init callback to manually set the height. See http://tinymce.moxiecode.com/punbb/viewtopic.php?id=10015 for details.

tinyMCE.init({
    ...,
    setup: function(editor) {
        editor.onInit.add(function() {
            var width = editor.getWin().clientWidth;
            var height = 50;

            editor.theme.resizeTo(width, height);
        });
    }
});

How can I set the height of a tinymce text area?

You should set height of container object in CSS:

#inputText {
    height : 10000000px;
}

Custom TinyMCE 4.x button to increase letter spacing not working

You're using selection.getNode() which finds the common parent node of the start and end points of the selection. This is not the node that is in the current selection.

In your case you want the <span> you've created, but what you've actually asked for is its enclosing <p> (subsequently you're checking its current letter-spacing CSS value, which it won't have).

To correct this, after applying the formatting, grab the span (either created previously, or newly added), and set the current selection to it. You can do this using selection.getStart():

var spanNode = tinyMCE.activeEditor.selection.getStart();
tinymce.activeEditor.selection.select(spanNode);

When used after the tinymce.activeEditor.formatter.apply(), it will be the correct span.

Here's the updated code (I've made a number of other formatting changes):

<script type="text/javascript">
  tinymce.PluginManager.add('example', function(editor, url) {
    // Add a button that opens a window
    editor.addButton('example1', {
      text: 'Increase letter spacing',
      icon: false,
      onclick: function() {

        var currentSpacing = 0;
        var $selectedContent = $(tinyMCE.activeEditor.selection.getContent({'format': 'html'}));

        if ($selectedContent.is("span") && $selectedContent.css('letter-spacing')) {
          currentSpacing = +($selectedContent.css('letter-spacing').replace('px', ''));
        }

        currentSpacing += 1;

        tinymce.activeEditor.formatter.apply('letterSpacing', {
          value: currentSpacing + 'px'
        });

        var spanNode = tinyMCE.activeEditor.selection.getStart();
        tinymce.activeEditor.selection.select(spanNode);

      }
    });

    editor.addButton('example2', {
      text: 'Decrease letter spacing',
      icon: false,
      onclick: function() {

        var currentSpacing = 0;
        var $selectedContent = $(tinyMCE.activeEditor.selection.getContent({'format': 'html'}));

        if ($selectedContent.is("span") && $selectedContent.css('letter-spacing')) {
          currentSpacing = +($selectedContent.css('letter-spacing').replace('px', ''));
        }

        currentSpacing -= 1;

        tinymce.activeEditor.formatter.apply('letterSpacing', {
          value: currentSpacing + 'px'
        });

        var spanNode = tinyMCE.activeEditor.selection.getStart();
        tinymce.activeEditor.selection.select(spanNode);

      }
    });

    // Adds a menu item to the tools menu
    editor.addMenuItem('example', {
      text: 'Example plugin',
      context: 'tools',
      onclick: function() {
        // Open window with a specific url
        editor.windowManager.open({
          title: 'TinyMCE site',
          url: 'http://www.tinymce.com',
          width: 400,
          height: 300,
          buttons: [{
            text: 'Close',
            onclick: 'close'
          }]
        });
      }
    });
  });

  tinymce.init({
    selector: "textarea",
    plugins: "example",
    toolbar: "example1 example2 undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    formats: {
      'letterSpacing': {
        inline: 'span',
        styles: {
          'letter-spacing': '%value'
        }
      }
    }
  });
</script>

<form method="post" action="dump.php">
  <textarea name="content"></textarea>
</form>

Demo: http://fiddle.tinymce.com/wYfaab/2

---

Related Topics