Menu icon Foundation
HTML WYSIWYG Editor

Is there a working HTML5 WYSIWYG Editor for ZURB Foundation 5?

WYSIWYGEditorFoundation 5

Is there a working HTML5 WYSIWYG Editor for ZURB Foundation 5?

Bionic Click over 5 years ago

I am looking for this as well, however I have been using the tinyMCE editor and attaching it to specific text areas via css selectors in the tinyMCE code block.

Patrick Fraley over 5 years ago

I know about tinyMCE and also CKEditor, but both dont fit in design wise, and also they have some quirks which I do not like (like inserting links thru a pop window, etc.)

Is there no other option?

Karl Ward over 5 years ago

I doubt you will find a dedicated html editor for Foundation, as I don't see why anyone would go through the trouble to limit an editor like that. You might find some new light editors with less styling that easier integrate with the default Foundation styles.

Patrick Fraley over 5 years ago

Well it does not have to be dedicated to foundation, but at least it should be lightweight and if possible themable. There are a number of them for twitter bootstrap, which I was thinking about using or adapting.

Has anyone ever used any of the lightweight html editors with zurb foundation?

Patrick Fraley over 5 years ago

Just found this Editor:

http://jqueryte.com/

Seems to be styled pretty easily and only requirement is jquery. I guess I will try this out. I will post my findings when I get done :)

Jordan Vrtanoski over 5 years ago

Try http://pinegrow.com
Looks like nice editor

Eric Bishard almost 5 years ago

ckeditor is infact a great Rich Text Editor for Foundation and if you don't believe me, take a look at it in action here:

http://appstigate.com/smarteradmin/editor.html

That is a Foundation template that uses ckeditor. Will you have to do some tweaking YES, but you are not going to find an implementation of a Rich Text Editor that you will not have to tweak to fit your needs.

I have not used this next one, but http://quilljs.com/ is supposed to be great, but none of these are made for use with foundation. They are made for use with web apps, oh wait if you're using Foundation, you are probably building a web app.

A question like this is more suited for a Bootstrap forum. Foundation is not your all inclusive framework and there is no reason they would build a Foundation Rich Text Editor, it's too specific.

Jacob Brooks almost 5 years ago

just curious as to why you wouldn't use Sublime Text 3 with Foundation snippits and Emmet? I don't mean to sound harsh, I am just trying to give you alternate options. I realize that ST3 isnt a WYSIWYG editor but with those 2 addons, building websites with Foundation 4 or 5 is quick and easy. If you haven't used them, let me know and I can help you out.

Neal almost 5 years ago

Here is one example of a foundation website that uses a html editor. https://www.foundationdeck.com/templates/smarteradmin/editor.html

Here is the download link for the editor http://ckeditor.com/

Darek Wędrychowski almost 5 years ago

Jordan Vrtanoski & Jacob Brooks, the OP asks about Rich Text Editors that let you use more options for a textarea element. As much as I like Sublime Text and as much as Pinegrow looks nifty, they won't do the trick. ;-)

Personally I use CKEditor with CSS tweaked to fit my designs. It also works fine with Angular so it's good for Foundation for Apps.

The best thing about CKEditor is that its inline mode is so amazing - it lets you to use Single Page Apps frameworks power to the fullest. And using it, you don't have to care about your design at all, as it just perfectly blends into your website.

Rafi Benkual almost 5 years ago

There is a great one built by Joe Workman that is based on Rapidweaver: http://foundation.joeworkman.net/

Mhairi Longmuir almost 2 years ago

Has anyone found one that will work with Foundation 6 on the server - something like a WYSIWYG editor, but one that will be compatible with text areas that have foundation components in them?

 

Here is an example file that I want it to work with: https://goo.gl/o5C9yr 

 

Cheers

Nick Schild over 1 year ago

I believe what you are looking for is Bootstrap/Foundation Editor plugin for TinyMCE/CKeditor. 

You can find more about it here: https://js.plus/products/bootstrap-editor

Be sure to use the promo code: 7DISCOUNT for a 7% off discount. 

We are using it in one of our projects and the support team has been really helpful too.