31 | 32 |
33 |
34 |

angular-content-editable

35 |

add the directive then click and edit what you want

36 |
37 | Fork me on GitHub 38 |
39 | 40 |
41 | 42 |

43 | Dis is a editablle mispelld header, correkt me. 44 |

45 | 46 |

47 | The header above is enabled with the directive content-editable and you can correct it by clicking. 48 |
This is a normal non-editable paragraph instead. All the other paragraphs, but it can be anything, can be edited 49 |
simply by clicking on it. 50 |

51 | 52 |

53 | All the elements with the directive will get the content-editable class by default, you can specify your own class with the editable-class attribute. 54 |
In this example the class change the background color on hover, to easier understand which is editable and which is not. 55 |

56 | 57 |

58 | This paragraph has the focus-select attribute, this means when you focus or click on it, it will auto select all text inside. 59 |
So, you can easily edit it by clicking it and pressing Backspace to erase all text selected. 60 |
And remember, if you made a mess and you want to undo the changes simply press Esc and rollback to previous value. 61 |

62 | 63 |

64 | This element is enabled with the render-html attribute that allow to modify the html code of the content. 65 | Try clicking somewhere and you will see how it works! 66 |

67 | 68 |

69 | If you specify a valid function inside a edit callback attribute every time your model change, the callback will run 70 |
and you can make her doing all types of crazy things, like: saving the data just changed with a ajax http request, or save the data in local storage like in the example showed in this page 71 |

72 | 73 |

74 | If you specify array or simply "true" inside a strip replace attribute every time your model change, 75 |
the text will be stripped of all html tags, in case of setting strip replace to "true". 76 |
If you specify array, the array will be converted to regular expression and the text will be matched (and changed) to your parametters. 77 |

78 | 79 |
80 |