Easy way to do in-browser site editing?

Need the ability to update my sites html/php through the browser...

[Baygroove]

Hello and cheers to the most amazing forum I have ever seen. I've found answers to many of my questions on this site for a lont gime, without ever needing to ask the questions.

What I need now is not the full solution but rather a push into the right direction. I am building a simple website based on very simple PHP and HTML. The site will have a standard header and footer included in every file, where the rest of the file is the main content for every page - basically following the instructions from this thread: [webmasterworld.com...]

Now I want to include RTE (open source wysiwyg/code editor) into the site, to give me the ability to edit and update the files. I have searched for instructions and tips on how to do this, but I couldn't find any way to take those first steps. So I ask you.

The site will be on [domain.com...] with files in several /folders. I would prefer to have all PHP/HTML available for ediiting, but it would also work to just edit the content files (and leave includes and template outside the editor). I have downloaded the editor, and the site is online at a temporary location during the building and testing. Now what can I do to get started? Is there any good tutorial or standard way to make the files editable? Any advice would be very appreciated. Thanks for a great forum!

[xeonaphobe]

Is it just the content you want to be able to edit, as opposed to the appearance?

[Baygroove]

Yes, only the content... I want to be able to do quick updates to the content from any computer connected to the net. The ability to edit the appearence (php, css, template) would of course be no negative thing, but it is not necessary.

I forgot to mention that I will need some kind of password-protection for the editing interface. That will probably be easy to do, once I know how to approach the whole thing!

(another option would be to not do in-line editing, I could use anything as long as it can edit the content of my pages from any computer through a pw-protected admin system)

And yes, I've looked into CMS systems. I have tried them all, but they are all way to advanced in relation to what I need.

[ergophobe]

The following is all very general because I don't know what parts you know how to do and what parts you don't. We can offer additional help on any parts that you can't figure out on your own, but this should give you some direction.

There are several open-source WYSWYG editors... I had an extensive list not so long ago, but some good ones that should all come up with minimal searching in Google

tinyMCE
HTMLArea
spaw
Man in Blue's widgEditor
FCKEditor
bitflux (cool XML implementation).
Kevin Roth? Rich Text Editor (now I'm straining my memory - this might be wrong)

Anyway, most of those integrate into your page with a bit of Javascript (bitflux being the exception) in the header and then external JS files that range from large to huge (you cna easily end up with 200KB of JS with these).

From here there are two approaches, both of which work pretty well. One is a full admin interface, which I gather you don't want because you said the CMS systems are overblown for what you want.

For simpler sites that are essentially static in structure (i.e. the content of the pages may change, but the set of pages that make up the site look pretty much the same), I prefer to do the following:

1. set up the site so that the central content area (principally the part that isn't banner, navigation, footer, etc) is in a separate file that gets included in the template, much as described in the thread you referenced, so I think you already have your site set up this way.

2. When a user is logged in, there are a set of admin links, one of which is "Edit this page".

3. Click on the Edit link and it reads the content area file into a textarea (this can either be a standard text area or one of the RTEs mentioned above.

4. They make changes and submit and then it brings the person back to view the page.

I like to add a "Validate this page" link as well so that when someone makes a change, they can send the page through the W3C validator. I am guessing that nobody actually uses this feature but me. It's nice to have though to make sure you didn't mess things up. All you need is a link like this

[validator.w3.org...]

I know this doesn't get you where you want to be, but I hope it can at least focus the next set of questions.

[Baygroove]

Thanks ergophobe! The list of editors was interesting, I'll try them out and see which one I find to be the best suited for the site. The site structure will be more or less static, as this it is a form of presentation of several similar products.

I am a newbie to PHP. I know how to edit and alter scripts, how to add simple things and how to safely remove parts of the code - but not how to make my own scripts. However, I'm learning more and more all the time. I have previously been using Wordpress (which I have stripped down to a minimal number of functions) just to get the ability to login and enter any page in an easy way. Now, I want to make my first "own" system, and since it is just the header/footer/menu includes, a content file, a login system and an editor, I hope I can manage to do it.

I would love to get a full tutorial on how to do this, but that would be my homework, so I'll stick to questions about details. ;) I will start now with the list of editors, and get back here if I encounter any problems. Perhaps some of the other editors have newbie-proof instructions...

[Baygroove]

And by the way, I do validate my pages most of the time. I don't trust my own code, hehe...

[ergophobe]

On my list it sounds like you know how to do #1 (you should be able to reuse your Wordpress code), #2 and #4 are easy.

#3 is not too hard.

extract the data from the file in question using file_get_contents [php.net]() and load that into your WYSIWYG textarea. Edit to your heart's content, and on submit, just write it back out using file_put_contents [php.net]()

Depending on your server settings how much the WYSIWYG editor does for you, there may be a bit more to it in terms of escaping code and so forth, but that should give you something to play with.

BTW Firefox and Mozilla do not play nice with WYSIWYG editors and paragraph tags. You'll likely be stuck with separating lines with <br> or with using IE or with tearing your hair out.

Opera and Safari don't play with WYSIWYG editors at all and will just give you the standard text area.