CKEDITOR - create one rich combo for calling css from database

Topics: Customizing Orchard, Troubleshooting, Writing themes
Apr 1, 2011 at 3:33 AM

Hi Everyone,

    For those who have explored the ckeditor functions for creating new rich combo and displaying css list from MS SQL Database, kindly share to us... Thanks a lot. I am using JScript to connect to database, but to no avail. Not know got another method to call database under ckeditor plugin.

 

Rgrds,

vteck

Apr 3, 2011 at 4:35 AM

Hi Orchard Teams,

  Got any idea for this problem?

 

Rgrds,

vteck328

Apr 3, 2011 at 3:45 PM

I'm not sure exactly what you're trying to do, can you provide more detailed information and the code you are trying to run?

Apr 4, 2011 at 4:02 AM

Thanks for your prompt action. Here are the details of what I was doing for CKEditor Module in the purpose to call all Styles\css setting from MS SQL Server database. Current CKEditor Styles drop down list have been hardcode in js file. I manage to add a new drop down list onto CKEditor. The next step i hit the problem: How to call the data from MS SQL Server onto CKEditor drop down list i created. I saw one article which recommend to use web services. Tried to do it but to no avail. Please advice.

-----------------------------------------------------------------------------------------

CSSStyles under CKEditor Plugins Folder

-----------------------------------------------------------------------------------------

 

ddl_click(e) {

 

 

 

 

 

 

"POST"

 

"../Modules/WebService.asmx/checkUserExist"

 

"application/json; charset=utf-8"

 

"json"

 

 

 

"{CSS:'" + $("input#notes").val() + "'}"

 

function

 

 

 

 

);

 

}

alert(value[0].result);

},

error:

 

function

 

"(" + evt.statusText + ")"

 

 

 

 

 

 

b =

 

 

 

'CSSStyles'

 

function

 

editor.ui.addRichCombo(b, {

label:

 

'CSS List'

 

Web Service:WebService.asmx

------------------------------------------------------------------------

using System;

 

 

using System.Collections.Generic;

 

 

using System.Linq;

 

 

using System.Web;

 

 

using System.Web.Services;

 

 

using System.Web.Services.Protocols;

 

 

using System.ComponentModel;

 

 

using System.Data;

 

 

using System.IO;

 

 

using System.Data.SqlClient;

 

 

 

 

 

 

using System.Web.Script.Serialization;

 

 

using System.Web.Script.Services;

 

 

using system.Diagnostics;

 

 

 

namespace Orchard.Web

{

[

 

 

WebService(Namespace = http://tempuri.org/)]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.ComponentModel.ToolboxItem(false

)]

 

 

 

 

 

  

 

 

public class WebService: System.Web.Services.WebService

 

 

 

string sql = string

 

string ConnStr = string.Empty;

 

 

 

SqlDataReader rs = null;

 

 

 

SqlDataAdapter Adaptor = null;

[WebMethod()]

 

 

 

 

public string checkUserExist(string username, string email) {

 

string result = string.Empty; SqlConnection Conn = new SqlConnection(@"Data Source=.\SQLServer;Initial Catalog=CMS;User id=uid;Password=pwd;" );

 

 

 

 

"SELECT * FROM Content"

 

 

rs= Adaptor.SelectCommand.ExecuteReader();

 

 

 

if (rs.HasRows == true

 

 

) {

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

while

 

 

result = rs[

 

"Notes"

 

return

 

result;

 

}

}

}

 

 

 

 

 

].ToString();

}

 

}

 

 

//Notes is a column in the Content table which i am selecting from above

(rs.Read())

 

{

 

 

//start the loop

 

 

 

 

 

 

 

;

Adaptor =

new SqlDataAdapter (ConnStr, Conn);  

 

 

 

 

Conn.Open();

ConnStr =

.Empty;

 

 

{

 

 

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

//using WebMatrix.Data;

using System.Web.Script;

 

,

 

command:b

});

}

});

})();

  

------------------------------------------------------

//editor.addCommand(ddl_click());

(editor){

 

ddl_click();

;

 

CKEDITOR.plugins.add(b,{

init:

 

 

//Section 2 : Create the button and add the functionality to it

);

(

 

}

});

};

 

(evt) {

 

alert(evt.status +

) {

 

var value = eval("(" + result.d + ")"  

 

  

 

(result) { if (result.d != null

 

,

 

timeout: 10000,

success:

data:

 

// data: "{username:'" + $("input#txt_username").val() + "',email:'" + $("input#txt_email").val() + "'}",

,

 

 

,

 

dataType:

,

 

contentType:

,

 

url:

 

 

$.ajax({

type:

function

Apr 4, 2011 at 9:59 AM

I think something went wrong when you pasted in the code so I can't really see exactly what's going on.

Firstly though instead of using a Web Service, you should use an MVC controller, it's much easier - you can just build an object and serialize it direct to JSON.

But before you go any further, CKEditor does include much easier ways of managing the styles list. See the following docs page for two different ways, either using Javascript or with an external xml file: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles

I think the xml file is probably the way to go, you could enable modules and themes to override this file if needed and avoid the complication of having to populate a database with CSS information (perhaps not the best place for it anyway).

Apr 4, 2011 at 10:33 AM

Thanks, Randompete. Your meant that using different type of css files instead of using css info from SQL Server?

Do you have any sample in MVC Controller and serialize it to json? I am thinking that how the easier way for designer to define different type of css file. The purpose to put css info onto SQL Server database as allowing the designer to define css by themselves.

Thanks,

vteck328

Apr 4, 2011 at 11:29 AM

SQL server isn't the ideal place for a designer to store CSS class names. Designers do that in a CSS file. Having to set up database values every time you install a theme isn't very friendly for designers OR end users :)

CKEditor provides a way around this. My previous comment was inaccurate; the old version (FCKEditor) let you define styles in XML. The new version has only Javascript style definitions but it's the same principle, and it allows the designer to package style information along with their theme without needing to have anything to do with the database. The doc I linked to describes how to do this.

Such a javascript definition could easily be returned from a controller also, if you wanted to provide a configurable way to amend styles.

To see an example of a controller with a Json result, see Orchard.Web\Core\Routable\Controllers\ItemController.cs and look at the Slugify method. It's just returning a single string but you can easily pass an entire object into the Json method and it will get serialized.

Apr 4, 2011 at 11:50 AM

Alright. cool. Will look at it...   thanks a lot, randompete...

 

Apr 5, 2011 at 2:59 AM

I have another question related to this. The designers will say that they have already predefine all css\styles setting onto css (.css) file. They won't want to redefine the style definition file which is js file. They hope that the styles drop down list can tight with their predefine css file (same file), so the user can reuse the predefine styles onto the html widget. Does it can be done?

Thanks,

vteck328

Apr 6, 2011 at 6:15 PM

The style definition is just telling the editor what CSS styles are available. It doesn't actually define what those styles are. You could write an elaborate system of parsing CSS files and pulling out all the class names ... or just write the JS configuration based on the style names in the CSS file. Besides, you probably don't want every single style rule from the CSS file appearing in your editor :)

May 26, 2011 at 10:56 PM

@vteck328 - CKEditor 3.6 introduces a stylesheetparser plugin that will automatically populate the Styles drop-down based on your CSS file! Fantastic coincidence really. So I just released a new version of the CKEditor module that supports this :)

May 27, 2011 at 1:09 AM

It's cool. Thanks, randompete for telling this good news.