适用于使用ckEditor进行内联编辑

I'm creating an inline CMS using ckeditor. The idea is:

  • Client logs into admin area
  • Login beings a session
  • Client is directed to pages on their website where they can edit predefined regions

The regions are specified with the contenteditable attribute:

<div contenteditable="true">
  safsdfdfsdfdfsdfsdfds
</div>

Since a session is created when the client logs in, I've written some PHP that knows to enable ckEditor and all the CMS functionality if the client is logged in.

The issue I have, is when not logged in, contenteditable="true" on divs still allows you to edit them without a WYSIWYG as the default behaviour for the browser. Obviously this is no good. How do I stop users being able to edit the page?

You could setup the divs like that:

<div data-contenteditable="true">

And have a JavaScript (if in admin mode) go over all divs (document.getElementsByTagName("div")) and if they have data-contenteditable set the real contenteditable.

Otherwise let the server only include contenteditable if in admin mode

In PHP:

Create first a function that returns true if the user is logged in, then, for each editable region (in your views):

<div<?php if (your_login_check_function()) echo ' contenteditable="true"'; ?>>Lorem ipsum</div>

It's a bit tedious but it should work.

Or in jQuery (as proposed by Moritz):

Add a data-contenteditable="true" to your editable nodes, then add a script to the end of the page when the user is logged in:

<script>$('[data-contenteditable]').attr('contenteditable', true);</script>