[CLOSED] HTML Editor Cursor

  1. #1

    [CLOSED] HTML Editor Cursor

    hi.

    How do i get the location of the cursor in the HTML editor. I tried using the textareaEl but that does not have the values. any ideas.
    Last edited by geoffrey.mcgill; Sep 29, 2012 at 2:10 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Will the insertAtCursor method suite your needs?
    http://docs.sencha.com/ext-js/4-1/#!...insertAtCursor
  3. #3
    Hi,

    Yes that method works for me but with a hitch. I am inserting some text in the htmleditor on double click of a gridpanel row. The text gets inserted but the cursors moves to beginning of the editor instead of staying infront of the input text. see image below. is there a way to force the cursor to end of text in the editor.

    Click image for larger version. 

Name:	htmleditor.png 
Views:	86 
Size:	16.7 KB 
ID:	4810
  4. #4
    Please clarify do you just need to add a new text at the end, i.e. append?
  5. #5
    hi,

    I am using the
    insertAtCursorAt
    method to insert some text at the current cursor location, the text gets inserted as expected but the cursor moves to the start of the editor (index 0) instead of staying ahead of the inserted text.
  6. #6
    Thank you for clarification.

    But I am unable to reproduce. Tested with FireFox.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test1", "test2", "test3" },
                    new object[] { "test4", "test5", "test6" },
                    new object[] { "test7", "test8", "test9" },
                };
                store.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                                <ext:ModelField Name="test3" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test1" DataIndex="test1" />
                    <ext:Column runat="server" Text="Test2" DataIndex="test2" />
                    <ext:Column runat="server" Text="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server">
                    <Listeners>
                        <Select Handler="App.HtmlEditor1.insertAtCursor(Ext.String.format(' the #{0} row is selected ', index));" />
                    </Listeners>
                </ext:RowSelectionModel>
            </SelectionModel>
        </ext:GridPanel>
    
        <ext:HtmlEditor ID="HtmlEditor1" runat="server" />
    </body>
    </html>
  7. #7
    Hi,

    The issue seem to be related to MVC. See sample below
    
    View
    
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Simple Array Grid - Ext.NET Examples</title>
        <script src="/Scripts/Exporter.js" type="text/javascript"></script>
        <style type="text/css">
            .x-grid-row-over .x-grid-cell-inner {
                font-weight : bold;
            }
            
            .red {background-color:red !Important;}
            
            .blue {background-color: Aqua !Important;}
        </style>
    
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
    </head>
    <body>
    
    <form id="form1" class="x-hidden"></form>
       
        <ext:ResourceManager runat="server" />
        
        <h1>Simple Array Grid</h1>
    
        <ext:Viewport Layout ="border" runat ="server">
            <Defaults>
               
            </Defaults>
            <Items>
                <ext:GridPanel IDMode ="Static"  ID ="gridPanelCompanyInformation" runat="server" Region ="North" Title="Array Grid" Width="600" Height="350">
                    <TopBar>
                        <ext:Toolbar runat ="server">
                            <Items>
                                <ext:Button Text ="Export" runat ="server">
                                    <Listeners>
                                        <Click Handler="Exporter.ShowModal()" />
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Store>
                        <ext:Store runat="server">
                            <Model>
                                <ext:Model runat="server">
                                    <Fields>
                                        <ext:ModelField Name="company" />
                                        <ext:ModelField Name="price" Type="Float" />
                                        <ext:ModelField Name="change" Type="Float" />
                                        <ext:ModelField Name="pctChange" Type="Float" />
                                        <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel>
                        <Columns>
                            <ext:Column runat="server" Text="Company" DataIndex="company"   Flex="1" />
                            <ext:Column runat="server" Text="Price" DataIndex="price">
                                <Renderer Format="UsMoney" />
                            </ext:Column>
                            <ext:Column runat="server" Text="Change" DataIndex="change">
                                <Renderer Fn="change" />
                            </ext:Column>
                            <ext:Column runat="server" Text="Change" DataIndex="pctChange">
                                <Renderer Fn="pctChange" />
                            </ext:Column>
                            <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:RowSelectionModel runat="server" />
                    </SelectionModel>
                    <Listeners>
                    <ViewReady Handler ="Exporter.Initialize();" />
                    <%--<CellClick  Fn = "Exporter.GetTableViewCellClicked" />--%>
                    <ItemDblClick Handler="App.HtmlEditor1.insertAtCursor(Ext.String.format(' the #{0} row is selected ', index));" />
                    </Listeners>
                </ext:GridPanel>
    
                <ext:HtmlEditor ID="HtmlEditor1" runat="server" Region="Center" Height="100" />
            </Items>
        </ext:Viewport>  
    </body>
    </html>


    Controller


        public class ExporterController : Controller
        {
            //
            // GET: /Exporter/
    
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult ExportToExcel(string Xml)
            {
                XslCompiledTransform transform = new XslCompiledTransform();
                var submitData = new Ext.Net.SubmitHandler(Xml);
                XmlNode xmlNode = submitData.Xml;
                byte[] resultFileContent = System.Text.Encoding.UTF8.GetBytes(xmlNode.OuterXml);
                string contentType = string.Empty;
    
    
                var s = new StringBuilder();
                var settings = new XmlWriterSettings()
                {
                    ConformanceLevel = ConformanceLevel.Auto
                };
                FileContentResult result = null;
    
                contentType = "application/vnd.ms-excel";
                transform.Load(Server.MapPath("/content/Excel.xsl"));
    
                MemoryStream m = new MemoryStream(resultFileContent);
                XPathDocument xpathDoc = new XPathDocument(new StreamReader(m));
                StringBuilder resultString = new StringBuilder();
                XmlWriter writer = XmlWriter.Create(resultString);
                transform.Transform(xpathDoc, writer);
                resultFileContent = Encoding.UTF8.GetBytes(resultString.ToString());
                result = new FileContentResult(resultFileContent, contentType);
                result.FileDownloadName = "Temp.xls";
                return result; 
                return result;
            }
    
    
            public ActionResult ModalWindow()
            {
                Ext.Net.MVC.PartialViewResult partialViewResult = new Ext.Net.MVC.PartialViewResult();
                partialViewResult.RenderMode = RenderMode.RenderTo;
                partialViewResult.Model = new ExportWorkitemsWindowModel();
                partialViewResult.SingleControl = true;
                partialViewResult.ViewName = "ModalWindow";
                return partialViewResult;
            }
    
        }

    Javascritpt File

    Exporter = {
    
    
        Initialize: function () {
            var data = new Array();
            var item = { company: "Company1", price: 4852, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
            data.push(item);
            item = { company: "Company1", price: 4852, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
            data.push(item);
            item = { company: "Company1", price: 45345, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
            data.push(item);
            item = { company: "Company1", price: 64554, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
            data.push(item);
            item = { company: "Company1", price: 4852, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
            data.push(item);
            item = { company: "Company1", price: 6654, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
            data.push(item);
            item = { company: "Company1", price: 9006, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
            data.push(item);
            item = { company: "Company1", price: 1234, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
            data.push(item);
            item = { company: "Company1", price: 6456, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
            data.push(item);
            item = { company: "Company1", price: 5357, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
            data.push(item);
            item = { company: "Company1", price: 8723, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
            data.push(item);
            item = { company: "Company1", price: 6672, change: 0.2, pctChange: 0.03, lastChange: "9/1 12:00am" };
            data.push(item);
    
            App.gridPanelCompanyInformation.store.loadData(data);
        },
    
        Export: function () {
    
            Ext.net.DirectEvent.request({
                url: '/Exporter/ExportToExcel',
                type: "submit",
                isUpload: true,
                formId: Ext.fly('form1'), // form1 is id of existing html form
                cleanRequest: true,
                success: function (result) {
                    alert(result);
                },
                failure: function (result, request) {
                    alert(result);
                },
                extraParams:
                     {
                         Xml: Ext.encode(App.gridPanelCompanyInformation.getRowsValues())
                     }
            });
    
        },
    
        GetTableViewCellClicked: function (grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
            var column = grid.headerCt.getHeaderAtIndex(cellIndex);
            //column.metaData.style = "background-color:grey";
            grid.refresh();
            var value = record.get(column.dataIndex);
        },
    
        ShowModal: function () {
            Ext.net.DirectEvent.request({
                url: '/Exporter/ModalWindow',
                type: "load",
                cleanRequest: true,
                extraParams:
                      {
                      }
            });
    
    
        }
    
    
    }

    verify the behaviour of the cursor.
    Last edited by Daniil; Sep 21, 2012 at 7:24 AM. Reason: Please use [CODE] tags
  8. #8
    It works in firefox but not IE 9.
  9. #9
    Unfortunately, it is IE behavior. It doesn't maintain a cursor position in such scenario.

    I am afraid we can't change this behavior.
  10. #10
    hi,

    Thanks Danil, will just put that down as a known issue.

Similar Threads

  1. [CLOSED] HTML EDITOR - Insert Value in last location of cursor
    By nirajrdave in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 23, 2012, 4:58 AM
  2. Html Editor Help.
    By ozayBK in forum 1.x Help
    Replies: 13
    Last Post: Apr 28, 2010, 10:42 PM
  3. html editor
    By [WP]joju in forum 1.x Help
    Replies: 3
    Last Post: Dec 21, 2009, 9:23 AM
  4. 0.82 html editor bug
    By [WP]joju in forum Bugs
    Replies: 3
    Last Post: Dec 21, 2009, 1:48 AM
  5. html editor in IE8
    By [WP]joju in forum 1.x Help
    Replies: 0
    Last Post: Dec 02, 2009, 10:24 AM

Posting Permissions