---
title: "Enkel inplace Editor"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/181551-enkel-inplace-editor"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "teddd"
published: "2009-12-07T12:04:31.000Z"
updated: "2009-12-10T13:23:08.000Z"
replies: 4
views: 723
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/181551-enkel-inplace-editor"
---

# Enkel inplace Editor

## #1 — teddd, 2009-12-07T12:04Z

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.

Permalänk: https://www.webforum.nu/p/181551

## #2 — GunnarD, 2009-12-07T12:22Z

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

Permalänk: https://www.webforum.nu/p/2216670

## #3 — teddd, 2009-12-08T20:23Z

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

Permalänk: https://www.webforum.nu/p/2216865

## #4 — Nate.A, 2009-12-08T20:31Z

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

Permalänk: https://www.webforum.nu/p/2216867

## #5 — teddd, 2009-12-10T13:23Z

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.

Permalänk: https://www.webforum.nu/p/2217028

---

Tråden på webben: https://www.webforum.nu/amne/javascript/181551-enkel-inplace-editor