I have been playing with inline editing and I found a useful script in
/samples/inlineall.html
look for this near the top and configure the tag filters to ignore image tags
// This code is generally not necessary, but it is here to demonstrate
// how to customize specific editor instances on the fly. This fits well
// this demo because we have editable elements (like headers) that
// require less features.
That is good example but I have different structure. I have a div that is inline editable and contains image and text. Only text should be editable not image. How to acheivchievee this?
<div id="edtable1" contenteditable="true">
<div>Inline editing. This div should be editable.</div>
I haven't tried this so there might be some errors below .. but you should get the general idea.
Reading the javascript in that sample above you would need to explicitly define only tags which are contenteditable="true" rather than a blanket contenteditable="true" on all elements.
So you might write this ..
delete contenteditable="true" in div id="edtable2" which is a parent container and so applies to images and text
place contenteditable="true" in p elements and only in selected div containers
look for javascript available in /samples/inlineall.html
I have been playing with inline editing and I found a useful script in
/samples/inlineall.html
look for this near the top and configure the tag filters to ignore image tags
// This code is generally not necessary, but it is here to demonstrate
// how to customize specific editor instances on the fly. This fits well
// this demo because we have editable elements (like headers) that
// require less features.
Thanx.
Thanx.
That is good example but I have different structure. I have a div that is inline editable and contains image and text. Only text should be editable not image. How to acheivchievee this?
<div id="edtable1" contenteditable="true">
<div>Inline editing. This div should be editable.</div>
<img alt="" src="http://a.cksource.com/c/1/inc/img/demo-little-red.jpg" style="margin-left: 10px;
margin-right: 10px; float: left; width: 120px; height: 168px;"> Sample image. This image should not be editable.
<p>Editable content. This p should be editable.</p>
</div>
<div id="editable2" contenteditable="true">
Editable area. This div should be also editable.
</div>
an attempt to mix contenteditable ="true" and "false"
I haven't tried this so there might be some errors below .. but you should get the general idea.
Reading the javascript in that sample above you would need to explicitly define only tags which are contenteditable="true" rather than a blanket contenteditable="true" on all elements.
So you might write this ..
delete contenteditable="true" in div id="edtable2" which is a parent container and so applies to images and text
place contenteditable="true" in p elements and only in selected div containers
...
then amend this conditional line in javascript ..
if ( element.is( 'h1', 'h2', 'h3' ) || element.getAttribute( 'id' ) == 'taglist' ) {
to perhaps only refer to 'p' elements
if ( element.is( 'p' ) || element.getAttribute( 'id' ) == 'taglist' ) {
...
<div id="edtable1">
<div contenteditable="true">Inline editing. This div should be editable.</div>
<img alt="" src="http://a.cksource.com/c/1/inc/img/demo-little-red.jpg" style="margin-left: 10px;
margin-right: 10px; float: left; width: 120px; height: 168px;"> Sample image. This image should not be editable.
<p contenteditable="true">Editable content. This p should be editable.</p>
</div>
<div id="editable2" contenteditable="true">
Editable area. This div should be also editable.
</div>
Thanx a lot for quick
Thanx a lot for quick response friend.
another approach?
When I was researching "multiple instances" I found this reference ..
/samples/divreplace.html
which might be easier to implement? Or at least another option?
Just place the protected images in divs which do not launch editor instances.