htmlArea

A directory of browser-based WYSIWYG editors

  MAIN
INDEX
SEARCH
POSTS
WHO'S
ONLINE
LOG
IN

Home: htmlArea 3 (beta): htmlArea 2 & 3 archive (read only): htmlArea v3.0 - Discussion:
Stylesheet Plugin Help


The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.

 


agf
User

Mar 30, 2004, 8:24 AM

Post #1 of 8 (1265 views)
Shortcut
Stylesheet Plugin Help Can't Post

I have been able to load different sytlesheets dynamically using some server side code & the CSS plugin. The dropdown is correctly populated, howerver I have two small problems.

1. You can only apply a style to a word that is wrapped in <pre> or whatever context you choose. Any way around that? If I copy / paste plain text in I can't apply a style

2. When I do wrap some text in <pre> the applied style does shows up in the HTML, but not in the editor.


kimss
User

Mar 30, 2004, 10:59 AM

Post #2 of 8 (1257 views)
Shortcut
Re: [agf] Stylesheet Plugin Help [In reply to] Can't Post


In Reply To
I have been able to load different sytlesheets dynamically using some server side code & the CSS plugin. The dropdown is correctly populated, howerver I have two small problems.

1. You can only apply a style to a word that is wrapped in <pre> or whatever context you choose. Any way around that? If I copy / paste plain text in I can't apply a style

2. When I do wrap some text in <pre> the applied style does shows up in the HTML, but not in the editor.



I myself found this function quite confusing untill I accually looked at the code, :) As noted you can only assign the styles on text in the <pre> element (or whats the word). Why? Because the CSS plygin is configured to do so. Look in the initialise part, and especially look for the red part.


Code
           combos : [ 
{ label: "Syntax",
// menu text // CSS class
options: { "None" : "",
"Code" : "code",
"String" : "string",
"Comment" : "comment",
"Variable name" : "variable-name",
"Type" : "type",
"Reference" : "reference",
"Preprocessor" : "preprocessor",
"Keyword" : "keyword",
"Function name" : "function-name",
"Html tag" : "html-tag",
"Html italic" : "html-helper-italic",
"Warning" : "warning",
"Html bold" : "html-helper-bold"
},
context: "pre"
},
{ label: "Info",
options: { "None" : "",
"Quote" : "quote",
"Highlight" : "highlight",
"Deprecated" : "deprecated"
}
}
]



If you alter this line to, eg.


Code
               context: "td"



Then the syntax highlighting will only apply to words inside the <td> element. When this is said I think the rest of the pieces will fall into place, :)

Kim Steinhaug
kim-at-steinhaug-dot-com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
www.steinhaug.com - www.easywebshop.no - www.webkitpro.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Norwegian office : +47 88 00 92 45, Swedish office : +46 31 704 43 40
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


agf
User

Mar 30, 2004, 11:51 AM

Post #3 of 8 (1254 views)
Shortcut
Re: [kimss] Stylesheet Plugin Help [In reply to] Can't Post

Ok, is there a way to apply a style to any bit of text within HTMLArea rather than having to use context?

I ended up scrapping the LABEL menu and using JSP to read a CSS off of a disk, and write it out to the OPTIONS:


kimss
User

Mar 30, 2004, 12:30 PM

Post #4 of 8 (1248 views)
Shortcut
Re: [agf] Stylesheet Plugin Help [In reply to] Can't Post

Hmm, not sure if I understand you correct. The CSS plugin comes with two options (two dropdown menues). The first one is the context highlighter and the second is normal styles. In my CMS system im currently using it like this :


Code
           combos : [ 
{ label: "Style",
options: { "None" : "",
"Quote" : "quote",
"Highlight" : "highlight",
"Deprecated" : "deprecated"
}
}
]



As you see I completely removed the syntax highlighting since I didnt see any use for it, atleast not at the moment. The function above should be able to surround any text or element with the span element and defined class.

Is this what you meant?

Kim Steinhaug
kim-at-steinhaug-dot-com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
www.steinhaug.com - www.easywebshop.no - www.webkitpro.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Norwegian office : +47 88 00 92 45, Swedish office : +46 31 704 43 40
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


agf
User

Mar 30, 2004, 12:40 PM

Post #5 of 8 (1246 views)
Shortcut
Re: [kimss] Stylesheet Plugin Help [In reply to] Can't Post

Hmm... perhaps I missed something ... I thought the two dropdowns were just two identicle examples...

Can you post the contents of your editor.registerPlugin ?

this is what I have at the moment

Code
<script type="text/javascript"> 
HTMLArea.loadPlugin("CSS");
function initDocument() {
var editor = new HTMLArea("editor");
editor.config.pageStyle = "@import url(<%=SystemResources.ABSOLUTE_PATH + "Clients/" + siteID + "/css/" + cssFile%>);";
editor.registerPlugin(CSS, {
combos : [
{ label: "Style",
// menu text // CSS class
options: { "None" : "",
<% for(int i=0; i<myList.size(); i++) { %>
"<%= (String)myList.get(i) %>":"<%= (String)myList.get(i) %>"<% if(i != ( myList.size() -1 )){ out.write(",");}%>
<%}%>
},
context: "p"
}/*,
{ label: "Info",
options: { "None" : "",
"Quote" : "quote",
"Highlight" : "highlight",
"Deprecated" : "deprecated"
}
} */
]
});
editor.generate();
}
</script>



kimss
User

Mar 30, 2004, 1:17 PM

Post #6 of 8 (1242 views)
Shortcut
Re: [agf] Stylesheet Plugin Help [In reply to] Can't Post

Looks like we missed something both of us, hehe. I think your right, the example setup initializes two different CSS menues. In the exmaple its the first setup that does the extra part with the pre element.

So what I see from your example, you have removed the second CSS dropdown box - which is the one that works on all formatting. Instead you have inserted your ASP code for the first dropdown which only applies inside the p element, as stated here (cut from your code):


Code
 editor.registerPlugin(CSS, {  
combos : [
{ label: "Style",
// menu text // CSS class
options: { "None" : "",
<% for(int i=0; i<myList.size(); i++) { %>
"<%= (String)myList.get(i) %>":"<%= (String)myList.get(i) %>"<% if(i != ( myList.size() -1 )){ out.write(",");}%>
<%}%>
},
context: "p"
}/*,
{ label: "Info",
options: { "None" : "",



I think you will solve your problem by removing the first setup and adding your code formatting to the second setup. (Reverse yours).

Or use the one I posted, replace it with your asp code.

Finally, my config, several PHP stuf inside here so I guess it doesnt help you much :


Code
  <script type="text/javascript"> 
_editor_url = "./";
_editor_lang = "no";
</script>
<script type="text/javascript" src="./content_cms.htmlarea.js.php"></script><script type="text/javascript">
<?php
if($switches_rich[0])
echo ' HTMLArea.loadPlugin("TableOperations");' . "\n";
if($switches_rich[1])
echo ' HTMLArea.loadPlugin("SpellChecker");' . "\n";
if($switches_rich[2])
echo ' HTMLArea.loadPlugin("CSS");' . "\n";
if($switches_rich[3])
echo ' HTMLArea.loadPlugin("ContextMenu");' . "\n";
?>
</script> <script type="text/javascript">
var editor = null;
function initEditor() { editor = new HTMLArea("cms");<?php
if($switches_rich[0]){
echo " editor.registerPlugin(TableOperations);\n";
}
if($switches_rich[1]){
echo " editor.registerPlugin(SpellChecker);\n";
}if($switches_rich[2]){
?>
editor.config.pageStyle = "@import url(content_cms.htmlarea.custom.css.php?<?=time()?>);";
editor.registerPlugin(CSS, {
combos : [
{ label: "Style",
options: { <?php

generate_css_styles();
/* Function returns following format :
"None" : "",
"Quote" : "quote",
"Highlight" : "highlight",
"Deprecated" : "deprecated"
*/
?>
}
}
]
});
<?php
}
if($switches_rich[3]){
echo ' editor.registerPlugin("ContextMenu");' . "\n";
}
?> setTimeout(function() {
editor.generate();
}, 500);
return false;
}


Kim Steinhaug
kim-at-steinhaug-dot-com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
www.steinhaug.com - www.easywebshop.no - www.webkitpro.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Norwegian office : +47 88 00 92 45, Swedish office : +46 31 704 43 40
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


agf
User

Mar 30, 2004, 1:23 PM

Post #7 of 8 (1239 views)
Shortcut
Re: [kimss] Stylesheet Plugin Help [In reply to] Can't Post

Slick, I will give that a run and post the results... BTW, that is JSP, not ASP :)


agf
User

Apr 1, 2004, 7:52 AM

Post #8 of 8 (1207 views)
Shortcut
Re: [agf] Stylesheet Plugin Help [In reply to] Can't Post

I got it all working - thanks Kimss

 
 
 


Search for (options)