CODEWITHSUNDEEP
javascripthtmlcsscontent-management
Avitus
Avitus

Reputation: 15968

Adding a custom style to content editor

I have the standard content editor that uses an iFrame as the text area and then onchange of dropdowns it performs:

idContent.document.execCommand(cmd,"",opt);

where "idContent" is the iFrame.

One of the dropdowns is supposed to be style but it performs a "formatBlock" command.

I have a custom style sheet. Is there a way for me to put styles that I've created into this style drop down? If not, I can have another dropdown for these custom styles but what is the command name to set those styles?

Here is the dropdown and javascript that I'm currently using:

 <select onchange="cmdExec('formatBlock',this[this.selectedIndex].value);this.selectedIndex=0">
<option selected>Style</option>
    <option value="Normal">Normal</option>
    <option value="Heading 1">Heading 1</option>
    <option value="Heading 2">Heading 2</option>
    <option value="Heading 3">Heading 3</option>
    <option value="Heading 4">Heading 4</option>
    <option value="Heading 5">Heading 5</option>
    <option value="Address">Address</option>
    <option value="Formatted">Formatted</option>
    <option value="Definition Term">Definition Term</option>
  </select>

 function cmdExec(cmd,opt) 
    {   
    idContent.document.execCommand(cmd,"",opt);
         idContent.focus();
    }

Upvotes: 2

Views: 621

Answers (1)

NeilC
NeilC

Reputation: 1390

It is possible to link a stylesheet to the document you are currently editing, assuming you have in the iframe a document in designMode. The stylesheet can contain the styles you like that you can apply by altering element CSS classnames or wrapping in an HTML element that has a classname. However you will not be able to apply it using the designMode commands. You'll have to use selections & ranges, and manually change the HTML mark-up to get your desired styling applied.

Read the following article on the general commands that you can apply: https://developer.mozilla.org/en/Midas

The following articles will explain advanced editing techniques using Selections & Ranges: https://developer.mozilla.org/en/DOM/Selection

https://developer.mozilla.org/en/DOM/range

Upvotes: 1

Related Questions