Editor Template Files

編集不可・可能領域の設定

  1. 設定するテンプレートファイルを開きます。
  2. 編集不可・可能領域の設定をする箇所に、編集不可・可能のクラス名を追加します。

    編集不可領域 → mceNonEditable
    編集可能領域 → mceEditable

    参考:

    <div class="mceTmpl">
    								<!-- この中に記述 -->
    
    								<div class"mceNonEditable">
    								<!-- この中が編集不可領域 -->
    								</div>
    
    								<div class"mceEditable">
    								<!-- この中が編集可能領域 -->
    								</div>
    
    								</div>​

編集不可・可能領域の設定のポイント

全体で編集不可、特定部分の一部のみ編集可能にする場合

編集不可と可能の領域を細かくクラス追加していくのは大変ですよね。
そこで、全体で編集不可に。特定の一部分のみ編集可能などにするする方法です。

参考:

							
								<div class="mceTmpl">
								<!-- この中に記述 -->
								<div class="mceNonEditable"><!-- 一番外側の枠に設定すると全体で編集不可に -->

								<h1>テスト見出し</h1>

								<p>
								ダミーテキストダミーテキストダミーテキストダミーテキスト
								ダミーテキストダミーテキストダミーテキストダミーテキスト
								</p>

								<div>
								<h2 class"mceEditable">テスト見出し</h2><!-- ここのみ編集可能に -->
								<p>
									ダミーテキストダミーテキストダミーテキストダミーテキスト
									ダミーテキストダミーテキストダミーテキストダミーテキスト
								</p>
								</div>
								</div>
								</div>
							
						

このように、一番外枠に編集不可のクラスを付与し、
あとは編集可能な部分にのみ、編集可能クラスを付与すると、全体は編集不可に。
編集可能のクラスを与えた部分のみが編集可能となります。

リンクのみ編集可能に設定する

他の要素は追加してほしくないけれどリンクのみ変更させたい場合があったので、下記のように設定すると良さそうでした。

divタグやpタグなど、枠となるような部分に、編集可能領域を設定すると、
下記のように他の要素を追加できてしまいます。

そこでこのような場合は下記のようにします。

							
								<div class="mceTmpl">
								<!-- この中に記述 -->
								<div class="mceNonEditable"><!-- 一番外側の枠に設定すると全体で編集不可に -->

								<div><!-- ここを編集可能にすると他の要素も入る可能性がある -->
									<img src="test.png" class"mceEditable"><!-- ここのみ編集可能に -->
								</div>

								<div>
									<p><!-- ここを編集可能にすると他の要素も入る可能性がある。リンクテキスト以外のテキストが変更される可能性がある -->
										ダミーテキストダミーテキストダミーテキストダミーテキスト
										<a href="test.html" class"mceEditable">リンクテキスト</a><!-- ここのみ編集可能に -->
									</p>
								</div>

								</div>
								</div>
							
						

imgaタグに、編集可能領域のmceEditableクラスを付与すると、リンクや画像のみの変更が可能になります。

※ 「編集不可」に設定しても、テキストエディタなどからコードを直接編集する場合や、
フロント側から編集できるようなプラグインが入っている場合は、編集可能な場合があります。