ASP.NET-es képfeltöltő CLEditorhoz

Nagyon sok JavaScriptes WYSIWYG editor létezik, nekem az egyik kedvencem a CLEditor. Nem tud sokat, nem is tökéletes, de kicsi, egyszerű, pluginekkel bővíthető és jQuery alapú. Az egész editor 4 fájlból áll és mindössze 9kb, amiért ezt kapjuk:

cleditor-demo

Nem is beszélve arról, hogy gyakorlatilag ingyenesen használható a MIT és a GPLv2 licencek értelmében. Egy próbát mindenképp megér, ami a fájlok bemásolása után mindössze ennyi:

<head runat="server">
  <link href="Scripts/CLEditor/jquery.cleditor.css" rel="stylesheet" type="text/css" />
  <script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
  <script src="Scripts/CLEditor/jquery.cleditor.js" type="text/javascript"></script>

  <script type="text/javascript">
    $(function () {
      $('#txtContent').cleditor();
    });
  </script>
</head>

<body>
  <form id="form1" runat="server">
    <div>
      <asp:TextBox ID="txtContent" runat="server" 
ClientIDMode="Static" TextMode="MultiLine" /> </div> </form> </body>

Mint sok más editor, sajnos alapból ez sem tud képfeltöltést, csak képbeszúrást, ami különösen nem is meglepő, hiszen a fájlfeltöltéshez szerver oldali komponens is kell. PHP-s megoldást találtam, de nekem természetesen ASP.NET-es kellett, hát csináltam egyet.

A pluginezés szerencsére nagyon egyszerű, gyakorlatilag egy új gombot kell regisztrálni:

$.cleditor.buttons.imageUpload = {
    name: "imageUpload",
    image: "imageUpload.png",
    title: "Upload and insert image",
    command: "inserthtml",
    buttonClick: onImageUploadButtonClick
};

Majd ezt a gombot beszúrni az eszköztárra, például a beépített képbeszúró gomb (“image”) elé:

$.cleditor.defaultOptions.controls = 
$.cleditor.defaultOptions.controls.replace("image", "imageUpload image");

Máris van egy gombunk, és ha a felhasználó rákattint, meghívódik az onImageUploadButtonClick függvényünk. Itt egy jQueryUI-os dialog ablakot szeretnénk feldobni, amiben egy iframe jeleníti meg az ASP.NET-es feltöltő oldalt. Ezt így alapozhatjuk meg a markupban:

<div id="dialog" style="display: none;">
    <iframe src="ImageUploadPopup.aspx" frameborder="0"></iframe>
</div>

Ha ez megvan, akkor máris írhatjuk a JavaScript kódot a popup megjelenítésére:

function onImageUploadButtonClick(e, data) {
    // Open a new popup dialog.
    $("#dialog").dialog({
        autoOpen: true,
        modal: true,
        width: '500',
        position: 'auto',
        title: 'Insert image',
        buttons:
        [
            {
                text: "Insert",
                click: function () {
                    $(this).dialog('close');
                    onImageUploadPopupClose(data);
                }
            },
            {
                text: "Cancel",
                click: function () {
                    $(this).dialog('close');
                }
            }
        ]
    });

    // Ez kell, hogy az IE az editorba szúrja be a képet,
//
ne kedve szerint valami meglepő helyre az oldalon. data.editor.focus(); // A false azt jelzi, hogy a gomb funkcióját teljes egészében mi
// valósítjuk meg, ne a gomb deklarációnál megadott command hajtódjon végre. return false; }

A végén lévő két sortól eltekintve ebben semmi extra nincs, klasszikus jQueryUI dialog. A felugró ablakba az ImageUploadPopup.aspx fog betöltődni, ami a példa kedvéért igen egyszerű:

<asp:FileUpload runat="server" ID="fupImage" />
<asp:Button ID="btnUpload" runat="server" 
onclick="btnUpload_Click" Text="Upload" /> <asp:Label ID="lblResult" runat="server" /> <asp:HiddenField ID="hfSelectedImageUrl" runat="server" ClientIDMode="Static" />

A fájlt az Upload gomb megnyomására töltjük fel, majd a Labelben tájékoztatjuk a felhasználót az eredményről. A rejtett mezőt arra használjuk, hogy beleírjuk azt az URL-t, amit majd az editorba be kell szúrni. A gomb eseménykezelője:

protected void btnUpload_Click( object sender, EventArgs e )
{
  // Fájl mentése a diszkre.
// VIGYÁZAT: demó kód, input validálás hiányzik!
string folder = this.Server.MapPath( "~/Upload" ); string target = Path.Combine( folder, this.fupImage.FileName ); this.fupImage.SaveAs( target ); // Felhasználó tájékoztatása. this.lblResult.Text = String.Format( CultureInfo.InvarianCulture,
"{0} feltöltve!", this.fupImage.FileName ); // Beszúrandó URL mentése a rejtett mezőbe.
this.hfSelectedImageUrl.Value = "Upload/" + this.fupImage.FileName; }

Amikor a felhasználó az Insert gombra kattintva bezárja a dialógusablakot, akkor meg fog hívódni az onImageUploadPopupClose függvényünk. Itt kiolvassuk a rejtett mező tartalmát, gyártunk belőle egy img elemet és megkérjük az editort, hogy szúrja be a szövegbe:

  function onImageUploadPopupClose(data) 
{ var strSelectedImageUrl =
$("#dialog").find("iframe").contents().find("#hfSelectedImageUrl").val(); var editor = data.editor; var html = "< img src='" + strSelectedImageUrl + "' />"; editor.execCommand(data.command, html, null, data.button); editor.hidePopups(); editor.focus(); }

 

Leírni bonyolultabb, mint megcsinálni, de még egyszerűbb a teljes forráskódot letölteni innen.

 

Technorati-címkék: ,,,,

zip CLEditorImageUploadSample.zip (154 kB)


Balássy György (MS RD, ASP.NET MVP, MCTS)

Balássy György (MS RD, ASP.NET MVP, MCTS) Villamosmérnök, a BME Automatizálási és Alkalmazott Informatikai Tanszékén webportálok fejlesztését oktatja. 2000 óta foglalkozik a Microsoft .NET platformjával, melynek meghonosításában jelentős szerepet vállalt előadóként, konzulensként és A .NET Framework és programozása című könyv társszerzőjeként. Az MSDN Kompetencia Központon belül a Portál Technológiák Csoport vezetője, szakterülete web alapú rendszerek fejlesztése és üzemeltetése. 2004-ben Magyarországon elsőként kapta meg a Most Valuable Professional címet, majd 2005 óta a Microsoft magyarországi regionális igazgatója. Publikációi a Technet Magazinban, az MSDN Kompetencia Központ honlapján és szakmai blogjában olvashatóak.

2011.08.08. 3:00:00 | Permalink | Hozzászólások: 0 | Tárgyszavak: , , ,


  • A ListView kétszer mondja. A ListView kétszer mondja.

    Balássy György (MS RD, ASP.NET MVP, MCTS) Az ASP.NET ListView vezérlő sajnos a csillagok bizonyos együttállása esetén kétszer fordul az adatbázishoz. Látszólag nincs semmi extra a dologban, mégis SQL Profilerrel megnézve tisztán látszik, hogy a kapcsolt SqlDataSource SelectCommand utasítása kétszer fut be az adatbázis szerverbe. Tovább »
  • Melyik oldal jön be bejelentkezés után?

    Balássy György (MS RD, ASP.NET MVP, MCTS) Az ASP.NET Login vezérlőnek van egy DestinationPageUrl tulajdonsága, amellyel megadhatjuk annak az oldalnak a címét, ahova sikeres bejelentkezés után a vezérlő továbbdob. Ez szép is lenne, már ha működne. Tovább »


Írja meg Ön is véleményét!


Hozzászólásokat csak regisztrált, bejelentkezett felhasználóktól tudunk elfogadni!

Hozzászólások