htmlArea

A directory of browser-based WYSIWYG editors

  MAIN
INDEX
SEARCH
POSTS
WHO'S
ONLINE
LOG
IN

Home: htmlArea 2: htmlArea 2 & 3 archive (read only): htmlArea v2.0 - Add-Ons:
Editable Deramweaver Regions


The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.

 


groovq
Novice

May 30, 2003, 8:16 AM

Post #1 of 12 (7691 views)
Shortcut
Editable Deramweaver Regions Can't Post

Hi,

wondering if anyone has yet developed the ability to use dreamweaver templates for ediable and non-editable regions.

i have came across a website http://www.webedpro.com that has the ability as well as some other very cool features. drop down color picker, automatic loading of styles into select if loaded document contains them, spell checker.....

thanks

groovq


Luis
Veteran

May 31, 2003, 4:57 AM

Post #2 of 12 (7659 views)
Shortcut
Re: [groovq] Editable Deramweaver Regions [In reply to] Can't Post

Hi Groovk:

Some months ago, when I discovered HTMLArea, I was really impressed with the webedpro.com editor. Now, I can tell you something, from my very personal point of view:
Honestly, HTMLArea is or is very close to be the best WYSIWYG editor. The only features I still envy of webedpro.com are ContextMenus and full Form editing options.

What makes webedpro different indeed, is the CMS, but that's another ball game, out of the scope of HTMLArea.

In exchange of that and even when most of additions are not officially released or endorsed by InteractiveTools, HTMLArea has another very useful features: Open a Word Document, Save to local disk, Marquee, full edition of HR, Hebrew and other languages support (LTR, RTL), just to mention a few.

Most important, with HTMLArea you own the code, therefore you can easily customize it accordingly to the website you are going to apply it; and even most important: IT'S FREE!!

I think IT deserves a praise for this excellent tool!!

Regarding the subject of your posting: Insert templates, I have a workaround on it; go to http://webstationone.com/test/htmlarea and click on the icon.

The templates posted there are very simple. They are intended to demonstrate the function only and I have not had the time to convert into HTML the templates I'm going to use in my own CMS. (http://webstationone.com/powersites/page1.html).

To make set content editable regions up is easy. Indeed what we need to do is non-editable regions, because the editor is CONTENT EDITABLE by default.
You only need to add the attribute and set up a class for the border you assign to the non-editable regions, example:

<DIV UNSELECTABLE="ON" CLASS=neregion>SOME WORDS HERE...</DIV>

when making objects unselectable, you need to apply in both, the object tag and a div or span. UNSELECTABLE="ON"

<SPAN UNSELECTABLE="ON"><IMG alt="" hspace=0 src="yourimage.jpg" border=0 UNSELECTABLE="ON"></SPAN>

and then:

Set the styles up:
// Function : editor_defaultConfig
this.neregionStyle = 'border:1px dotted #ff0000;height:20px';

Add the style to the editor:
// create editor contents (and default styles for editor)
html += '.borders {' +config.neregionStyle+ '} \n';

take the class:
// match tags and call filterTag
contents = contents.replace(/ class=neregion/gi, '');


greetings.


Don't give up!!
http://webstationone.com/test/htmlarea


Tzvook
Novice

Jun 1, 2003, 5:36 AM

Post #3 of 12 (7635 views)
Shortcut
Re: [Luis] Editable Deramweaver Regions [In reply to] Can't Post

Hi Luis

Your solution is nice !!! works fine 4 me

Anyway, this don't solve the issue of editing a full html page which was not made for editing in the first place :-)
Another solution (quite close to yours) might be - to "tell htmlarea" to edit an area "from here" .... "till here" - not like you did .... "here not to edit" ... "and also here not to edit" ...... that way it's more close to working with templates

and don't think I found the solution for that, I'm working with a lt of bad workarounds......... :-(

======
Tzvook
======

(This post was edited by Tzvook on Jun 1, 2003, 6:58 AM)


Luis
Veteran

Jun 1, 2003, 3:43 PM

Post #4 of 12 (7607 views)
Shortcut
Re: [Tzvook] Editable Deramweaver Regions [In reply to] Can't Post

Hi Tzvook. Nice to hear of you again!! Hope everything is going well.

Let me try to understand your points:

this don't solve the issue of editing a full html page which was not made for editing in the first place

In the way as HTMLArea is built, all pages open in the editor are fully editable by default, regardless they were intended to be edited or not. Why? Because the CONTENTEDITABLE attribute is set up in editor.js

// create editor contents (and default styles for editor)
....

+ '<body contenteditable="true" topmargin=1 leftmargin=1'

therefore, because the editor is built to work in the opposite way, your approach to

Another solution (quite close to yours) might be - to "tell htmlarea" to edit an area "from here" .... "till here" - not like you did .... "here not to edit" ... "and also here not to edit" ......

can't work.

that way it's more close to working with templates....

Honestly, I don't see any difference between telling the editor to edit one part or not to edit the other. The result would be always the same, one way or the other (if the editor was built in the opposite way).

Going back to your first statement, if I understand well what your point is, and according as HTMLArea works, I will rewrite it as:

this don't solve the issue of not editing a full html page which was made for editing in the first place.

One way or the other, your templates need to be prepared for that. You need to insert to your template, either CONTENTEDITABLE="true" in a editor working as Webedpro, or UNSELECTABLE="on" in the case of HTMLArea. You could use markers, comment tags like in the templates, being substituted by <DIV UNSELECTABLE="on"> tags when loading the template and substituting them back when submiting the form, so the page keep the non-editable markers all the time, but making the portion selectable in the browser when viewing it as a webpage.

I think the concerning part, is to prevent the user of changing the content in HTML Mode. It could be done by cancelling the keyboard (keypressevent) to make the code Read-Only (like webedpro did), but I'm not sure what it implies to do in HTMLArea.

Please, let me know if I'm understanding it well or point me in the right direction of what I'm missing. I think together we can develop a good solution for this mod.


Don't give up!!
http://webstationone.com/test/htmlarea


Tzvook
Novice

Jun 1, 2003, 4:23 PM

Post #5 of 12 (7602 views)
Shortcut
Re: [Luis] Editable Deramweaver Regions [In reply to] Can't Post

Hi Luis
Yep, good to be here again :-)

What I ment was a solution like he use in Empower - 2001 ( http://www.digisoft77.com/solutions/e.php?sID=20 ) -
empower "takes" just what it needs from the edited page and is doing that by taking just the part between two snippets tags, leaving the rest untouched, that way it can solve the Iframe problem of htmlArea which must be solved somehow...

take a look at the attached picture- it is editing a static html file

by the way... you were right - it can also be the oposite - If you would completely hide all the content you don't need to edit - it might be almost the same ...

======
Tzvook
======

(This post was edited by Tzvook on Jun 1, 2003, 4:51 PM)
Attachments: empower.gif (34.9 KB)


Luis
Veteran

Jun 1, 2003, 7:13 PM

Post #6 of 12 (7585 views)
Shortcut
Re: [Tzvook] Editable Deramweaver Regions [In reply to] Can't Post

Hi again Tzvook:

I think I got it now.

Your approach is to pull out just the editable content contained inside two snippets previously added to an existing page and put that part inside HTMLArea, then put the non editable part back to the page when saving it. Nothing to do with HTMLArea nor CONTENTEDITABLE or UNSELECTABLE attributes, but with sever side scripting. Am I right?

It is the way as I use to do it. The only difference is that my pages are dynamically built on the fly and all data is stored in a database an include files. (not static html pages).

It comes to my mind an idea. What about using four sippets instead of two?

<!-- PAGE STARTS HERE -->
Your header section non editable content
<!-- BEGIN EMPOWER -->
Your Editable Content
<!-- END EMPOWER -->
Your footer section non editable content
<!-- PAGE ENDS HERE -->

When you open the page for editing, you store everything between
<!-- PAGE STARTS HERE --><!-- BEGIN EMPOWER -->
in a variable called, lets say $header, everything inside
<!-- BEGIN EMPOWER --><!-- END EMPOWER -->
in another variable called $content, which is the variable you are going to bring inside HTMLArea to be edited. and everything inside
<!-- END EMPOWER --><!-- PAGE ENDS HERE -->
in another variable called $footer.

When you submit your form, you put the previously stored $header and $footer back,

print qq~<!-- PAGE STARTS HERE -->$header<!-- BEGIN EMPOWER -->\n~;
print qq~<!-- BEGIN EMPOWER -->$content<!-- END EMPOWER -->\n~;
print qq~<!-- END EMPOWER -->$footer<!-- PAGE ENDS HERE -->\n~;

What do you think? Am I getting closer?





Don't give up!!
http://webstationone.com/test/htmlarea


Tzvook
Novice

Jun 2, 2003, 1:58 AM

Post #7 of 12 (7571 views)
Shortcut
Re: [Luis] Editable Deramweaver Regions [In reply to] Can't Post

Hi Luis

Well, that's more or less the aproach, but I think it don't have to be a server script - might be java script addon that takes

$header - stores it in #tmp
-------- content for htmlarea ------------
$header - stores it in #tmp

then in the form post - it sends back all !!!

Your solution is great, the only problem of it that it's not hiding the noneditable parts, and they are selectable, but it took me some time to realise that it's doing the job great too, now, yes, I'm also using htmlarea a lot with databases, and ther's no problem at all... - just when using it with static html pages or half static (php files with includes).

I'm trying to give my users a way to manage their existing pages and that's why I has those problems... I have one with about 1100 phtml pages (Hebrew + English).

Regs.
Tzvook

======
Tzvook
======


raymasa
Novice

Aug 21, 2003, 9:59 AM

Post #8 of 12 (7289 views)
Shortcut
Re: [groovq] Editable Deramweaver Regions [In reply to] Can't Post

Hi all,



First of all I have to agree with Luis that HTMLArea is better than webedpro. I almost bought webedpro last year, but instead decided to use HTMLArea because it was free, though (at the time) was no where near as good as webedpro. Last week, I visited Interactive tools just to see if there has been any improvements to HTMLarea, and to say that I was blown away will be an understatement.



So my heart full thanks to all those involved in this project for a great work, including all the add-ons. A special thanks to Luis for all the work he has done. Luis, I downloaded your zipped files from the webstation, and its great. Thanks for putting it up there.



Today I also revisited webedpro to see there improvements and the only thing I would like to have is the drop down menu they use for picking color and for table and foem elements. It loads instantly as opposed to the HTMLArea implementation that takes a while to pop-up.



Anyone know how webedpro implanted that, and is it possible in HTMLArea.



Thanks again



Ray


Luis
Veteran

Aug 21, 2003, 2:23 PM

Post #9 of 12 (7281 views)
Shortcut
Re: [raymasa] Editable Deramweaver Regions [In reply to] Can't Post

Hi Ramasa:

Thanks for your comments.

I'm working in a re-built of the toolbar, although it can take long.

It's possible, but it's not easy and my spare time is not much.

I'll let you know if some progress.


Don't give up!!
http://webstationone.com/test/htmlarea


raymasa
Novice

Aug 22, 2003, 10:02 PM

Post #10 of 12 (7260 views)
Shortcut
Re: [Luis] Editable Deramweaver Regions [In reply to] Can't Post

Cool...thanks Luis. And no hurry, take your time...:)

Ray


chet
User

Sep 1, 2004, 1:31 PM

Post #11 of 12 (6018 views)
Shortcut
Re: [raymasa] Editable Deramweaver Regions [In reply to] Can't Post

Hai everyone,

Did someone came up with an solution yet ?

I tried luis solution but I couldn't get it to work.
It would be real nice if something like this would be possible.

Thanks for the help


MichaelKhalsa
Novice

Sep 19, 2004, 3:58 PM

Post #12 of 12 (5924 views)
Shortcut
Re: [groovq] Editable Deramweaver Regions [In reply to] Can't Post

In regards to working with dreamweaver templates, which for practical useage is the only way to go. I just created a working solution for html area 2. Previously i was working with html area 3 and intercepting the key events in javascript to block keystrokes in uneditable areas. To create the uneditable areas i parsed the page in asp.net previously to loading it, and whereever i found a dreamweaver tag, i added my own tag. However i have found html area3 beta just too unstable, and also it hacks up source code. So now i am using html area 2 i parse the page in asp.net, create an index array where all the editable regions stop and start then i load up all of those regions onto a page, dynamicaaly creating additional textareas when i save the page, since i have preserved the editable regions index array in viewstate
(Just the name, startindex and length of each area as in the original doc) i retrieve this from viewstate and also retrieve the original file from local disk I them substitute the original editable content with the new original content This appears to work well, and has the added advantage that i am not inserting any addtional tags into code. As an example of how i get the edited content and recombine it

Private Function GetInnerHTMLForSaving(ByVal strFileName As String) As String

Dim strEditableRegions As String = ViewState("EditableRegions").ToString

' If we have no editable regions, return all contents

If strEditableRegions.Trim = "" Then

Return Me.ChangeAbsoluteImageLinksToRelative(Me.seMainEdit.InnerText)

End If

' We have editable regions

' get the original content from disk

' and replace the editable regions with changed content

Dim strLocalInsideBodyFile As String = mstrLocalDir & "\seCmInBody_" & strFileName & ".txt"

Dim strFullPage As String = Me.ReturnLocalFileAsString(strLocalInsideBodyFile)

Dim sbFull As New StringBuilder(strFullPage)

Dim intStart As Integer

Dim intLength As Integer

Dim aRegions() As String = Split(strEditableRegions, ",")

If aRegions.Length > 4 Then

' With multiple editable regions

' Start from the bottom of the page up,

' so that we can use the original editable region indexes

' for an easy job of replacement

For i As Integer = aRegions.Length - 1 To 4 Step -4

intStart =
CInt(aRegions(i - 1))

intLength =
CInt(aRegions(i))

Dim strInnerBody2 As String = Request.Form("seMainEdit" & aRegions(i - 3))

strInnerBody2 =
Me.ChangeAbsoluteImageLinksToRelative(strInnerBody2)

sbFull.Remove(intStart, intLength)

sbFull.Insert(intStart, strInnerBody2)

Next

End If

' Add the final (and in some cases the only) editable region,

' simply replace original content with changed content

intStart =
CInt(aRegions(2))

intLength =
CInt(aRegions(3))

Dim strInnerBody As String = Me.seMainEdit.InnerText

strInnerBody =
Me.ChangeAbsoluteImageLinksToRelative(strInnerBody)

sbFull.Remove(intStart, intLength)

sbFull.Insert(intStart, strInnerBody)

Return sbFull.ToString

End Function Michael Khalsa

 
 
 


Search for (options)