20

如何使用 将字体大小更改为 30px（例如）document.execCommand？

这：

document.execCommand("fontSize", false, "30px");

不起作用，因为在函数 execCommand 的第三个参数中，它只允许我输入一个介于 1 到 7 之间的值。

4

9 回答 9

19

这是FontSize命令的限制。我能想到的有多种选择：

  • 您可以改用 CSS 类，并使用我的Rangy库的CSS 类应用程序模块；
  • 您可以使用 hacky 方法，例如调用document.execCommand("fontSize", false, "7");然后查找命令创建的元素并根据需要更改它们。参见示例：http: //jsfiddle.net/S3ctN/。这显然取决于<font>文档中没有其他大小为 7 的元素，并且它还依赖于浏览器使用<font>字体大小的元素，似乎它们都这样做了。
于 2011-05-03T13:59:20.360 回答
10

功能

var execFontSize = function (size, unit) {
    var spanString = $('<span/>', {
        'text': document.getSelection()
    }).css('font-size', size + unit).prop('outerHTML');

    document.execCommand('insertHTML', false, spanString);
};

执行

execFontSize(30, 'px');
于 2015-09-04T12:54:32.423 回答
7

作为第二个答案，建议在 execcommand 之后运行一些 jquery 并用您自己的标记替换。

只需用您的元素替换 elem 并使用所需的值编辑字体大小。

jQuery("font[size]", elem).removeAttr("size").css("font-size", "10px");
于 2012-09-12T15:03:15.727 回答
7

只需用 css 覆盖它：

font[size='7']{
    font-size: 20px; // or other length unit
}

或者，如果您使用 scss，您可以使用循环来生成从 1 到 7 的所有选择器：

@for $i from 1 to 7 {
    font[size='#{$i}']{
        font-size: $i * 2vw
    }
}
于 2018-06-15T14:51:13.670 回答
6

这是一个比这里提出的许多解决方案更好的解决方案，因为它直接从所选文本中获取要更改字体大小的元素。

因此，它不必浏览 DOM 来获取正确的元素，也不需要禁止使用特定的 fontSize（7，如已接受答案的第一个选项和其他答案中所建议的那样） ）。

function changeFont() {
    document.execCommand("fontSize", false, "7");
    var fontElements = window.getSelection().anchorNode.parentNode
    fontElements.removeAttribute("size");
    fontElements.style.fontSize = "30px";
}

总之，我们只是使用 execCommand 用 span 包装选择，以便随后对 getSelection() 的调用将突出显示的 span 作为 parent。然后我们只需将 fontSize 样式添加到确定的跨度。

在这里，由于我们使用的是 fontSize 命令，它不会被包裹在 a<span>中，而是包裹在 a 中<font>。

但这是一种通用方法，可以与 execCommand 的任何命令一起使用，后者只是作为一种方便的方式来包装选定的内容，即使在不同的元素之间也是如此。

这是一个现场演示

于 2019-04-12T17:59:18.017 回答
5

它只是我的解决方案。它适用于 chrome。该代码是在中国网站（eqxiu）中找到的。

第一的

document.execCommand("styleWithCSS", 0, true);
document.execCommand('fontSize', 0, '12px');

然后

jQuery.find('[style*="font-size: -webkit-xxx-large"],font[size]').css("font-size", "12px")

注意：传递给 execCommand 的字体大小必须至少为 '12px' 及以上。

于 2018-07-01T00:14:02.103 回答
2 

$(document).ready(()=>{
	var activeFontSize = 30;
	var oDoc = document.getElementById("editor");
	var style = document.createElement("style");
	document.body.appendChild(style);
	
	function setFontSize(value){
		$editor.focus();
		document.execCommand("fontsize", false, 20);
		activeFontSize = value;
		createStyle();
		updateTags();
	}

	function updateTags(){
		var fontElements = oDoc.getElementsByTagName("font");
		for (var i = 0, len = fontElements.length; i < len; ++i) {
			if (fontElements[i].size == "7") {
				fontElements[i].removeAttribute("size");
				fontElements[i].style.fontSize = activeFontSize+"px";
			}
		}
	}

	function createStyle(){
		style.innerHTML = '#editor font[size="7"]{font-size: '+activeFontSize+'px}';
	}

	function updateToolBar(args){
		$fontSize.val(args.fontsize);
	}

	var $fontSize = $("#fontSize");
	var $editor = $("#editor");

	$fontSize.on("change", ()=>{
		setFontSize($fontSize.val())
	})

	$editor.on("keyup", ()=>{
		updateTags();
	})

	//var i = 0;
	$editor.on("keyup mousedown", (e)=>{
		//i++;
		//console.log("e.target", e.target)
		try{
			var fontsize = $(window.getSelection().getRangeAt(0).startContainer.parentNode).css("font-size")
			fontsize = fontsize.replace("px", "");
			//document.execCommand("insertHTML", false, '<span class="font-size-detector'+i+'">X</span>');
			//var fontsize = $(e.target).css("font-size")//$editor.find(".font-size-detector"+i).css("font-size");
			//document.execCommand("undo", false, false);
			//$editor.focus();
			//console.log("fontsize", fontsize)
			updateToolBar({fontsize})
		}catch(e){
			console.log("exception", e)
		}
	})

	oDoc.focus();
	setFontSize(30);
})
.editor-box{box-shadow:0px 0px 1px 2px #DDD;max-width:500px;margin:0px auto;}
		.editor-tools{padding:20px;box-shadow:0px 2px 1px 0px #DDD}
		.editor-tools button{user-select:none;}
		#editor{height:200px;margin:10px 0px;padding:10px;font-size:14px;}
		#editor:focus{outline:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor-box">
	<div class="editor-tools">
		<label>Font Size: </label>
		<select id="fontSize" >
			<option value="10">10px</option>
			<option value="12">12px</option>
			<option value="14">14px</option>
			<option value="20">20px</option>
			<option value="22">22px</option>
			<option value="30" selected="true">30px</option>
			<option value="35">35px</option>
			<option value="40">40px</option>
			<option value="45">45px</option>
			<option value="50">50px</option>
		</select>
	</div>
	<div id="editor" contenteditable="true">Hello, this is some editable text</div>
</div>

于 2018-08-13T17:07:28.457 回答
1

在纯 JavaScript 中找到了一个解决方案，该解决方案适用于具有自定义 HTML（颜色、字体系列）的多行​​。

获取文档的选择。解析选择并从中保存 html 标记。然后使用 document.execCommand 将选定的 html 插入到具有内联样式的 div 中。使用 document.execCommand('insertHTML', false, html) 的另一个好处是您可以在所见即所得编辑器中撤消。

这是功能：

function fontSize(size) {

    var sel = document.getSelection(); // Gets selection

    var selectedHtml = "";
    if (sel.rangeCount) {
        var container = document.createElement("div");
        for (var i = 0, len = sel.rangeCount; i < len; ++i) {
            container.appendChild(sel.getRangeAt(i).cloneContents());
        }
        const children = container.getElementsByTagName("*")
        for(let child of children) {
            if(child.style.fontSize) {
                child.style.fontSize = `${size}px`
            }
        }
        selectedHtml = container.innerHTML;
    }

    let html = `<div style="font-size: ${size}px;">${selectedHtml}</div>`
    document.execCommand('insertHTML', false, html);
}

希望能帮助到你。

于 2019-05-12T20:48:43.173 回答
0

如果您想为编辑器设置默认字体大小，那么您可以这样做。

您必须使用content_style选项配置 TinyMCE CSS。

例如，以下配置会将默认字体大小设置为 12pt。

tinymce.init({
  /* ... */ content_style: "body {font-size: 12pt;}",
});

请记住，这些样式特定于编辑器内的内容 - 如果您也希望它成为已发布内容的默认大小，您必须确保将相同的样式应用于那些已发布的页面。

希望能帮助到你。

于 2021-09-23T11:40:23.340 回答