Enkel inplace Editor

4 svar · 715 visningar · startad av teddd 7 dec. 2009

tedddMedlem sedan mars 200950 inlägg

Frågan7 dec. 2009 12:04#1

Tja, behöver ett enkelt inplace editor script för denna html-kod:

<div id="content">
	<h1>Redigeringsbara stycken</h1>
	<p class="editable">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Tanken är att när man klickar på stycket så ska stycket hamna i ett redigerbart textarea-element som gör att man kan ta bort eller lägga till text. När man sedan klickar på ok, försvinner textareaelementat och den nya texten har hamnat i stycket.

GunnarDMedlem sedan juni 20014 290 inlägg

7 dec. 2009 12:22#2

Jag tycker att TinyMCE är trevligt att använda: http://tinymce.moxiecode.com/

tedddMedlem sedan mars 200950 inlägg

8 dec. 2009 20:23#3

Jo men jag är intresserad av hur javascriptet skulle se ut för just den html koden ovan...

Nate.AMedlem sedan mars 2006296 inlägg

8 dec. 2009 20:31#4

Jag såg en sån tutorial på 24 ways för ett tag sen...
http://24ways.org/2005/edit-in-place-with-ajax

tedddMedlem sedan mars 200950 inlägg

10 dec. 2009 13:23#5

jag har denna javascriptkod:

var config = {
	rows: '5',
    cols: '25',
    okButtonText: 'Redigera',
	cancelButtonText: 'Avbryt'
};

var confirmButton;

window.onload = function  () {
   var pElements = document.getElementsByTagName('*');
   for (var i=0; i < pElements.length; i++) {
    if(pElements[i].className == 'editable')
    inPlaceEditor(pElements[i]);
	};
  createSubmit();
};

function createSubmit() {
  confirmButton = document.createElement('input');
  confirmButton.setAttribute('value', 'skicka');
  confirmButton.setAttribute('width', '10');
  confirmButton.setAttribute('height', '5');
  confirmButton.setAttribute('type', 'button');
  confirmButton.observe('click', function(event) {
  
    var textareaNode = document.getElementById('mytextarea');
    var newText = textareaNode.value
    
    var p = document.getElementById('editing');
    
    var pNode = textareaNode.parentNode;
    var kids = pNode.childNodes;
    for(var i = 0; i < kids.length; i++)
    {
      pNode.removeChild(kids[i]);
    }
    
    var Node1 = document.getElementById("editing");
    Node1.removeChild(Node1.childNodes[0]);
    
    var c = document.createTextNode(newText);
    
    p.appendChild(c);
    
    p.removeAttribute("id");
    p.setAttribute("class", "editable");
    
  });
};

function inPlaceEditor(editableElement) {

editableElement.observe('click', function(event) {

if(document.getElementById('mytextarea') == null) 
{
  var oldText = this.firstChild.nodeValue;  
  
  this.removeAttribute("class");
  this.setAttribute("id", "editing");
  
  
  var textField = document.createElement('textarea'); 
  textField.setAttribute("id","mytextarea");
  textField.setAttribute("cols",config.cols);
  textField.setAttribute("rows",config.rows);

  textField.value=oldText; 

  var form = document.createElement('form');
  form.setAttribute('id','formen');

  form.appendChild(textField);
  form.appendChild(confirmButton);
  
  this.insertBefore(form, this.firstChild);
  
} 

});

}

Denna ska gå igång då man trycker nånstans inne i paragrafelementet som har classen "editable" men inget händer och jag kommer inte på vad som saknas.