[HTML/JS] Echte inline editing op beperkt aantal elementen

[Gersomvg]

Ha mede-tweakers!

Voor een nieuwsbriefmodule ben ik op zoek naar een manier hoe ik gebruikers alleen bepaalde elementen kan laten wijzigen. Eerst een kort voorbeeldje:

HTML:

<div id="header">
  <h1 class="bewerkbaar">Nieuwsbrieftitel</h1>
</div>
<div class="text">
  <h2 class="bewerkbaar">Bedrijfsnieuws</h2>
  <p class="bewerkbaar">Nieuwsberichttekst</p>
</div>
<div id="aanbieding">
  <div id="productafbeelding">
    <p class="bewerkbaar">Productnaam</p>
    <p>€2,49</p> <!-- Niet te bewerken.. Komt uit database -->
  </div>
<div id="footer">
  <p class="bewerkbaar">Footertekst</p>
</div>
</div>

Deze html wordt als normale html in het beheersysteem geplakt. Vervolgens wil ik dat gebruikers een element (met class="bewerkbaar") kunnen wijzigen door erop te klikken. Ik wil dat er vervolgens niets verspringt (er moet dus niet ineens een wit input-veld te voorschijn komen).

Kortom: Ik wil een wysiwyg implementatie alleen dan op een willekeurige plaats in de nieuwsbrief. De prijs in bovenstaand voorbeeld staat bijvoorbeeld absoluut rechts uitgelijnd bovenop de productafbeelding.

De volgende mogelijkheden heb ik al overwogen:

• Alles in editor als TinyMCE plakken en desbetreffende stylesheet inladen. Nadeel: basisstructuur van nieuwsbrief wordt aangetast als gebruikers bijvoorbeeld één keer teveel op backspace drukken.
• Plugins als jEditable. Nadeel: zorgen er alleen voor dat er een wit input-veld komt i.p.v. echte inline editing.
• ContentEditable html-tag. Nadeel: ik lees overal op internet dat dit veel problemen geeft bij kopiëren/plakken en cross browser support. Is dit misschien wel een goede oplossing voor non-rich-text-elementen zoals een H1-tag?

Ik ben benieuwd of ik nog implementaties over het hoofd heb gezien en of dit uberhaupt haalbaar is.

[Gersomvg]

Is het voor jullie wel duidelijk wat ik precies bedoel? Als dat niet het geval is, moet ik dat natuurlijk eerst nog meer ophelderen..

[WeeJeWel]

Sja, als het aantal elementen beperkt is kun je natuurlijk wel vervangen door <input> elementen, en die netjes stijlen zoals het 'echte' element.

[Gersomvg]

In principe een logisch idee, maar stel dat je van een h2-tag dan dus een input zou maken, geef je de gebruiker niet meer de mogelijkheid om een deel van de h2 vet te maken. Dit krijg je simpelweg niet voor elkaar in een normale input..

[C0rnelis]

Gersomvg schreef op vrijdag 06 juli 2012 @ 17:17:

• Plugins als jEditable. Nadeel: zorgen er alleen voor dat er een wit input-veld komt i.p.v. echte inline editing.

Ik ben benieuwd of ik nog implementaties over het hoofd heb gezien en of dit uberhaupt haalbaar is.

Als dit echt je enige nadeel is, dan kan je zeker de input ook wel stylen ? Het lijkt mij een veel groter nadeel dat mensen niet door hebben of ze nu iets hebben opgeslagen als het zo 'seemless' gaat (tenzij je instant autosave gebruikt zoals bijv. Google Docs) en dat je de grootte van je text input misschien moet aanpassen in plaats van de tekst laten scrollen als de ingevoerde tekst meer karakters bevat dan de input kan laten zien.

Edit:
na wat googlen (combine inline edit + tinymce) kwam ik ten minste 1 ander persoon tegen die ongeveer hetzelfde vroeg op stackoverflow, maar daar helaas geen antwoord op kreeg. Een ander resultaat gaf een mogelijke kandidaat: http://wiki.fluidproject....l+-+Rich+Text+Inline+Edit

Demo: http://fluidproject.org/r...inlineEdit/rich/demo.html

[ Voor 20% gewijzigd door C0rnelis op 07-07-2012 20:46 ]

[Gersomvg]

C0rnelis schreef op zaterdag 07 juli 2012 @ 20:37:
[...]


Als dit echt je enige nadeel is, dan kan je zeker de input ook wel stylen ? Het lijkt mij een veel groter nadeel dat mensen niet door hebben of ze nu iets hebben opgeslagen als het zo 'seemless' gaat (tenzij je instant autosave gebruikt zoals bijv. Google Docs) en dat je de grootte van je text input misschien moet aanpassen in plaats van de tekst laten scrollen als de ingevoerde tekst meer karakters bevat dan de input kan laten zien.

Edit:
na wat googlen (combine inline edit + tinymce) kwam ik ten minste 1 ander persoon tegen die ongeveer hetzelfde vroeg op stackoverflow, maar daar helaas geen antwoord op kreeg. Een ander resultaat gaf een mogelijke kandidaat: http://wiki.fluidproject....l+-+Rich+Text+Inline+Edit

Demo: http://fluidproject.org/r...inlineEdit/rich/demo.html

Geen een van die bovenstaande editors kan wat ik nodig heb. Na uren zoeken (snap achteraf niet waarom het zo moeilijk te vinden was ) heb ik Aloha Editor en Etch.js gevonden.. Deze doen precies wat ik wil en werken ook vanaf IE7/IE8..

[Pkunk]

- nvm - niet goed gelezen

[ Voor 85% gewijzigd door Pkunk op 08-07-2012 15:53 ]

[Flowmo]

Deze kwam ik net tegen: http://hallojs.org/

Is misschien ook wel wat voor je, vrij simpel op te zetten en maakt op de achtergrond ook gebruik van het contenteditable attribuut.

[geert1]

In je topicstart kies je direct voor een hele specifieke oplossing voor je probleem. Bedenk wat je eigenlijke doel is: Volgens mij is dat het beheerbaar maken van een nieuwsbrief op een makkelijke manier, en met bepaalde vooraf bepaalde opmaak. Zou je hiervoor nu een professionele oplossing willen ontwikkelen, dan kost dit de nodige tijd. Daarom is het altijd slim om ook te kijken naar oplossingen die al voorhanden zijn.

Ik raad je aan te kijken naar Campaign Monitor. Dit is de beste online nieuwsbriefapplicatie die ik heb gezien en deze bevat een hele krachtige thema-editor. Waar je zelf bepaalde "brokken" content voor klaar kunt zetten, die beheerders dan in de nieuwsbrief kunnen plaatsen in bepaalde volgorde en met eigen inhoud. Nederlandse taal is beschikbaar, je kunt de admin voorzien van een eigen logo en stijl en er zijn veel mogelijkheden voor analyse van campagnes. Het verzenden en beheren werkt erg professioneel en toch makkelijk genoeg om door leken gebruikt te worden. Het enige nadeel is dat het een losse tool is, die niet is geïntegreerd in een CMS. Dit nadeel wordt naar mijn idee ruim gecompenseerd door de tijdwinst en hoge kwaliteit van deze app. Sinds ik deze heb gebruikt, zie ik weinig reden om zelf ooit iets te bouwen op dit gebied, aangezien het vaak qua features en professionaliteit onder doet voor Campaign Monitor. Ik ben niet aan ze gelieerd ofzo, maar ik ben er erg over te spreken. Een aanrader dus

[ Voor 11% gewijzigd door geert1 op 13-07-2012 11:54 ]