我想构建自定义所见即所得，就像带有代码标签的 stackoverflow 所见即所得一样。我创建代码按钮以应用写入 css 类 mycode 中的 css 样式，并且我想使用executeCommand 应用到按钮单击。我尝试过，但没有成功。
CSS代码
.mycode{
font-family:"Lucida Console", Monaco, monospace;
background-color:#d1d1d1;
padding:5px 10px;
}
JavaScript代码
function iFrameOn(){
richTextField.document.designMode = 'On';
}
function iCode(){
richTextField.document.execCommand("styleWithCSS", 0, false);
richTextField.document.execCommand(".mycode", 0, true);
}
和 HTML 代码
<body onLoad="iFrameOn();">
<input type="button" onClick="iCode()" value="Code">
<textarea style="display:none;" name="myTextArea" id="myTextArea" cols="100" rows="14"></textarea>
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe>
</body>
任何建议如何使用 executecommand() 应用自定义 css 类。
最佳答案
如果我明白你想要做什么:你想在单击按钮时应用自定义 CSS。
如果是这种情况，您必须以稍微不同的方式导入 CSS:
CSS:您可以看到开始时应用的 CSS 已正常完成，而那些我不想更改的 CSS 我使用 @import url
<!--
stylesheet
-->
<style type="text/css">@import url("stylesheets/default.css");</style>
<style type="text/css">@import url("stylesheets/social.css");</style>
<!-- cube style to allow CSS change -->
<style type="text/css">@import url("stylesheets/default-cube.css");</style>
<link rel="stylesheet" href="stylesheets/blackandwhite.css" />
然后，当我想加载不同的 CSS 文件时，我会更改 attr
jQuery
$('#changeco').click(function(){
$("link").attr("href", "stylesheets/colour.css");
return false;
});
要查看工作示例，请单击彩色/黑白框。
http://portfolio.chrisloughnane.net/
jsfiddle 不喜欢硬编码导入，所以我只是 inc。上面的链接。
关于jquery - 使用executeCommand应用自定义CSS类或id，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15918051/