Question

我想构建自定义的wysiwyg，就像带有代码标记的stackoverflow wysiwyg一样。我创建代码按钮以应用写入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类。

Answer 1

如果我理解你想做什么：你想在点击按钮时应用自定义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。以上链接。

使用executeCommand应用自定义css类或id

1 个答案: