document.execCommand()FontSize以像素为单位?

时间:2011-05-03 10:45:28

标签: javascript editor execcommand

如何使用document.execCommand将字体大小更改为30px(例如)?

此:

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

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

8 个答案:

答案 0 :(得分:17)

这是FontSize命令的限制。我能想到各种各样的选择:

  • 您可以使用CSS类,并使用我的CSS class applier库的Rangy模块;
  • 您可以使用hacky方法,例如调用document.execCommand("fontSize", false, "7");,然后查找命令创建的元素并根据需要更改它们。请参阅示例:http://jsfiddle.net/S3ctN/。这显然取决于文档中没有其他<font>个大小为7的元素,它还依赖于浏览器使用<font>元素作为字体大小,这似乎都是这样。

答案 1 :(得分:9)

<强>功能

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');

答案 2 :(得分:6)

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

只需将elem替换为您的元素,然后使用所需的值编辑font-size。

jQuery("font[size]", elem).removeAttr("size").css("font-size", "10px");

答案 3 :(得分: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>

答案 4 :(得分:1)

只需用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
    }
}

答案 5 :(得分:1)

这只是我的解决方案。它适用于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的fontsize必须至少为'12px'或更高。

答案 6 :(得分:0)

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

因此,它不必浏览DOM即可获得正确的元素,也不需要禁止使用特定的fontSize(7,如接受答案的第一个选项所建议,在其他答案中)。

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

总而言之,我们仅使用execCommand将选择范围包装为一个范围,以便对getSelection()的后续调用将突出显示的范围作为父范围。然后,我们只需将fontSize样式添加到已确定的跨度即可。

这里是直播DEMO

答案 7 :(得分:0)

在纯JavaScript中找到了一个解决方案,该解决方案可用于具有自定义HTML(颜色,字体系列)的多行​​。

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

这是功能:

io.on('connection', socket => {

   socket.on('message', message => {
       socket.to(message.socketId).emit('message', message);
   });

   socket.on('join', socketId => {
       socket.join(socketId);
   });

});

希望有帮助。