|
RadControls version
|
|
| .NET version |
|
| Visual Studio version |
|
| programming language |
|
| browser support |
all browsers supported by RadControls
|
PROJECT DESCRIPTION
We added a custom tool to radeditor that allows multiple CSS class assignment. Find below the code and feel free to include it in your editor. Hopefully, the Telerik team will add this possibility in a future version of the RadEditor :)
First, add an entry to the xml File with your toolbar configuration:
Add following JavaScript to your page:
/*************** CSS Chooser ******************/
Telerik.Web.UI.Editor.CommandList["CSSExtender"] = function(commandName, editor, args) {
{
arguments = new Object();
arguments.elem = editor.getSelectedElement();
var CssArray = editor.getCssArray();
var Classes = new Array();
$(CssArray).each(function(i,e)
{
Classes.push(e[0]);
});
arguments.classes = Classes;
var myCallbackFunction = function (sender, args) {
var CssClasses = args;
$(editor.getSelectedElement()).removeClass();
$(editor.getSelectedElement()).addClass(CssClasses);
}
if($(arguments.elem).get(0).tagName != "BODY")
{
editor.showExternalDialog(
'/Providers/HtmlEditorProviders/ToFlexWYSIWYGProvider09/Toolbars/CssExtender.aspx',
arguments,
280,
310,
myCallbackFunction,
null,
'CSS Class Chooser',
true,
Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
false,
false);
}
else
{
alert("Please select an element first.");
}
};
};
Note that you have to include
jQuery to your page.
Create a file "CSSExtender.aspx", adapt the path to this file in the previous JavaScript file and insert following code:
<%@ Page Language="C#" AutoEventWireup="true" EnableViewState="false" %>
<style type="text/css">
body
{
font-family: arial, helvetica, sans-serif;
font-size: 11px;
}
h1
{
font-size: 14px;
margin-bottom: 1em;
}
#AvailableClasses, #CssClasses { width:200px; }
#btnAddClass, #btnClearClasses { margin:0; padding:0; }
</style>
<h1>CSS Extender - Tag: <<span id="CurrentTag"></span>></h1>
<br />
<select name="AvailableClasses" id="AvailableClasses" size="10" multiple="multiple"></select> <input type="image" src="/admin/ControlPanel/images/iconbar_addmodule.gif" id="btnAddClass" /><br />
<input name="CssClasses" type="input" id="CssClasses" value=""> <input type="image" src="/images/delete.gif" id="btnClearClasses" /><br />
<input type="button" onclick="javascript:insertLink();" value="Save" />
<input type="button" onclick="javascript:cancel();" value="Cancel" />
<script type="text/javascript">
if (window.attachEvent) {
window.attachEvent("onload", initDialog);
}
else if (window.addEventListener) {
window.addEventListener("load", initDialog, false);
}
var btn = null;
function getRadWindow() {
if (window.radWindow) {
return window.radWindow;
}
if (window.frameElement && window.frameElement.radWindow) {
return window.frameElement.radWindow;
}
return null;
}
function initDialog() {
arguments = getRadWindow().ClientParameters; //return the arguments supplied from the parent page
$("#CurrentTag").text($(arguments.elem).get(0).tagName);
$("#CssClasses").val($(arguments.elem).attr("class"));
$(arguments.classes).each(function(i,e)
{
var Option = "<option>" + e + "</option>";
$("#AvailableClasses").append(Option);
});
$("#btnAddClass").click(function() { $("#AvailableClasses option:selected").each(function() { $("#CssClasses").val($("#CssClasses").val() + " " + $(this).val()); }) });
$("#btnClearClasses").click(function() { $("#CssClasses").val(""); });
}
function insertLink() //fires when the Insert Link button is clicked
{
btn = $("#CssClasses").val();
getRadWindow().close(btn); //use the close function of the getRadWindow to close the dialog and pass the arguments from the dialog to the callback function on the main page.
}
function cancel() {
getRadWindow().close();
}
</script>
Note again, this is a dirty solution. But if you require a multiple CSS class selector, you can use this. If you have suggestions to improve it, feel free to comment.