[英]document.execCommand() FontSize in pixels?
如何使用document.execCommand
将字体大小更改为 30px(例如)?
这个:
document.execCommand("fontSize", false, "30px");
不起作用,因为在 function execCommand 的第三个参数中,它只允许我输入一个介于 1 到 7 之间的值。
这是FontSize
命令的限制。 我能想到的有多种选择:
document.execCommand("fontSize", false, "7");
然后找到命令创建的元素并根据需要更改它们。 参见示例: http://jsfiddle.net/S3ctN/ 。 这显然取决于文档中没有其他大小为 7 的<font>
元素,并且它还依赖于浏览器使用<font>
元素来确定字体大小,似乎它们都这样做了。Function
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');
作为第二个答案,建议在 execcommand 之后运行一些 jquery 并用您自己的标记替换。
只需用您的元素替换 elem 并使用所需的值编辑字体大小。
jQuery("font[size]", elem).removeAttr("size").css("font-size", "10px");
只需用 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
}
}
这是一个比这里提出的许多解决方案更好的解决方案,因为它直接从所选文本中获取要更改字体大小的元素。
因此,它不必浏览 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 样式添加到确定的跨度。
在这里,当我们使用 fontSize 命令时,它不会被包裹在<span>
中,而是被包裹在<font>
中。
但这是一种通用方法,可以与 execCommand 的任何命令一起使用,后者只是作为一种方便的方式来包装选定的内容,即使在不同的元素之间也是如此。
这是一个现场演示
它只是我的解决方案。它适用于 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' 及以上。
$(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>
在纯 JavaScript 中找到了一个解决方案,该解决方案适用于具有自定义 HTML(颜色、字体系列)的多行。
获取文档的选择。 解析选择并从中保存 html 标签。 然后使用 document.execCommand 将选定的 html 插入到具有内联样式的 div 中。 使用 document.execCommand('insertHTML', false, html) 的另一个好处是您可以在所见即所得编辑器中撤消。
这是 function:
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);
}
希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.