使用Java脚本更改所选文本的行高 [英] Change the line height of the selected text with Javascript

问题描述

我正在尝试将自己的所见即所得编辑器编程为一个夏季项目。我正在尝试实现控制（单间距，双倍间距等）的线高功能。我创建了一个下拉菜单，允许用户在间距类型之间进行选择。但是，我似乎无法获得正确的Javascript，因为无论选择哪种选项，所选文本的行距都不会改变。有人可以看看我的Javascript并告诉我我哪里出了问题吗？如果可以的话，您能给我正确的Java代码以便我参考吗？谢谢！

I am trying to program my own WYSIWYG editor as a summer project. I am trying to implement the line height function that controls(single spacing, double spacing, etc). I have created the dropdown that will allow users to select between the types of spacing. However, I cannot seem to get the right Javascript, because the selected text does not change in line spacing at all no matter which option I choose. Can someone please take a look at my Javascript and tell me where I went wrong? If possible, can you give me the correct code for the Javascript so I can refer off of it? Thank you!

HTML（运行中）：

HTML(working):

 <select id="lineHeight" onchange="spacing(this)">
                                <option value="20px">20px</option>
                                <option value="80px">80px</option>
                                <option value="100px">100px</option>
                                <option value="200px">200px</option>
                            </select>

JavaScript（无效）

Javascript(not working)

function spacing(sel) {
        var text = editor.document.getSelection();
        text.style.lineHeight = sel.value;
    }

推荐答案

如果我了解您的意思，重新尝试做，也许这对您有用：

If I understand what you're trying to do, perhaps this will work for you:

function changeStyle( property, value ) {
    if ( window.getSelection().rangeCount ) {
        var range = window.getSelection().getRangeAt( 0 ),
            contents = range.extractContents(),
            span = document.createElement( 'span' );

        span.style[ property ] = value;
        span.appendChild( contents );
        range.insertNode( span );
        window.getSelection().removeAllRanges()
    }
}

#editor {
    width: 350px;
    max-height: 100px;
    padding: 20px;
    overflow-y: auto;
    background-color: #efefef;
    border: 1px solid #ddd
}

<p>
    <label for="lineHeight">Line Height: </label>
    <select id="lineHeight" onchange="changeStyle('line-height', this.value)">
        <option value="20px">20px</option>
        <option value="80px">80px</option>
        <option value="100px">100px</option>
        <option value="200px">200px</option>
    </select>
    <button onclick="changeStyle('font-weight', 'bold')">Bold</button>
    <button onclick="changeStyle('font-style', 'italic')">Italic</button>
    <button onclick="changeStyle('color', 'red')">Color</button>
    <button onclick="changeStyle('background-color', 'yellow')">Background</button>
</p>

<div id="editor" contenteditable>Change the line height of the selected text with Javascript:<br>Please note that this example should be completed.</div>

这篇关于使用Java脚本更改所选文本的行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！