Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap.
To override which buttons to show, set the appropriate flags:
$('#some-textarea').wysihtml5({
"font-styles": true, //Font styling, e.g. h1, h2, etc. Default true
"emphasis": true, //Italics, bold, etc. Default true
"lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
"html": false, //Button which allows you to edit the generated HTML. Default false
"link": true, //Button to insert a link. Default true
"image": true, //Button to insert an image. Default true,
"color": false //Button to change color of font
});
Custom Templates for Toolbar Buttons
To define custom templates for buttons, you can submit a customTemplates hash with the new definitions. Each entry should be a function which expects ‘locale’ and optional ‘options’ to manage the translations.
For example, the default template used for the editHtml mode button looks like this (with size fetched from the optional ‘options’)
You can change it to not use the pencil icon (for example) by defining the custom template like this:
var myCustomTemplates = {
html : function(locale) {
return "<li>" +
"<div class='btn-group'>" +
"<a class='btn' data-wysihtml5-action='change_view' title='" + locale.html.edit + "'>HTML</a>" +
"</div>" +
"</li>";
}
}
// pass in your custom templates on init
$('#some-textarea').wysihtml5({
customTemplates: myCustomTemplates
});
This will override only the toolbar template for html, and all others will use the default.
Stylesheets
It is possible to supply a number of stylesheets for inclusion in the editor ``:</p>
<pre>
$('#some-textarea').wysihtml5({
"stylesheets": ["/path/to/editor.css"]
});
</pre>
<h3>Events</h3>
<p>Wysihtml5 exposes a <a href="https://github.com/xing/wysihtml5/wiki/Events">number of events</a>. You can hook into these events when initialising the editor:</p>
<pre>
$('#some-textarea').wysihtml5({
"events": {
"load": function() {
console.log("Loaded!");
},
"blur": function() {
console.log("Blured");
}
}
});
</pre>
<h3>Shallow copy by default, deep on request</h3>
<p>Options you pass in will be added to the defaults via a shallow copy. (see <a href="http://api.jquery.com/jQuery.extend/" title="">jQuery.extend</a> for details). You can use a deep copy instead (which is probably what you want if you’re adding tags or classes to parserRules) via ‘deepExtend’, as in the parserRules example below.</p>
<h3>Parser Rules</h3>
<p>If you find the editor is stripping out tags or attributes you need, then you’ll want to extend (or replace) parserRules. This example extends the defaults to allow the <code><strong></code> and <code><em></code> tags, and the class “middle”:</p>
<pre>
$('#some-textarea').wysihtml5('deepExtend', {
parserRules: {
classes: {
"middle": 1
},
tags: {
strong: {},
em: {}
}
}
});
</pre>
<p>There&#8217;s quite a bit that can be done with parserRules; see <a href="https://github.com/xing/wysihtml5/blob/master/parser_rules/advanced.js">wysihtml5&#8217;s advanced parser ruleset</a> for details. bootstrap-wysihtml5&#8217;s default parserRules can be found <a href="https://github.com/jhollingworth/bootstrap-wysihtml5/blob/master/src/bootstrap-wysihtml5.js">in the source</a> (just search for &#8216;parserRules&#8217; in the file).</p>
<h3>Defaults</h3>
<p>You can change bootstrap-wysihtml5&#8217;s defaults by altering:</p>
<pre>
$.fn.wysihtml5.defaultOptions
</pre>
<p>This object has the same structure as the options object you pass in to .wysihtml5(). You can revert to the original defaults by calling:</p>
<pre>
$(this).wysihtml5('resetDefaults')
</pre>
<p>Operations on the defaults are not thread-safe; if you&#8217;re going to change the defaults, you probably want to do it only once, after you load the bootstrap-wysihtml plugin and before you start instantiating your editors.</p>
<h2>The underlying wysihtml5 object</h2>
<p>You can access the <a href="https://github.com/xing/wysihtml5">wysihtml5 editor object</a> like this:</p>
<pre>
var wysihtml5Editor = $('#some-textarea').data("wysihtml5").editor;
wysihtml5Editor.composer.commands.exec("bold");
</pre>
<h2>I18n</h2>
<p>You can use Bootstrap-wysihtml5 in other languages. There are some translations available in the src/locales directory. You can include your desired one after the plugin and pass its key to the editor. Example:</p>
<pre>
<script src="src/locales/bootstrap-wysihtml5.pt-BR.js"></script>
<script type="text/javascript">
$('#some-textarea').wysihtml5({locale: "pt-BR"});
&lt;/script&gt;
</pre>
<p>It is possible to use custom translations as well. Just add a new key to $.fn.wysihtml5.locale before calling the editor constructor.</p>
Think we should add some plain english config for the toolbar buttons. You already have a nice editor-- no need to convolute it by making folks edit the template to add more options. Maybe something like an array of options to include? Like--
I want to use the editor with dynamically created textarea, but when I try to I get an error: TypeError: Cannot read property 'parentNode' of undefined
It can be reproduced using the following code:
Is it possible to utilize the ng-model: directive into the textarea that is being used with wysihtml5? Currently whenever I add the ng-model="someBinding" the form does not submit the text inside of the rich text editor.
How do I listen for specific key presses like Ctrl+K etc. on the editor? I was using the jQuery hotkeys plugin on the plain textarea, but how do I do the same for the rich text editor?
... then the editor gets updated and shows "foobar". Correctly.
I can use the editor.setValue as above to populate the editor, but I have multiple editors on a singe plage, so ideally i'd use the first scenario where i can target the instance I want to write to.
I've got bootstrap-wysihtml5 (using wysihtml5 v0.3.0_rc1) implemented in a Rails 3.2.2 app.
The form loads without any issue – no errors in the browser console, just the "heya" message from wysihtml5.js. The text area in my form appears as it should, with the dropdown and button groups for styling text. The iframe appears correctly in the page source, and I can style text within the text area.
However, when I submit the form, I'm getting the wrong HTML on the server side. Specifically, only <br> tags are posted, and any other tags are appearing as <span>.
For example, an ordered list that appears fine in the text area arrives at the server as follows:
Created a Header 1, added a numbered list, added a simple list, added a Header 2 then created a new paragraph with "lorem ipsum dolor sit amet", copied that snipped and pasted it to fill the paragraph, all styling is gone on the entire textarea.
I saw you mentioned this in a previous issue, but being able to choose the link text would be great, as many users like to select their own link text, especially as it helps with seo. Thanks for considering!
If the wysihtml5 text area is marked required, it will have the required styling (including red text) even after text has been entered in it. This is obviously due to the markup being entirely different (iframe n' all) from what Bootstrap expects. Maybe a workaround is possible?
Hello, first of all, thank you for sharing your work with us but damn, give us some documentation next time, it took me almost 2 hours to figure out how to retrieve the modified data from the "textarea" and sure it could be done easier than I did.
<sectionid="useless" class="editable-section">
You can use the following commit from hinrik to make tags work properly.
https://github.com/hinrik/bootstrap-wysihtml5/commit/d9c43dedf7be76a4e7fd3a072d573aa4c130e63d
</section><sectionid="useless" class="editable-section">
</section>
And here goes the implementation, it sucks but works:
$(function(){$('.editable-section').each(function(index){$(this).wrapInner('<div class="editable" />');//$(this).children("div.editable").load("load.php", {id: 'something'});$(this).append('<a id="edit-section" href="#"><i class="icon-edit"></i> Edit</a>');});$("a#edit-section").live("click",function(){$("#save-section").click();//save and remove other active editors so we can create a new one$(this).before('<textarea id="editable"></textarea>');$(this).prev().html($(this).prev().prev().html());$(this).prev().prev().hide();$(this).prev().show();$(this).prev().wysihtml5();$(this).parent().append('<a id="save-section" href="#"><i class="icon-share"></i> Save</a>');$(this).hide();});$("a#save-section").live("click",function(){$(this).parent().children("div.editable").html($('#editable').val());//fixed$(this).parent().children("div.editable").show();varcontent=$('#editable').val();//fixed$(this).parent().find("iframe.wysihtml5-sandbox").contents().find("html").remove();//remove iframe html$("#editable-wysihtml5-toolbar").remove();$(this).parent().find("iframe.wysihtml5-sandbox").prev().remove();$(this).parent().find("iframe.wysihtml5-sandbox").remove();//remove iframe$(this).parent().children("#editable").remove();//remove textarea$().remove(wysihtml5);$(this).prev().show();//show edit button$(this).remove();//remove save button//finally, update server content//$.post("save.php", { id: 'something', html: content } );});});
this is more of a query than an issue. I want to insert a piece of text/html into the editor after i fetch it from the server. How can i set that value in the already existing wysihtml5 editor instance.
i tried doing following
var editor = $('#sometextarea').wysihtml5().data('wysihtml5').editor;
editor.setValue('some value i want to set');
or
$('#sometextarea').val('some value');
or
$('#sometextarea').html('some html');
none of these seem to work.
can help me out on this.
thanks
using Chrome on ubuntu 11.10
The error is thrown from line number 145 of file bootstrap-wysihtml5.js when initializing a text area with the following line.
It's really unclear from the readme how to get started.
A few questions that I think should be answered:
For the two bootstrap-wysihtml5 files, wysihtml5, and bootstrap: where do they all need to be located relative to one another ot have access to each other (this is the biggest one)
Which of the possible files do I need to include at the top of a page to get it work
Do I need to download ALL of files for each of the libraries or can I just get the "end use" files?
If there were answered in the "getting started" code block in the readme, that would be really helpful.
Might be totally stupid here but I have a textarea in modal and every time I open it I want to flush the form (aka remove all text from the textareas).
I used this
var flushform = "";
$('input[name="addtstepshortdesc"]').val(flushform);
$('textarea[name="addtsteplongdesc"]').val(flushform);
$('textarea[name="addtstepexpected"]').val(flushform);
The default parserRules object contains rules only for 11 tags. This means, for example, if I add <blockquote> or <p> tags, they will be removed when switching between WYSIWYG view and HTML view.
This of course can be changed in client code, but maybe default parserRules can be extended as well?
It seems the default parserRules set for "a" is not working. target and rel are not being set after submitting the input and hitting the database. I've checked the .val() before submission and it shows no signs of the attributes being set.
Does anyone else have this issue? When i press the image button, a broken image tag shows up. If I press Cancel, it stays there. If I add an image url, the image is placed in the editor, but the broken image tag remains.
Edit: So I just noticed that the issue only happens in Firefox(I am on 12.0 beta). Chrome and Safari work fine. The demo app at http://jhollingworth.github.com/bootstrap-wysihtml5 also has this issue in Firefox.
Use the text box dropdown to select the "Heading 1" text style
Type "Heading 1"
Hit "Enter" to move to the next line
Use the text style dropdown to select the "Normal" text style
Type "Normal"
Select some text in "Heading 1"
Actual Result (Bug):
The text style dropdown maintains the "Normal" text style selection
Expected Result:
The text style dropdown updates to select the "Heading 1" text style
Notes:
This does not reproduce when using the bold and italic text styles; the state of those buttons is corectly updated depending on the style of the selected text.
When the styles dropdown is open, auto-closing doesn't work if the user clicks in the textarea. Only the area outside of the textarea properly closes the dropdown. This is an issue because the user can focus on the textarea while the dropdown is still open, which can be annoying.
I have a wysihtml5-bootstrap enabled textarea in a modal. When I click the insert link or image I get a new modal box on top of my existing modal box. Now click I close or save and all modals gets dismissed instead of the top on that I would expect.
I have not looked into the code but from the top of my head a solution would be to create modal box and close the modal box with a jQuery snippet like so: $("#wysihtml5-add-image").modal('hide'); instead of using data-dismiss="modal"
It'd be really more intuitive and easier to be able to attach events to the wysihtml5 editor if we could pass callbacks in via the options collection. Events: https://github.com/xing/wysihtml5/wiki/Events
Simple change to allow for creation of elements that have not yet been added into the dom by changing lines 145,146:
var editor = new wysi.Editor(this.el.get(0), {
toolbar: this.toolbar.get(0),
parserRules: parserRules
});
previously was:
var editor = new wysi.Editor(this.el.attr('id'), {
toolbar: this.toolbar.attr('id'),
parserRules: parserRules
});
this is also better performance as it does not require lookup of element by id by instead just passing in the node directly.
Using the editor, i'm using wysihtml5.commands.exec('insertHtml', "..."); to insert images, which works fine.
I'm trying to add a resize functionality for the images, have set allowObjectResizing option of the editor to "true", but nothing happens.
Is this option really working?