The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

[CLOSED] Advanced HTML Editor

  1. #1

    [CLOSED] Advanced HTML Editor

    Hi Coolite Team,

    we have a requirement to have a html editor functionality in our application.For this we have evaluated your coolite html editor.it is almost matching all our requirements.we want have more functionalities like "insert table,cut,copy,redo , undo and copy from MS-word" on html editor as well .could you please suggest us how we can add these feature into coolite html editor.

    Please find the screen shot for more information.


    Thanks in advance
    Yobnet team
  2. #2

    RE: [CLOSED] Advanced HTML Editor

    Hi,

    Unfortunately, the <ext:HtmlEditor> does not contain those features, although there is a Plugin project that may provide some of your requirements.


    See http://code.google.com/p/ext-ux-htmleditor-plugins/


    Hope this helps.


    Geoffrey McGill
    Founder & CEO
  3. #3

    RE: [CLOSED] Advanced HTML Editor

    Hi,

    these UXs look cool!

    I played a bit around with it. What is the best way to add a JavaScript UX to an existing Ext.NET Control?

    Here is the sample I´ve played with:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HtmlEditorUXTest.aspx.cs"
        Inherits="etask.DEV.MP.Ext.NET.HtmlEditorUXTest" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="../ext.ux/styles.css" />
        <style type="text/css"">
            .x-edit-wordpaste
            {
                background: url(/icons/page_word-png/ext.axd/) 0 0 no-repeat !important;
            }
            .x-edit-table
            {
                background: url(/icons/table-png/ext.axd/) 0 0 no-repeat !important;
            }
            
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        
            <ext:HtmlEditor ID="TestEditor" runat="server" Width="800">
                <Plugins>
                    <ext:GenericPlugin ID="HtmlUX" runat="server" InstanceName="Ext.ux.form.HtmlEditor.Word"
                        Path="../ext.ux/Ext.ux.HtmlEditor.Plugins-0.2-all.js" />
                    <ext:GenericPlugin ID="GenericPlugin1" runat="server" InstanceName="Ext.ux.form.HtmlEditor.Table"/>
                    <ext:GenericPlugin ID="GenericPlugin2" runat="server" InstanceName="Ext.ux.form.HtmlEditor.SpecialCharacters"/>
                </Plugins>
            </ext:HtmlEditor>
        
    
        </form>
    </body>
    </html>

    It does not really work, especially if you have a look at the special character button.
    It seems to me, that I have problems iwth postbacks (plugins are added several times?) and events.

    Does anybody have an idea what´s a better way to add ux-plugins?

    Please note that you have to set the source of the UX to somewhere like "../ext.ux"in my example.



    Regards,

    Martin
  4. #4

    RE: [CLOSED] Advanced HTML Editor

    Hi,

    Can you clarify what problems do you have? Your sample works fine for me (it is required to attach css styles to see buttons images). I see new buttons and when I click to the buttons I see a window (to insert table and special character)


    Just plugins have some bugs when try to insert table or character (it seems did not test with ExtJS 3.2.1) but those bugs can be easly fixed.
    Vladimir Shcheglov
    Sr. Developer
  5. #5

    RE: [CLOSED] Advanced HTML Editor

    vladimir (5/11/2010)Hi,

    Can you clarify what problems do you have? Your sample works fine for me (it is required to attach css styles to see buttons images). I see new buttons and when I click to the buttons I see a window (to insert table and special character)


    Just plugins have some bugs when try to insert table or character (it seems did not test with ExtJS 3.2.1) but those bugs can be easly fixed.
    Yes I mean these "some bugs" for table and characters. So this has nothing to do with the way I add the UXs?


    Regards,

    Martin
  6. #6

    RE: [CLOSED] Advanced HTML Editor

    Hi Team,

    Please refer to the attached screen shot of the error page.we tried to incorporate plug-in for insert table as following

    <ext:Panel ID="panel3" runat="server">
        <Body>
            <ext:HtmlEditor ID="Editor1" runat="server" Width="930" Height="350">
                <Plugins>
                    <ext:GenericPlugin ID="HtmlUX" runat="server" InstanceOf="Ext.ux.form.HtmlEditor.Table"
                        Path="../Common/JS/Ext.ux.HtmlEditor.Plugins-0.2-all-debug.js" />
                </Plugins>
            </ext:HtmlEditor>
        </Body>
    </ext:Panel>
    We have also include required .js files.still we are getting JavaScript error(tip is undefined).please help us to resolve this error.

    Thanks&amp; Regards,

    Yobnet Team
  7. #7

    RE: [CLOSED] Advanced HTML Editor

    What happens if you use the Property "InstanceName" instead of "InstanceOf"?
  8. #8

    RE: [CLOSED] Advanced HTML Editor

    Hi,

    We fixed one issue which prevented those plugins using
    Please update Ext.Net from SVN

    Here is my test case
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
        <link href="resources/css/htmleditorplugins.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" ScriptMode="Debug" />
            <ext:HtmlEditor ID="TestEditor" runat="server" Width="950" Height="400">
                <Plugins>
                    <ext:GenericPlugin runat="server" InstanceName="Ext.ux.form.HtmlEditor.Link" Path="Ext.ux.HtmlEditor.Plugins-0.2-all-debug.js" />
                    <ext:GenericPlugin runat="server" InstanceName="Ext.ux.form.HtmlEditor.Divider"/>
                    <ext:GenericPlugin runat="server" InstanceName="Ext.ux.form.HtmlEditor.Word"/>
                    <ext:GenericPlugin runat="server" InstanceName="Ext.ux.form.HtmlEditor.FindAndReplace"/>
                    <ext:GenericPlugin runat="server" InstanceName="Ext.ux.form.HtmlEditor.UndoRedo"/>
                    <ext:GenericPlugin runat="server" InstanceName="Ext.ux.form.HtmlEditor.Divider"/>
                    <ext:GenericPlugin runat="server" InstanceName="Ext.ux.form.HtmlEditor.Image"/>
                    <ext:GenericPlugin runat="server" InstanceName="Ext.ux.form.HtmlEditor.Table"/>
                    <ext:GenericPlugin runat="server" InstanceName="Ext.ux.form.HtmlEditor.HR"/>
                    <ext:GenericPlugin runat="server" InstanceName="Ext.ux.form.HtmlEditor.SpecialCharacters"/>
                    <ext:GenericPlugin runat="server" InstanceName="Ext.ux.form.HtmlEditor.IndentOutdent"/>
                    <ext:GenericPlugin runat="server" InstanceName="Ext.ux.form.HtmlEditor.SubSuperScript"/>
                    <ext:GenericPlugin runat="server" InstanceName="Ext.ux.form.HtmlEditor.RemoveFormat"/>
                </Plugins>
            </ext:HtmlEditor>
        </form>
    </body>
    </html>
    Please note that some of those plugins are not fully implemented yet (like FindAndReplace) but mosy plugins work now
    Vladimir Shcheglov
    Sr. Developer
  9. #9

    Advanced HTML Editor

    Hi Team we tried to incorporate plug-in for insert table as following.But once we add the <Plugin tag> the page behaves differently and we are not able to see the html editor itself.Please let us know the step by step process to add table plugin to Html Editor.
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <link href="../resources/css/htmleditorplugins.css" rel="stylesheet" />
    <style type="text/css">

    .x-edit-table
    {
    background: url(../resources/images/default/editor/edit-table.png) 0 0 no-repeat !important;
    }

    .x-html-editor-tb .icon-clear
    {
    background-image:url('../resources/images/default/editor/edit-table.png');
    }
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <ext:FieldContainer runat="server" ID="FieldContainer1" Layout="HBoxLayout" LabelAlign="Right" FieldLabel="Observations" MarginSpec="10 0 50 50" Hidden="false" >
    <Items>
    <ext:HtmlEditor ID="HtmlEditor1" runat="server" Width="800" Height="200" Border="true" EnableAlignments="true"
    EnableFontSize="true" CreateLinkText="My CreateLinkText">
    <Plugins>
    <ext:GenericPlugin ID="GenericPlugin1" runat="server" InstanceName="Ext.ux.form.HtmlEditor.Table" Path="../js/Ext.ux.HtmlEditor.Plugins-0.2-all-debug.js" />
    </Plugins>
    </ext:HtmlEditor>
    </Items>
    </ext:FieldContainer>
    </div>
    </form>
    </body>
    </html>

Similar Threads

  1. [CLOSED] HTML Editor
    By ppettigrew in forum 1.x Premium Help
    Replies: 1
    Last Post: Oct 08, 2010, 4:36 PM
  2. [CLOSED] HTML editor with IE 8
    By speedstepmem3 in forum 1.x Premium Help
    Replies: 1
    Last Post: May 17, 2010, 7:59 AM
  3. [CLOSED] html editor
    By speedstepmem3 in forum 1.x Premium Help
    Replies: 1
    Last Post: Mar 24, 2009, 11:06 AM
  4. [CLOSED] html editor
    By speedstepmem3 in forum 1.x Premium Help
    Replies: 1
    Last Post: Mar 20, 2009, 7:42 AM
  5. [CLOSED] html editor
    By speedstepmem3 in forum 1.x Premium Help
    Replies: 1
    Last Post: Feb 19, 2009, 10:08 AM

Posting Permissions

Subscribe now to get the latest Ext.NET happenings in our newsletter.