wysiHtml5

[joshkurz]

Hello,

Does anyone have any good suggestions on adding wysiHtml5 to an
angular binding. I know that it uses Iframes to accomplish the rich
text editor, so would it still be possible to utilize the angular ng-
model="someBinding" directive to bind the textarea's content to the
dom structure? Currently I have the rendered the wysiHtml5 text editor
and it looks very nice, but the text does not get submitted with the
rest of the form data.

what would be the best way to accomplish this installation?
<form>


<div class="control-group" ng-class="{error: myForm.name.
$invalid}">
<div style="margin-right: 3%;"
class="label2"><label>Category</label> </div>
<input type="text" name="type" ng-model="message.type"
required>
<span ng-show="myForm.name.$error.required"
class="help-inline">
Required</span>
</div>
<div style="margin-right: 3%;" class="label2"><label>Participants</
label></div><div class='label2' style="margin-right: 35%; width:
280px;"><img src="css/images/participants.png"></div>

<div style="margin-right: 3%; margin-top:20px;"
class="label2"><label>Add Items</label></div><div style="margin-right:
40%; width: 280px; margin-top:16px;" class="label2"><img src="css/
images/addButton2.png"> (events, images, etc)</div>

<div style="margin-right: 3%; margin-top:20px;"
class='label2'><label>subject</label></div><div style="margin-right:
40%; width: 300px; margin-top:16px;" class="label2"><input type="text"
name="subject" ng-model="message.subject"></div>

{{message.subject}}
{{message.text}}
<textarea id="textarea" ng-model="message.text"
placeholder="Enter text ..." style="width: 90%; height: 200px"
autofocus></textarea>
<a href="#" class="someLink">hello</a>

<br>
<a href="#/messages" class="btn">Cancel</a>
<button ng-click="save()" ng-disabled="isClean() ||
messageForm.$invalid"
class="btn btn-primary">Save</button>
<button ng-click="destroy()"
ng-show="message._id" class="btn btn-danger">Delete</
button>
</form>

[joshkurz]

Peter,

That is a beautiful piece of code. I was able to implement the rich
text editor referenced here https://github.com/jhollingworth/bootstrap-wysihtml5/.
I have the html markup firing into a mongodb and returning the correct
markup back. I did not use your code however I should probably
implement this or something similar in the near future to go pure
angular. All I did was use jhollingworths wysiHtml5() method found in
wysihtml5.js. The critical issue that I changed to view the text
inside of the textarea after the formsubmit was simple. I changed the
ctrl that was called during my form submission like so.

http://chopapp.com/#h47c0sf1

I still am very interested in how you implemented your
RichTextEditorFactory in html. What bindings did you use?

Thank you,
Josh Kurz
I would
On Jun 11, 5:59 pm, Peter Andreas Molgaard <m...@petermolgaard.com>
wrote:
> Hi Josh,
>
> I wasn't entirely able to implement it perfectly, however I put this
> together that perhaps at least can take you some of the way or perhaps
> inspire you to a new workaround...http://chopapp.com/#un5fqyab

one question I have is do you have the html you used to implement
you editor factory? That would be a nice. I appreciate the time and
energy. I really think angular js is going to be a huge part in the
future of the internet.
>
> I hope it helps...
> Pete

[Josh Kurz]

Well Peter its been too long. 

Thanks too you I have implemented the Editor with Angular, so now the sky is the limit. I would still like to hook this editor up to the model. I am not 100% on how to do this at the moment. I would also like to build a method that crawls links and generates rich snippets automatically, like facebook. 

http://jsfiddle.net/ZguhP/30/


Josh Kurz

[Andy Joslin]

Hi Josh,

Take a look at the codemirror directive from angular-ui https://github.com/angular-ui/angular-ui/blob/master/modules/directives/codemirror/codemirror.js

[tler...@gmail.com]

Hi guys!

I've implemented an angular wrapper for wysihtml5. 

• The input is passed to the angular model only on the blur event. 
  
• The textarea auto resizes itself to fit the input length.
• If the textarea should be hidden during page load, you can broadcast the events 'wysihtml5_activate' and 'wysihtml5_desactivate' in order to init and destroy wisyhtml5 at your convenience. 

Demo: http://whatever-company.github.com/angular.js-wysihtml5/

(I've not yet implemented the toolbar, so try to format the text with the keyboard shortcuts, e.g. cmd+b)

Code: https://github.com/whatever-company/angular.js-wysihtml5

[Tyler Renelle]

I've forked whatever-company's to add the toolbar, BS3 support, and some cleanup / customizations if anyone's interested. https://github.com/CirrusCPQ/cirrus.wysihtml5