Применить пользовательский класс или идентификатор css с помощью executeCommand

Я хочу создать пользовательский wysiwyg, точно так же, как stackoverflow wysiwyg с тегом кода. Я создаю кнопку кода для применения стиля css, написанного в css-классе mycode, и я хочу применить с помощью executeCommand к нажатию кнопки. Я стараюсь, но это не сработало.Применить пользовательский класс или идентификатор 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>

любое предложение, как я могу применить пользовательский класс CSS, используя executecommand().

источник

2013-04-10 user2236292

Если я понимаю, что вы хотите сделать: вы хотите применить пользовательский 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 не нравится жесткое кодирование импорта, так что я просто вкл. вышеупомянутая ссылка.

источник

2013-04-15 13:37:00

Применить пользовательский класс или идентификатор css с помощью executeCommand

ответ

Смежные вопросы