Set non-editable and editable areas


  1. Open the template file to be set.

  2. Add a non-editable / possible class name to the place where the non-editable / possible area is set.

Non-editable area → mceNonEditable
Editable area → mceEditable

<div class="mceTmpl">
	<!-- Add code below -->

	<div class"mceNonEditable">
	<!-- This is the non-editable area -->
	</div>

	<div class"mceEditable">
	<!-- This is the editable area -->
	</div>
</div>​

Points for setting non-editable / possible areas

When editing is not possible for the whole, but only part of the specific part can be edited

It is hard to add classes that are not editable and possible areas in detail. Therefore, it is impossible to edit as a whole. It is a method to make only a specific part editable.

<div class="mceTmpl">
	<!-- Add code below -->

	<div class="mceNonEditable"><!-- When set to the outermost frame, editing is disabled as a whole -->

		<h1>Sample Heading</h1>
		<p>
			Dummy text Dummy text Dummy text Dummy text Dummy text
			Dummy text Dummy text Dummy text Dummy text Dummy text
		</p>

		<div>
			<h2 class"mceEditable">Sample Heading 2</h2><!-- Editable only here -->
			<p>
				Dummy text Dummy text Dummy text Dummy text Dummy text
				Dummy text Dummy text Dummy text Dummy text Dummy text
			</p>
		</div>
	</div>
</div>

In this way, the non-editable class is assigned to the outermost frame,
After that, if only the editable part is given an editable class, the whole is made uneditable.
Only the part given the editable class can be edited.

In some cases, I didn’t want to add other elements but only wanted to change the link, so it seemed good to set as follows.

If you set an editable area in a part that becomes a frame, such as a div tag or p tag,
You can add other elements as shown below.

Therefore, in such a case, do as follows.

<div class="mceTmpl">
	<!-- Add code below -->
	<div class="mceNonEditable"><!-- When set to the outermost frame, editing is disabled as a whole -->

		<div><!-- Making this editable may include other elements. -->
			<img src="test.png" class"mceEditable"><!-- Editable only here -->
		</div>

		<div>
			<p><!-- Making this editable may include other elements. Text other than link text may change -->
				Dummy text Dummy text Dummy text Dummy text Dummy text
				<a href="test.html" class"mceEditable">link text</a><!-- Editable only here -->
			</p>
		</div>

	</div>
</div>

If you add mceEditable class of editable area to img or a tag, you can change only links and images.

※ Even if it is set to “Uneditable”, if you edit the code directly from a text editor,
If there is a plug-in that can be edited from the front side, it may be editable.