Help with RTE

Last post 08-05-2017, 2:41 PM by cw808. 2 replies.
Sort Posts: Previous Next
  •  07-05-2017, 3:28 PM 85349

    Help with RTE

     Hi

    I'm new to RTE and attempting to implement the editor for the first time in MVC. Below is my code and the markup and JS generated by the editor from my example. Please see my questions inline with the code

     

    Thanks

    <script type='text/javascript' src='/richtexteditor/scripts/loader.js'></script>

    <div id="mdDescriptionEditor" style="border-color:#7E9DB9;border-width:0px;border-style:Solid;height:320px;width:450px;">
    HOW CAN I ADD CLASSES TO THE DIV GENERATED?

    <!--RichTextEditor-->

    <img src='/richtexteditor/images/zip.gif' onload='this.style.display=&quot;none&quot; ; function initcode(){window.rteloader=CreateRTELoader({&#39;toolbar&#39;:&#39;member&#39;,&#39;showcodemode&#39;:false,&#39;showtaglist&#39;:false,&#39;showpreviewmode&#39;:false,&#39;langfiles&#39;:&#39;lang,more&#39;,&#39;skin&#39;:&#39;office2007blue&#39;,&#39;lang&#39;:&#39;en-us&#39;,&#39;showzoomview&#39;:false,&#39;ajaxpostbackurl&#39;:&#39;/Member/EditorAjaxHandler&#39;,&#39;showeditmode&#39;:false,&#39;showresizecorner&#39;:false,&#39;editorbodyclass&#39;:&#39;mdCompanyDescriptionDiv centerContainerContent&#39;,&#39;allowscriptcode&#39;:false,&#39;styleblacklist&#39;:&#39;position,visibility,display&#39;,&#39;height&#39;:&#39;320px&#39;,&#39;maxhtmllength&#39;:1000,&#39;contentcss&#39;:&#39;/Content/example.css&#39;,&#39;width&#39;:&#39;450px&#39;,&#39;ajaxcontext&#39;:&#39;!3wEWAgUOZGVmYXVsdC5jb25maWdkEMAJI0CUGcBhw1NAXQmfkQ!3QQiYTLGYczmhwKooSe6o!2&#39;,&#39;uniqueid&#39;:&#39;mdDescriptionEditor&#39;,&#39;serverbrowsertype&#39;:&#39;WinIE&#39;,&#39;editorbodyid&#39;:&#39;mdCompanyDescriptionDiv&#39;,&#39;containerid&#39;:&#39;mdDescriptionEditor&#39;,&#39;maxtextlength&#39;:1000,&#39;browserlang&#39;:&#39;en-US&#39;,&#39;attrblacklist&#39;:&#39;runat,action&#39;,&#39;folder&#39;:&#39;/richtexteditor/&#39;,&#39;tagblacklist&#39;:&#39;script,style,link,applet,bgsound,meta,base,basefont,frameset,frame,form&#39;,&#39;servertype&#39;:&#39;AspNet&#39;,&#39;uploaderid&#39;:&#39;mdDescriptionEditor_Uploader&#39;});rteloader.startLoadTimer(1);};if(window.CreateRTELoader) return initcode();var scripturl=&#39;/richtexteditor/scripts/loader.js?&#39;+new Date().getTime();var xh=window.XMLHttpRequest?new window.XMLHttpRequest():window.ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);xh.onreadystatechange=function(){ if(xh.readyState&lt;4)return; xh.onreadystatechange=new Function(&#39;&#39;,&#39;&#39;); if(xh.status!=200)return alert(&#39;Failed to load RichTextEditor loader : http &#39;+xh.status+&#39; , &#39;+scripturl); var runc=new Function(&#39;&#39;,&#39;eval(arguments[0])&#39;); runc(xh.responseText); initcode();};xh.open(&#39;GET&#39;,scripturl,true);xh.send(&#39;&#39;);' style='position:absolute;' />

    </div>

    <input type='hidden' name='mdDescriptionEditor' value='

    &lt;p&gt;

    Cras dictum. Pellentesque habitant morbi tristique senectus et netus

    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in

    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia

    mauris vel est.

    &lt;/p&gt;

    &lt;p&gt;

    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.

    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per

    inceptos himenaeos.

    &lt;/p&gt;' />

     

     

    PrepareEditor("mdDescriptionEditor", delegate(Editor editor)

    {

    editor.Text = member.Description;

    editor.Toolbar = "member";

    editor.Width = Unit.Pixel(450);

    editor.EditorBodyClass = "mdCompanyDescriptionDiv centerContainerContent"; // WHAT DOES THIS DO? I SEE IT IN THE JS GENERATED IN ONLOAD BUT OTHERWISE NOT ATTACHED TO ANY DOM OBJECT. I NEED TO STYLE THE CONTENTS OF THE EDITOR WITH CLASS NAMES.

    editor.ShowPreviewMode = false;

    //editor.ShowPreviewToolbar = false;

    editor.ShowResizeCorner = false;

    editor.AllowScriptCode = false;

    editor.ShowCodeMode = false;

    //editor.ShowCodeToolbar = false;

    editor.ShowEditMode = false;

    editor.ShowTagList = false;

    editor.ShowZoomView = false;

    editor.EditorBodyId = "mdCompanyDescriptionDiv";// WHAT DOES THIS DO? I SEE IT IN THE JS GENERATED IN ONLOAD BUT OTHERWISE NOT ATTACHED TO ANY DOM OBJECT. I NEED TO SET THE EDITOR BODY CONTAINER ID (NOT NAME) ATTRIBUTE TO ACCESS WITH JQUERY USING ALREADY WRITTEN FUNCTIONS.

    editor.MaxHTMLLength = 1000;

    editor.MaxTextLength = 1000;

    });

     

  •  07-26-2017, 9:33 AM 85353 in reply to 85349

    Re: Help with RTE

    honestly if you're new to RTE at this point i'd strongly recommend stopping using it. There's basically zero support for the countless issues this system has.

     

    Whilst i cannot suggest a good alternative I'm sure you can find one easily enough. 

     

    in any case to answer your questions:

     

    EditorBodyClass - should represent the class added to the div within the editor window (inside body)

     

    EditorBodyId  - again should similarly add an ID to the div inside the editor window (inside body)

     

    in the webform version the editor window is essentially an iframe with contenteditable divs inside its body, of which the first is the edit window, where the id and class you apply should be added - i assume the MVC version isn't very different.

     

     

     

    "I NEED TO STYLE THE CONTENTS OF THE EDITOR WITH CLASS NAMES. "

     you are supposed to be able to do this a few ways, but if the MVC version still uses an Iframe you'll struggle to style these with css based on a class in your main document. instead look at CSS in ContentCss which should let you define a CSS file to "inject" in to the iframe - although this process is flakey at the best of times (a bug i've requested assistance on over a year ago)

  •  08-05-2017, 2:41 PM 85354 in reply to 85353

    Re: Help with RTE

     Hi danpc

     

    Thanks for the help and understood on the warning. I'll keep working or workingaround to implement because the customer has already paid for it.

    Thanks

View as RSS news feed in XML