توضیحات و دانلود

اضافه کردن تصاویر به TinyMCE و ویرایشگر متن با استفاده از کنترلر FileUpload در ASP.Net
0 0
اضافه کردن تصاویر به TinyMCE و ویرایشگر متن با استفاده از کنترلر FileUpload در ASP.Net

با سلام در مقاله قبلی نحوه اضافه کردن رجیستری Tiny MCE RichTextBox در  ASP.Net به شما  نشان دادیم .

در اینجا  توضیح خواهیم داد که چگونه تصاویر را در Tiny MCE RichTextBox خود همراه با سایر محتوای HTML اضافه یا آپلود کنید.

 قبلا یک ویرایشگر TinyMCE را به صفحه اضافه کرده و کنترل های زیر را اضافه میکنیم.

اگر می خواهید بدانید چگونه می توانیدTiny MCE RichTextBox را به صفحه وب ASP.Net اضافه کنید، باید مقالۀ قبلی را مطالعه کنید.

<form id="form1" runat="server">

    <div>

        <asp:Panel ID = "pnlEditor" runat = "server" >

        <asp:TextBox ID="RichTextBox" runat="server" TextMode = "MultiLine" ></asp:TextBox><br />

        <asp:FileUpload ID="FileUpload1" runat="server" />

        <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />

        </asp:Panel>

        <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />

        <asp:Button ID="btnCancel" runat="server" Text="Cancel" Visible = "false" OnClick="btnCancel_Click" />            

        <asp:Label ID="lblDisplay" runat="server" Text="" Visible = "false" ></asp:Label>

    </div>

</form>

 یک پنل با سه کنترل TextBox اضافه می کنیم که از RichTextEditor خارج می شود، کنترل FileUpload برای آپلود تصاویر، یا گرافیک و یک دکمه آپلود برای آپلود تصاویر می باشد .

سپس دکمه Save و Cancel را همراه با یک برچسب که محتوای Rich Text را در هر زمان که کلید Save را کلیک می کنید نمایش دهد.

هنگامی که کنترل ها اضافه می شوند، صفحه وب شما به صورت زیر نمایش داده می شود

در بالا یک کنترل FileUpload و دکمه بارگذاری وجود دارد بنابراین برای قرار دادن عکس یا تصویر در جعبه متن Rich MCE شما باید در رویداد آپلود Button کلیک کنید. برای ذخیره تصاویر  یک پوشه به نام تصاویر در دایرکتوری ریشه وب سایت ایجاد کنید.

C #

protected void btnUpload_Click(object sender, EventArgs e)

{

    if (FileUpload1.HasFile)

    {

        string FileName = System.IO.Path.GetFileName(FileUpload1.PostedFile.FileName);

        string FilePath = "images/" + FileName;

        FileUpload1.SaveAs(Server.MapPath(FilePath));

        RichTextBox.Text += string.Format("<img src = '{0}' alt = '{1}' />", FilePath, FileName);    

    }

}

VB.Net

Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As EventArgs)

   If FileUpload1.HasFile Then

      Dim FileName As String = System.IO.Path.GetFileName(FileUpload1.PostedFile.FileName)

      Dim FilePath As String = "images/" & FileName

      FileUpload1.SaveAs(Server.MapPath(FilePath))

      RichTextBox.Text += String.Format("<img src = '{0}' alt = '{1}' />", FilePath, FileName)

   End If

End Sub

در کد بالا،  فایل تصویر آپلود شده را در پوشه تصاویر ذخیره می کنیم و سپس یک تگ HTML (IMG) ایجاد می کنیم و املا SRC خود را به مسیری که تصویر یا تصویر آپلود شده ذخیره می کند تنظیم و در نهایت  تگ تصویر را به Content RichTextBox اضافه می کنیم.

بنابراین TinyMCE ویرایشگر در حال حاضر تصویر یا تصویری که ما در کنار محتوای HTML دیگر آپلود کردیم نمایش. شکل زیر یک Tiny MCE RichTextBox با تصویر آپلود شده در آن را نمایش می دهد.

به طور مشابه می توانید محتویات HTML را با استفاده از برچسب در یک صفحه وب با قرار دادن کد زیر در رویداد کلیک دکمه Save ذخیره کنید

C #

protected void btnSave_Click(object sender, EventArgs e)

{

    lblDisplay.Visible = true;

    pnlEditor.Visible = false;

    lblDisplay.Text = RichTextBox.Text;

    btnSave.Visible = false;

    btnCancel.Visible = true;

}

VB.Net

Protected Sub btnSave_Click(ByVal sender As Object, ByVal e As EventArgs)

   lblDisplay.Visible = True

   pnlEditor.Visible = False

   lblDisplay.Text = RichTextBox.Text

   btnSave.Visible = False

   btnCancel.Visible = True

End Sub

همانطور که در بالا ذکر شد، به سادگی محتویات Tiny MCE RichTextBox را به یک کنترل Label ASP.Net اختصاص میدهیم. شکل زیر برچسب را با محتوای متن نمایش می دهد

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :