Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Rich text in Sitecore - the borken image icon

5 Answers 652 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Liu
Top achievements
Rank 1
Liu asked on 18 Jun 2020, 08:46 AM
We are participating in a project using Sitecore and have a question about rich text.

In Sitecore, I can access media such as images with URL paths like "-/media/Project/XXXX/XXXXX/Websites/xxxxxx.jpg",
but I can't access the images in the rich text editor and the broken image icon appears.
Are there any settings and other considerations when displaying images?

I'm attaching the video of the problem and the config setting file for your reference.

thanks in advance

5 Answers, 1 is accepted

Sort by
0
Liu
Top achievements
Rank 1
answered on 18 Jun 2020, 08:55 AM

Here is the config setting file.

ContentFilters="RemoveScripts,FixUlBoldItalic,IECleanAnchors,MozEmStrong,ConvertFontToSpan,IndentHTMLContent,EncodeScripts,OptimizeSpans,ConvertCharactersToEntities,ConvertTags,StripCssExpressions,RemoveExtraBreaks,MakeUrlsAbsolute"

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EditorPage.aspx.cs" Inherits="Sitecore.Shell.Controls.RichTextEditor.EditorPage" %>
 
<%@ Register Assembly="Sitecore.Kernel" Namespace="Sitecore.Web.UI.HtmlControls" TagPrefix="sc" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<!DOCTYPE html>
<html style="overflow: hidden; width: 100%; height: 100%">
<head runat="server">
  <title>Sitecore</title>
  <link href="/sitecore/shell/Themes/Standard/Default/Content Manager.css" rel="stylesheet" type="text/css" />
  <link href="/sitecore/shell/Themes/Standard/Default/Dialogs.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    <asp:Placeholder ID="EditorStyles" runat="server" />
 
    textarea {
      outline: none;
      }
    </style>
     
    <script src="/sitecore/shell/controls/lib/jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      if (typeof(window.$sc) == "undefined") window.$sc = jQuery.noConflict();
    </script>
    <script src="/sitecore/shell/controls/lib/prototype/prototype.js" type="text/javascript"></script>
    <script type="text/javascript" src="/sitecore/shell/Controls/Rich Text Editor/EditorPage.js"></script>
 
  <script type="text/javascript">
    <asp:Placeholder runat="server" ID="ScriptConstants" />
 
    var scRichText = new Sitecore.Controls.RichEditor(scClientID);
    var currentKey = null;
 
      var $j = jQuery.noConflict();
      var cEditor; //variable to store editor reference
 
    $j(document).ready(function() {
        $j(".reMode_design").click(function(){
          RemoveInlineScripts();
        });
        $j(window).resize(function() {
          if(cEditor)
          {
            //upon window resize: reset current mode, forces editor to perform resize
            cEditor.set_mode(cEditor.get_mode());
          }
        });
      });
 
      function RemoveInlineScripts() {
        if (scRemoveScripts === "true") {
          removeInlineScriptsInRTE(scRichText);
        }
      } 
 
      function scLoad(key, html) {
      if (key == currentKey) {
        scRichText.setText(html);
        scRichText.setFocus();
        return;
      }
 
      currentKey = key;
      }
 
      function OnClientLoad(editor) {
      cEditor = editor; //store editor reference to be used in resize handler
        editor.attachEventHandler("mouseup", function() {
          var element = editor.getSelection().getParentElement();
          if (element !== undefined && element.tagName.toUpperCase() === "IMG") {
            fixImageParameters(element, prefixes.split("|"));
          }
        });
 
        scRichText.onClientLoad(editor);
 
      var filter = new WebControlFilter();
      editor.get_filtersManager().add(filter);
 
      var protoFilter = new PrototypeAwayFilter();
      editor.get_filtersManager().add(protoFilter);
 
      var imageFilter = new ImageSourceFilter();
      editor.get_filtersManager().add(imageFilter);
 
      setTimeout(function() {
        var filterManager = editor.get_filtersManager();
        var myFilter = filterManager.getFilterByName("Sitecore WebControl filter");
        var myImageFilter = filterManager.getFilterByName("Sitecore ImageSourceFilter filter");
 
        myFilter.getDesignContent(editor.get_contentArea());
        myImageFilter.getDesignContent(editor.get_contentArea());
 
        editor.fire("ToggleTableBorder");
        editor.fire("ToggleTableBorder");
 
        editor.setFocus();
      }, 0);
    }
 
    function scSendRequest(evt, command)
    {
      if (command == "editorpage:accept") {
        removeExtraSpaceOnAccept();
      }
 
      RemoveInlineScripts();
         
      var editor = scRichText.getEditor();
      if (editor.get_mode() == 2){//If in HTML edit mode
        editor.set_mode(1); //Set mode to Design
      }
 
      $("EditorValue").value = editor.get_html(true);
 
      RemoveInlineScripts();
      scForm.browser.clearEvent(evt);
 
      scForm.postRequest("", "", "", command);
 
      return false;
    }
 
    function removeExtraSpaceOnAccept() {
      var editor = scRichText.getEditor();
      if (editor.get_html(true) == " ") {
        editor.set_html("");
      }
    }
 
    function OnClientInit(editor) {
    }
 
    function OnClientModeChange(editor, args) {
    }
 
  </script>
</head>
 
<body class="scStretch">
  <form runat="server" id="mainForm" class="scStretch">
    <sc:AjaxScriptManager runat="server" />
    <sc:ContinuationManager runat="server" />
    <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
 
    <input type="hidden" id="EditorValue" />
 
    <div class="scStretch scFlexColumnContainer">
 
      <div class="scFlexContent">
        <div class="scStretchAbsolute scDialogContentContainer">
 
          <asp:UpdatePanel ID="EditorUpdatePanel" class="scStretch" runat="server">
            <ContentTemplate>
              <telerik:RadFormDecorator ID="formDecorator" runat="server" DecoratedControls="All" />
              <telerik:radeditor  ID="Editor" runat="server"
                CssClass="scRadEditor"
                Width="100%"
                ContentFilters="RemoveScripts,FixUlBoldItalic,IECleanAnchors,MozEmStrong,ConvertFontToSpan,IndentHTMLContent,EncodeScripts,OptimizeSpans,ConvertCharactersToEntities,ConvertTags,StripCssExpressions,RemoveExtraBreaks,MakeUrlsAbsolute"
                DialogsCssFile="/sitecore/shell/themes/standard/default/Content Manager.css"
                StripFormattingOptions="MSWordRemoveAll,ConvertWordLists"
                StripFormattingOnPaste="MSWordRemoveAll,ConvertWordLists"
                LocalizationPath="~/sitecore/shell/controls/rich text editor/Localization/"
                Skin="Metro"
                ToolsFile="~/sitecore/shell/Controls/Rich Text Editor/ToolsFile.xml"
                ImageManager-UploadPaths="/media library"
                ImageManager-DeletePaths="/media library"
                ImageManager-ViewPaths="/media library"
                FlashManager-UploadPaths="/media library"
                FlashManager-DeletePaths="/media library"
                FlashManager-ViewPaths="/media library"
                MediaManager-UploadPaths="/media library"
                MediaManager-DeletePaths="/media library"
                MediaManager-ViewPaths="/media library"
                DocumentManager-ViewPaths="/media library"
                TemplateManager-UploadPaths="/media library"
                TemplateManager-DeletePaths="/media library"
                TemplateManager-ViewPaths="/media library"
                ThumbSuffix="thumb"
                OnClientCommandExecuted="OnClientCommandExecuted"
                OnClientLoad="OnClientLoad"
                OnClientSelectionChange="OnClientSelectionChange"
                OnClientInit="OnClientInit"
                OnClientModeChange="OnClientModeChange"
                OnClientPasteHtml="OnClientPasteHtml" />
 
            </ContentTemplate>
          </asp:UpdatePanel>
        </div>
      </div>
      <script type="text/javascript" src="/sitecore/shell/Controls/Rich Text Editor/RichText Commands.js"></script>
      <script type="text/javascript" src="/sitecore/shell/Controls/Rich Text Editor/RTEfixes.js"></script>
 
      <asp:PlaceHolder ID="EditorClientScripts" runat="server" />
 
 
      <div id="scButtons" class="scFormDialogFooter">
        <div class="footerOkCancel">
          <sc:Button Class="scButton scButtonPrimary" Click="javascript: if (Prototype.Browser.IE) { var designModeBtn = $$(\'.reMode_design\')[0]; designModeBtn && designModeBtn.click(); } scSendRequest(event, \'editorpage:accept\');" ID="OkButton" KeyCode="13" runat="server">
            <sc:Literal runat="server" Text="Accept" />
          </sc:Button>
 
          <sc:Button Click="javascript:scSendRequest(event, \'editorpage:reject\')" ID="CancelButton" KeyCode="27" runat="server">
            <sc:Literal runat="server" Text="Reject" />
          </sc:Button>
        </div>
      </div>
      </div>
         
        <script type="text/javascript">
          fixFirefoxPaste();
        </script>
 
    </form>
  </body>
</html>
0
Liu
Top achievements
Rank 1
answered on 18 Jun 2020, 08:56 AM
I'm sorry that the video cannot be attached.
0
Rumen
Telerik team
answered on 18 Jun 2020, 12:00 PM

Hi Liu,

You can upload the video to YouTube or deploy it to dropbox and share it.

Regards,
Rumen
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Liu
Top achievements
Rank 1
answered on 23 Jun 2020, 12:28 AM

Thank you for your reply
I uploaded the video to dropbox.
The following is the URL.

<https://www.dropbox.com/s/i8nm117n2lx0vdw/Broken_link_in_rich_text.swf?dl=0>

0
Rumen
Telerik team
answered on 24 Jun 2020, 10:23 AM

Hi Liu,

You can inspect the img src with the Inspect Html feature of the DevTools of Chrome and see what URL is produced when the / is removed.

You can also perform a test by deleting the following properties from the RadEditor configuration which will put RadEditor in its default configuration state, e.g. delete the following content from Radeditor declaration and retest

                            ContentFilters="RemoveScripts,FixUlBoldItalic,IECleanAnchors,MozEmStrong,ConvertFontToSpan,IndentHTMLContent,EncodeScripts,OptimizeSpans,ConvertCharactersToEntities,ConvertTags,StripCssExpressions,RemoveExtraBreaks,MakeUrlsAbsolute"

                OnClientCommandExecuted="OnClientCommandExecuted"
                OnClientLoad="OnClientLoad"
                OnClientSelectionChange="OnClientSelectionChange"
                OnClientInit="OnClientInit"
                OnClientModeChange="OnClientModeChange"
                OnClientPasteHtml="OnClientPasteHtml"

Regards,
Rumen
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Editor
Asked by
Liu
Top achievements
Rank 1
Answers by
Liu
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or