This is a migrated thread and some comments may be shown as answers.

Insert image does not work if the telerik RadEditor is in a User Control

11 Answers 421 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Xiaobo
Top achievements
Rank 1
Xiaobo asked on 05 Aug 2015, 02:44 PM

I have a telerik RadEditor used in a User control. I can upload images, select images, view images through ImageManager, but I cannot insert the Image to the content area.

I tried put same code in regular Aspx page, it has no problem to insert picture to the content area.
Could anyone help me how to get the insert image function work if the RadEditor is used in a user control?

11 Answers, 1 is accepted

Sort by
0
Stanimir
Telerik team
answered on 10 Aug 2015, 01:05 PM
Hello,

Could you please send me the HTML code, which you are setting to the Editor's Content property? I will review it and advise you further.


Regards,
Stanimir
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Xiaobo
Top achievements
Rank 1
answered on 10 Aug 2015, 01:25 PM

Satnimir,

This is my usercontrol markup file.

//GPageContentManagement.ascx

 

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="GPageContentManagement.ascx.cs" Inherits="Controls_Admin_UndergratuateOppManagement" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>



<div id="tblMain" runat="server" width="100%" style="margin-left: 10px; margin-right: 10px; margin-bottom:10px;">
    <div class="manageSubTitle">
        General Page Content Management
    </div>

    <div style="padding-left:40px">
        <b>Select a page:</b><br />
        <telerik:RadComboBox ID="rcbPage" runat="server" Width="250px" DropDownWidth="250px" AutoPostBack="true"  OnSelectedIndexChanged="rcbPage_SelectedIndexChanged"></telerik:RadComboBox>
    </div>


    <div style="margin-left: 40px; margin-top:20px; margin-right:40px">
        <div>
            <telerik:RadEditor ID="rEditPageContent" runat="server" EditModes="All" NewLineBr="true" ToolbarMode="Default" ContentFilters="FixEnclosingP" width="100%" Height="500px">
                <ImageManager EnableAsyncUpload="true" DeletePaths="~/GeneralPageImages/" ViewPaths="~/GeneralPageImages/"  UploadPaths="~/GeneralPageImages/"
                    MaxUploadFileSize="16000000"  ViewMode="Thumbnails" />
                <Content></Content>
            </telerik:RadEditor>
           <%-- <script type="text/javascript">
                Telerik.Web.UI.Editor.RemoveExtraBrakes.prototype.getHtmlContent = function (content) {
                    return content;
                }
                Telerik.Web.UI.Editor.StripJunkFilter.prototype.getHtmlContent = function (content) {
                    return content;
                }
            </script>--%>

        </div>

        <div class="divButton">
            <telerik:RadButton ID="rbtnSaveContent" runat="server" Text="Save" Width="150px" OnClick="rbtnSaveContent_Click"></telerik:RadButton>

            <telerik:RadButton ID="rbtnCancel" runat="server" Text="Cancel" Width="150px" OnClick="rbtnCancel_Click"></telerik:RadButton>
            <br />
            <asp:Label ID="saveMsg" runat="server" CssClass="Msg" Visible="false"></asp:Label>
            <br />
        </div>
    </div>


</div>

​

0
Xiaobo
Top achievements
Rank 1
answered on 10 Aug 2015, 01:38 PM

//GPageContentManagement.ascx.cs

 

using System.Drawing;
using System.Drawing.Imaging;
using System.Configuration;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls.WebParts;

public partial class Controls_Admin_UndergratuateOppManagement : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
         if (!this.IsPostBack)
        {
            PopulateControls();
        }
        
         //rEditPageContent.ImageManager.ContentProviderTypeName = typeof(Telerik.Web.UI.Widgets.FileBrowserContentProvider).AssemblyQualifiedName;
         saveMsg.Visible = false;
    }

     private void PopulateControls()
     {
         rcbPage.DataSource = GeneralPageContents.Find(Int32.MinValue, String.Empty);
         rcbPage.DataTextField = "PageName";
         rcbPage.DataValueField = "ID";
         rcbPage.DataBind();

         rcbPage.SelectedIndex = 0;

         

         SetContentImageManager();

     }


     private void SetContentImageManager()
     {
         Int32 pageID = Functions.FormatPotentialNullInt(rcbPage.SelectedValue);
         Tepper.Data.CBDR.GeneralPageContent pageContent = Tepper.CBDR.GeneralPageContents.GetPageContent(pageID, string.Empty);

         if (pageContent != null)
             rEditPageContent.Content = pageContent.PageContent.ToString();
         else
             rEditPageContent.Content = "";



         string imageDir = Application["GeneralPageImages"].ToString();


          if (imageDir.Length > 0)
          {

              if (!Directory.Exists(MapPath(imageDir)))
              {
                  Directory.CreateDirectory(MapPath(imageDir));

              }


          }
     }
    
    protected void rbtnSaveContent_Click(object sender, EventArgs e)
    {
        Int32 pageID = Functions.FormatPotentialNullInt(rcbPage.SelectedValue);
        Tepper.Data.CBDR.GeneralPageContent pageContent = Tepper.CBDR.GeneralPageContents.GetPageContent(pageID, string.Empty);
        int rowsAffected = -1;

        if (pageContent != null)
        {
            pageContent.PageContent = rEditPageContent.Content;
            rowsAffected = pageContent.Update();
        }
       
        

        saveMsg.Visible = true;
        if (rowsAffected > 0)
       
            saveMsg.Text = "Content for " + rcbPage.SelectedItem.Text + " is successfully saved.";
        
        else
            saveMsg.Text = "Content is not saved.";

    }


    protected void rbtnCancel_Click(object sender, EventArgs e)
    {
        Int32 pageID = Functions.FormatPotentialNullInt(rcbPage.SelectedValue);
        Tepper.Data.CBDR.GeneralPageContent pageContent = Tepper.CBDR.GeneralPageContents.GetPageContent(pageID, string.Empty);

        if (pageContent != null)
            rEditPageContent.Content = pageContent.PageContent.ToString();
        else
            rEditPageContent.Content = "";
    }


 

    protected void rcbPage_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
    {
        SetContentImageManager();

    }
}​

0
Xiaobo
Top achievements
Rank 1
answered on 10 Aug 2015, 01:40 PM

The User control are used in this aspx file:

 

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="SiteManagement.aspx.cs" Inherits="Tepper.CBDR.UI.SiteManagement" %>

<%@ Register Src="~/Controls/Admin/LinksManagement.ascx" TagName="LinksManagement" TagPrefix="LinksManage" %>
<%@ Register Src="~/Controls/Admin/PeopleManagement.ascx" TagName="PeopleManagement" TagPrefix="PeopleManage" %>
<%@ Register Src="~/Controls/Admin/ParticipantManagement.ascx" TagName="ParticipantManagement" TagPrefix="ParticipantManage" %>
<%@ Register Src="~/Controls/Admin/SeminarsManagement.ascx" TagName="SeminarsManagement" TagPrefix="SeminarsManage" %>
<%@ Register Src="~/Controls/Admin/HomeManagement.ascx" TagName="HomeManagement" TagPrefix="HomeManage" %>
<%@ Register Src="~/Controls/Admin/AffiliationManagement.ascx" TagName="AffiliationManagement" TagPrefix="AffiliationManage" %>
<%@ Register Src="~/Controls/Admin/GPageContentManagement.ascx" TagName="GPageContentManagement" TagPrefix="GPageContentManage" %>
<%@ Register Src="~/Controls/Admin/InfoResearchManagement.ascx" TagName="InfoResearchManagement" TagPrefix="InfoResearchManage" %>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="btnAddRole">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rlbRoles" />
                    <telerik:AjaxUpdatedControl ControlID="rcbRole" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="rcbPerson">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rtbFirstName" />
                    <telerik:AjaxUpdatedControl ControlID="rtbLastName" />
                    <telerik:AjaxUpdatedControl ControlID="rcbAffiliation" />
                    <telerik:AjaxUpdatedControl ControlID="rtbEmail" />
                    <telerik:AjaxUpdatedControl ControlID="rtbWebLink" />
                    <telerik:AjaxUpdatedControl ControlID="cbPeoplePage" />
                    <telerik:AjaxUpdatedControl ControlID="rlbRoles" />
                    <telerik:AjaxUpdatedControl ControlID="lblMessage" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnClearPerson">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rtbFirstName" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="rtbLastName" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="rcbAffiliation" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="rtbEmail" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="rtbPassword" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="rtbConfirmPassword" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="rtbWebLink" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="cbPeoplePage" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="rlbRoles" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="lblMessage" UpdatePanelRenderMode="Inline" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnSavePerson">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rtbFirstName" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="rfvFirstName" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="rtbLastName" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="rfvLastName" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="rcbAffiliation" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="rfvAffiliation" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="rtbEmail" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="emailValidator" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="rfvEmail" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="rtbPassword" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="rtbConfirmPassword" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="cvPassword" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="rlbRoles" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="rfvRoles" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="rcbPerson" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="lblMessage" UpdatePanelRenderMode="Inline" />
                </UpdatedControls>
            </telerik:AjaxSetting>

             <telerik:AjaxSetting AjaxControlID="rEditPageContent">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rEditPageContent" LoadingPanelID="RadAjaxLodingPanel1"/>
                    
                </UpdatedControls>
            </telerik:AjaxSetting>

             <telerik:AjaxSetting AjaxControlID="ctrlGPageContentManage">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ctrlGPageContentManage" LoadingPanelID="RadAjaxLodingPanel1"/>
                    
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

   
    <div>
        <telerik:RadTabStrip ID="rtsSiteManagement" runat="server" Width="100%" SelectedIndex="0" MultiPageID="rmpSiteManagement" Visible="false" OnTabClick="rtsSiteManagement_TabClick">
            <Tabs>
                <telerik:RadTab runat="server" PageViewID="rpvHome" Text="Home" Value="0">
                </telerik:RadTab>
                <telerik:RadTab runat="server" PageViewID="rpvLinks" Text="Links" Value="1">
                </telerik:RadTab>
                <telerik:RadTab runat="server" PageViewID="rpvPeople" Text="People" Value="2">
                </telerik:RadTab>
                <telerik:RadTab runat="server" PageViewID="rpvExperimentSignups" Text="Participant Signups" Value="3">
                </telerik:RadTab>
                <telerik:RadTab runat="server" PageViewID="rpvSeminars" Text="Seminars" Value="4">
                </telerik:RadTab>
                <telerik:RadTab runat="server" PageViewID="rpvAffiliations" Text="Affiliations" Value="5">
                </telerik:RadTab>
                <telerik:RadTab runat="server" PageViewID="rpvGPageContent" Text="General Page Contents" Value="6">
                </telerik:RadTab>
                <telerik:RadTab runat="server" PageViewID="rpvInfoReseachers" Text="Info For Researchers" Value="7">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="rmpSiteManagement" runat="server" Width="100%" SelectedIndex="0" BorderStyle="Solid" BorderWidth="1" Visible="false">
            <telerik:RadPageView ID="rpvHome" runat="server">
                <table style="width: 100%; border: solid 1px lightgrey;">
                    <tr>
                        <td style="width: 100%">
                            <HomeManage:HomeManagement ID="HomePageManagement" runat="server" />
                        </td>
                    </tr>
                </table>
            </telerik:RadPageView>
            <telerik:RadPageView ID="rpvLinks" runat="server">
                <table style="width: 100%; border: solid 1px lightgrey;">
                    <tr>
                        <td style="width: 100%">
                            <LinksManage:LinksManagement ID="ctrlLinksManage" runat="server" />
                        </td>
                    </tr>
                </table>
            </telerik:RadPageView>
            <telerik:RadPageView ID="rpvPeople" runat="server">
                <table style="width: 100%; border: solid 1px lightgrey;">
                    <tr>
                        <td style="width: 100%">
                            <PeopleManage:PeopleManagement ID="ctrlPeopleManage" runat="server" />
                        </td>
                    </tr>
                </table>
            </telerik:RadPageView>
            <telerik:RadPageView ID="rpvExperimentSignups" runat="server">
                <table style="width: 100%; border: solid 1px lightgrey;">
                    <tr>
                        <td style="width: 100%">
                            <ParticipantManage:ParticipantManagement ID="ctrlParticipantManage" runat="server" />
                        </td>
                    </tr>
                </table>
            </telerik:RadPageView>
            <telerik:RadPageView ID="rpvSeminars" runat="server">
                <table style="width: 100%; border: solid 1px lightgrey;">
                    <tr>
                        <td style="width: 100%">
                            <SeminarsManage:SeminarsManagement ID="ctrlSeminarsManage" runat="server" />
                        </td>
                    </tr>
                </table>
            </telerik:RadPageView>
            <telerik:RadPageView ID="rpvAffiliations" runat="server">
                <table style="width: 100%; border: solid 1px lightgrey;">
                    <tr>
                        <td style="width: 100%">
                            <AffiliationManage:AffiliationManagement ID="ctrlAffiliationsManage" runat="server" />
                        </td>
                    </tr>
                </table>
            </telerik:RadPageView>
            <telerik:RadPageView ID="rpvGPageContent" runat="server">
                <table style="width: 100%; border: solid 1px lightgrey;">
                    <tr>
                        <td style="width: 100%">
                            <GPageContentManage:GPageContentManagement ID="ctrlGPageContentManage" runat="server" />
                        </td>
                    </tr>
                </table>
            </telerik:RadPageView>

            <telerik:RadPageView ID="rpvInfoReseachers" runat="server">
                <table style="width: 100%; border: solid 1px lightgrey;">
                    <tr>
                        <td style="width: 100%">
                            <InfoResearchManage:InfoResearchManagement ID="ctrlInfoResearchManage" runat="server" />
                        </td>
                    </tr>
                </table>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>
</asp:Content>

​

0
Stanimir
Telerik team
answered on 12 Aug 2015, 10:57 AM
Hi,

As far as I understand you can open the ImageManager dialog but when you hit the Insert button the image does not appear in the content area. Could you confirm that this is your problem?

If this is the problem, could you check if there are javascript errors in the page. Such errors might prevent the image from appearing. Also you can check the image's src property. Is the path to the image accessible from the page where you are loading the control (this is in case it is relative)?

In addition could you send me a sample content which is made by the editor after the problem occurs?


Regards,
Stanimir
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Xiaobo
Top achievements
Rank 1
answered on 12 Aug 2015, 12:31 PM

Yes, you are right. I can open the ImageManage, upload images, select image, just cannot insert the image to the content area. After hit the insert button, I also looked at the HTML in the content area, no src was created.

I had javascript originally, but I test it by commenting the javascript out, it still not work. The pass is accessible. I put the same code in a stand along aspx file, it works.

This problem occurs with any content, even one word content or without any word in the content.

0
Stanimir
Telerik team
answered on 13 Aug 2015, 10:43 AM
Hello,

I am still not able to reproduce the issue. Can you confirm that you are using the latest version of Telerik UI for ASP.NET AJAX. Currently it is 2015.2.729. Also I suggest you to isolate the problem in a simple runnable sample project and provide it to me in an official support ticket. This way I can reproduce the problem locally, debug it and advise you further.


Regards,
Stanimir
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Xiaobo
Top achievements
Rank 1
answered on 26 Aug 2015, 03:10 PM

Stanimir,

I have built a stand alone project. How could I create a official support ticket and submit my project to telerik?

 

Thank you,

 

Xiaobo

0
Ianko
Telerik team
answered on 28 Aug 2015, 06:50 AM
Hello Xiaobo,

You can send official support tickets to Telerik support from your account by purchasing a valid license for the corresponding product. Further details: The support system assigns a response time for all of your questions, depending on your license and ensures that all questions will reach the respective developers, if needed. 

Regards,
Ianko
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Greg
Top achievements
Rank 1
answered on 16 Mar 2017, 02:37 AM
I am also experiencing this problem, with the RadEditor used insode a RadGrid. Upload works fine but the image will not insert into the content area of the editor.
0
Rumen
Telerik team
answered on 16 Mar 2017, 01:58 PM

Hello Greg,

We will need a problem reproduction project that we can test. Could you please isolate the issue and send it for examination on our end via a support ticket?

Best regards,
Rumen
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Editor
Asked by
Xiaobo
Top achievements
Rank 1
Answers by
Stanimir
Telerik team
Xiaobo
Top achievements
Rank 1
Ianko
Telerik team
Greg
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or