wysihtml5.图像 src 和 href 被剥离答案

【问题标题】：wysihtml5. image src and href are strippedwysihtml5.图像 src 和 href 被剥离
【发布时间】：2012-08-02 08:37:44
【问题描述】：

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

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

我该如何解决这个问题？

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

Editor

更新 1

editor.getValue 和 jquery().val() for textarea 在表单提交时给出相同的值。表示应该正确发送表单。

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

更新 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 初始化：

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

【问题讨论】：

我已经更新了详细信息
html 是在发送到服务器之前被剥离，还是在客户端和服务器之间的某个地方被剥离？如果是后者，那么您可以在发送之前转义 html，并在另一端取消转义。
似乎介于 %)
添加您对value 的期望以及当前实际输出的内容。那么也许我们可以提供一些支持。这仍然很模糊。

标签： javascript html editor wysiwyg

【解决方案1】：

尝试查看您引用的 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;
    };
})(),

【讨论】：

【解决方案2】：

wysihtml5 验证标记的方式非常严格。如果 URL 或 SRC 未通过验证，则会被省略。

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

【讨论】：