[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

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.

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:

Code:

<%@ 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

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.

RE: [CLOSED] Advanced HTML Editor

Quote:

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

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

Code:

<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& Regards,

Yobnet Team

RE: [CLOSED] Advanced HTML Editor

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

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

Code:

<%@ 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

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>