class from customized template for text alignment not put in text area

Hi I followed your instructions (https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg/wiki/Custom-Templates) as best as I could to add text alignment to my toolbar, and it looked as though it was working however, when I pressed submit on my form, the classes which the data-wysihtml5-command=‘justifyLeft’ command was putting in (‘class = “wysiwyg-text-align-left”’) were not in the submitted value for the text area so the data was lost. Actually I think it puts the text in a div with that class. The div was coming through but not the class.

Have I missed something?

I did not understand what the ‘data-wysihtml5-command-value’ was for so I guessed here - it has the same problem when I remove these attributes.

var myCustomTemplates = {
      textAlign: function(context) {
        return "<li><div class='btn-group'>" +
            "<a class='btn btn-default' data-wysihtml5-command='justifyLeft' data-wysihtml5-command-value='&justifyLeft;' title= 'Align text left'>" +
            "<span class='glyphicon glyphicon-align-left'></span></a>" +
            "<a class='btn btn-default' data-wysihtml5-command='justifyCenter' data-wysihtml5-command-value='&justifyCenter;' title= 'Align text center'>" +
            "<span class='glyphicon glyphicon-align-center'></span></a>" +
            "<a class='btn btn-default' data-wysihtml5-command='justifyRight' data-wysihtml5-command-value='&justifyRight;' title= 'Align text right'>" +
            "<span class='glyphicon glyphicon-align-right'></span></a>" +
            "</li>";
      }
    };
    editor.wysihtml5({
      stylesheets: [colorCssPath],
      "toolbar": {
        "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. Bullet"s, 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": true, //Button to change color of font
        'textAlign': true // custom defined buttons to align text see myCustomTemplates variable above
      },
      customTemplates: myCustomTemplates
    });

[ryan2johnson9]

HI @AnaxAndrade, There are 2 things i had to do.

1. make the text-alignment work when viewing the text in the wysiwyg itself before it is submitted:
2. upon submission(somewhere in a controller that receives the text from the wysiwyg), add standard text-align classes.

so for 1:

I add a css file - as you can see in the code I supplied above, there is this line here stylesheets: [colorCssPath] the colorCssPath variable is a string path to a css file in my asset pipeline that includes colors and text-alignment (because colors were not working for me either) here is my css file called app/assets/stylesheets/custom-bootstrap3-wysiwyg5.css:3

.wysiwyg-color-black {
  color: black;
}
.wysiwyg-color-silver {
  color: silver;
}
.wysiwyg-color-gray {
  color: gray;
}
.wysiwyg-color-white {
  color: white;
}
.wysiwyg-color-maroon {
  color: maroon;
}
.wysiwyg-color-red {
  color: red;
}
.wysiwyg-color-purple {
  color: purple;
}
.wysiwyg-color-fuchsia {
  color: fuchsia;
}
.wysiwyg-color-green {
  color: green;
}
.wysiwyg-color-lime {
  color: lime;
}
.wysiwyg-color-olive {
  color: olive;
}
.wysiwyg-color-yellow {
  color: yellow;
}
.wysiwyg-color-navy {
  color: navy;
}
.wysiwyg-color-blue {
  color: blue;
}
.wysiwyg-color-teal {
  color: teal;
}
.wysiwyg-color-aqua {
  color: aqua;
}
.wysiwyg-color-orange {
  color: orange;
}
.wysiwyg-text-align-right{
  text-align: right;
}
.wysiwyg-text-align-center{
  text-align: center;
}
.wysiwyg-text-align-left{
  text-align: left;
}

notice how I map the .wysiwyg-text-align-* classes to real text-align css - same with the color classes. How do I get the colorCssPath in the javascript? In my view(which is in haml) I have this line:

#wysiwyg-colours-css{ data:{ path_to_stylesheet: asset_path("custom-bootstrap3-wysiwyg5.css") } }

and in the javascript I have this line:

    var colorCssPath = $("#wysiwyg-colours-css").data('pathToStylesheet');

for 2

I use a helper that I call before saving the data from wysihtml5 (or before sending it elsewhere). I will just supply my entire helper here. app/helpers/wysihtml5_helper.rb there may be some methods you do not need like fix_for_custom_segment_tags and remove_auto_added_br

module Wysihtml5Helper

  def fix_wysihtml5_text a_html_string
    return nil if a_html_string.nil?
    result = replace_wysi_color_styles a_html_string
    result = replace_wysi_u_tag result
    result = replace_wysi_text_align_styles result
    result = fix_for_custom_segment_tags result
    result = remove_auto_added_br result
    result
  end

  # due to behaviour of Wysihtml5 we have to add inline styles for colours to appear in external programs
  def replace_wysi_color_styles(htmlContents)
    #the /(?!\sstyle="color)/ part of the reg ex is a lookahead ensures that it only gets replaced if it hasn't been replaced before
    result = htmlContents.gsub(/class="wysiwyg-color-black"(?!\sstyle="color)/, 'class="wysiwyg-color-black" style="color:black"')
    result = result.gsub(/class="wysiwyg-color-silver"(?!\sstyle="color)/, 'class="wysiwyg-color-silver" style="color:silver"')
    result = result.gsub(/class="wysiwyg-color-gray"(?!\sstyle="color)/, 'class="wysiwyg-color-gray" style="color:gray"')
    result = result.gsub(/class="wysiwyg-color-maroon"(?!\sstyle="color)/, 'class="wysiwyg-color-maroon" style="color:maroon"')
    result = result.gsub(/class="wysiwyg-color-red"(?!\sstyle="color)/, 'class="wysiwyg-color-red" style="color:red"')
    result = result.gsub(/class="wysiwyg-color-purple"(?!\sstyle="color)/, 'class="wysiwyg-color-purple" style="color:purple"')
    result = result.gsub(/class="wysiwyg-color-green"(?!\sstyle="color)/, 'class="wysiwyg-color-green" style="color:green"')
    result = result.gsub(/class="wysiwyg-color-olive"(?!\sstyle="color)/, 'class="wysiwyg-color-olive" style="color:olive"')
    result = result.gsub(/class="wysiwyg-color-navy"(?!\sstyle="color)/, 'class="wysiwyg-color-navy" style="color:navy"')
    result = result.gsub(/class="wysiwyg-color-blue"(?!\sstyle="color)/, 'class="wysiwyg-color-blue" style="color:blue"')
    result = result.gsub(/class="wysiwyg-color-orange"(?!\sstyle="color)/, 'class="wysiwyg-color-orange" style="color:orange"')
    return result
  end

  # don't use the u tags that wysihtml5 uses for underline- instead use spans and inline styles
  def replace_wysi_u_tag(htmlContents)
    #the /(?<!underline;">)/ part of the reg ex is a lookbehind and ensures that it only gets replaced if it hasn't been replaced before
    result = htmlContents.gsub(/(?<!underline;">)<u>/, '<span style="text-decoration: underline;"><u>')
    #the /(?!<\/span>)/ part of the reg ex is a lookahead and ensures that it only gets replaced if it hasn't been replaced before
    result = result.gsub(/<\/u>(?!<\/span>)/, '</u></span>')
    return result
  end
  def replace_wysi_text_align_styles(htmlContents)
    #the /(?!\sstyle="color)/ part of the reg ex is a lookahead ensures that it only gets replaced if it hasn't been replaced before
    result = htmlContents.gsub(/class="wysiwyg-text-align-left"(?!\sstyle="text)/, 'class="wysiwyg-text-align-left" style="text-align:left"')
    result = result.gsub(/class="wysiwyg-text-align-center"(?!\sstyle="text)/, 'class="wysiwyg-text-align-center" style="text-align:center"')
    result = result.gsub(/class="wysiwyg-text-align-right"(?!\sstyle="text)/, 'class="wysiwyg-text-align-right" style="text-align:right"')
    return result
  end
  # our custom tags for segments (<%= .. %> and <%+ ..%>) have been turned into &lt;%= AND %&gt; etc when within the wysiwyg editor so fix them here
  def fix_for_custom_segment_tags(a_html_string)
    result = a_html_string.gsub("&lt;", '<')
    result = result.gsub("&gt;", '>')
    return result
  end
  #wysihtml5 was adding a <br> at the end of every entry - remove this because it messes with our formatting when using <%=varaible_name%> tags
  def remove_auto_added_br(a_html_string)
    l = a_html_string.length
    if a_html_string[l-8..l-1] == "<br><br>"
      a_html_string = a_html_string[0..l-5]
    end
    return a_html_string
  end

end

Hope this helps. Let me know if you have any questions. I don’t know but maybe these problems are fixed in a more recent gem.

[ryan2johnson9]

p.s. I use the bootstrap-wysihtml5-rails gem which makes use of this project so in my last comment I was assuming that you were using ruby on rails (hence the asset-pipeline and Helper module stuff) but you may not be.