Question

I am using wysihtml5 wysiwyg editor.

The problem is that image src attribute and link href attribute are stripped from html. At server I am already getting stripped html.

How I can fix this problem?

I am using advanced.js rulest. With all rules.

Editor

UPDATE 1

Well editor.getValue and jquery().val() for textarea give same values on form submit. means that form should be sent correctly.

But I’v watched POST request which is sent from the browser. and it is without URLs. Something wrong.

UPDATE 2

If I remove from ruleset everything connected with img, nevertheless it works inproperly.

UPDATE 3

In response to Marrowmaw comment.

I am expecting:

<a href="http://domain.com/" title="Link: http://domain.com">Link</a>

But I get

<a href="" title="Link: Null">Link</a>

UPDATE 4

<div id="wysihtml5-toolbar" style="display: none;">
      <button class="btn" data-wysihtml5-command="bold">
        {{ "Bold"|trans }}
      </button>
      <button class="btn" data-wysihtml5-command="italic">
        {{ "Italic"|trans }}
      </button>
      <button class="btn" data-wysihtml5-command="createLink">
        {{ "Link"|trans }}/{{ "Unlink"|trans }}
      </button>
      <button class="btn" data-wysihtml5-command="insertUnorderedList">
        *
      </button>
      <button class="btn" data-wysihtml5-command="insertOrderedList">
        1,2,3
      </button>
      <button class="btn" data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1">
        {{ "Heading"|trans }}
      </button>
      <button class="btn" data-wysihtml5-command="insertImage">
        {{ "Image"|trans }}
      </button>

        <div data-wysihtml5-dialog="createLink" style="display: none;">
          <label>
            {{ "Link"|trans }}:
            <input data-wysihtml5-dialog-field="href" value="http://">
          </label>
          <a data-wysihtml5-dialog-action="save">{{ "Save"|trans }}</a>&nbsp;<a data-wysihtml5-dialog-action="cancel">{{ "Cancel"|trans }}</a>
        </div> 
             <!-- Dialog -->
         <div data-wysihtml5-dialog="insertImage" style="display: none;">
           <label>
             URL: <input data-wysihtml5-dialog-field="src" value="http://">
           </label>
           <label>
             Alternative text: <input data-wysihtml5-dialog-field="alt" value="">
           </label>
           <label>
                {{ "Align"|trans }}:
                <select data-wysihtml5-dialog-field="className">
                  <option value="">{{ "default"|trans }}</option>
                  <option value="wysiwyg-float-left">{{ "left"|trans }}</option>
                  <option value="wysiwyg-float-right">{{ "right"|trans }}</option>
                </select>
            </label>
           <a data-wysihtml5-dialog-action="save">{{ "Save"|trans }}</a>&nbsp;<a data-wysihtml5-dialog-action="cancel">{{ "Cancel"|trans }}</a>
         </div> 
      </div>
      <form action="{{ path('###_save_homepage') }}" method="POST" >
        <textarea id="wysihtml5-textarea" placeholder="{{ "Enter your text"|trans }}..." autofocus name="homepage"  style="width:700px;height:400px;">          
            {{ homepage|raw }}          
        </textarea> 
        <input type="submit" value="{{ "Save"|trans }}" class="btn" />  
    </form>

And JS init:

<script type="text/javascript">
jQuery(document).ready(function(){
    var editor = new wysihtml5.Editor("wysihtml5-textarea", { // id of textarea element
          toolbar:      "wysihtml5-toolbar", // id of toolbar element
          parserRules:  wysihtml5ParserRules // defined in parser rules set 
        });     

    });

</script>

Answer 1

Try taking a look at the wysihtml5-x.x.x.js file you are referencing.

They decided that they would only allow absolute URLs (in the name of guarding against XSS). The code below essentially allows you to take any value if you are comfortable with that trade off.

Ctrl-F for “var attributeCheckMethods” and make the following changes — source:

var attributeCheckMethods = {
url: (function() {
    /*var REG_EXP = /^https?:\/\//i;*/
    return function(attributeValue) {
    /*if (!attributeValue || !attributeValue.match(REG_EXP)) {
        return null;*/
    if (!attributeValue) {
        return "";
    }
    /*return attributeValue.replace(REG_EXP, function(match) {
        return match.toLowerCase();
    });*/

    var parser = document.createElement('a');
    parser.href = attributeValue;

    if (   parser.protocol == 'http:'
        || parser.protocol == 'https:'
        || parser.protocol == 'ftp:'
    ) return attributeValue;
    };
})(),