3

我想构建自定义的所见即所得，就像带有代码标签的stackoverflow所见即所得。我创建代码按钮以应用写入 css 类的 css 样式，mycode并且我想使用 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().

4

1 回答 1

0

如果我了解您想要做什么：您想在单击按钮时应用自定义 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。上面的链接。

于 2013-04-15T13:37:00.747 回答