wysihtml5。图像src和href被剥离

时间:2012-08-02 08:37:44

标签: javascript html5 editor wysiwyg

我正在使用wysihtml5所见即所得的编辑器。

问题是图像src属性和链接href属性是从html中剥离的。在服务器上我已经被剥离了html。

我如何解决这个问题?

我正在使用advanced.js规则。有了所有规则。

Editor

更新1

editor.getValuejquery().val() for textarea在表单提交上提供相同的值。表示应该正确发送表格。

但我看过从浏览器发送的POST请求。它没有网址。出了点问题。

更新2

如果我从规则集中删除与img相关的所有内容,那么它可以正常工作。

更新3

回应Marrowmaw的评论。

我期待:

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

但是我得到了

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

更新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>

和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>

2 个答案:

答案 0 :(得分:16)

尝试查看您引用的wysihtml5-x.x.x.js文件。

他们决定只允许使用绝对URL(以防御XSS的名义)。如果您对这种权衡感到满意,下面的代码基本上允许您采取任何价值。

Ctrl-F表示“var attributeCheckMethods”并进行以下更改 - 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;
    };
})(),

答案 1 :(得分:1)

wysihtml5验证标记的方式是明确严格的。如果URL或SRC未验证,则将省略它。

我会检查parser_rules / advanced.js文件。您可以删除,修改和编辑验证每个标记的规则。