时间戳

首页 > 解决方案 > 将 css 代码加载到 textarea 在最后一行添加 1

javascript - 将 css 代码加载到 textarea 在最后一行添加 1

问题描述

我正在将我的 css 文件的内容加载到我的 textarea 中，但不知何故 textarea 无法正确显示它。第一行和最后一行还是不正确。

例如，我正在加载这样的内容：

.notifications {
  position: fixed;
  z-index: 9999;
}

...

.notifications > div {
  position: relative;
  margin: 5px 0px;
}

但是 textarea 像这样格式化它：

                .notifications {
  position: fixed;
  z-index: 9999;
}

.notifications > div {
  position: relative;
  margin: 5px 0px;
}1

不知何故，第一行添加了很多空格，最后一行添加了“1”。如果我删除文本区域中的空格和“1”并保存它，我会发送以下“有效负载”：

"""
.notifications {\n
  position: fixed;\n
  z-index: 9999;\n
}\n
\n
/* Positioning */\n
.notifications.top-right {\n
  right: 10px;\n
  top: 25px;\n
}\n
\n
.notifications.top-left {\n
  left: 10px;\n
  top: 25px;\n
}\n
\n
.notifications.bottom-left {\n
  left: 10px;\n
  bottom: 25px;\n
}\n
\n
.notifications.bottom-right {\n
  right: 10px;\n
  bottom: 25px;\n
}\n
\n
/* Notification Element */\n
.notifications > div {\n
  position: relative;\n
  margin: 5px 0px;\n
}
"""

这是html：

<div class="form-group">
    <textarea class="form-control" rows="10" class="js-public-css" name="public_css">
        {{ include resource_path("/{$file}") }}
    </textarea>
    <input type="hidden" class="js-css-file-name" value="{{ $fileValue }}">
    <button type="button" class="btn btn-success js-update-css-file-btn">
        Speichern
    </button>
</div>

这是js：

    $('.js-update-css-file-btn').click(function () {
        const content = $(this).prev().prev().html();
        const file = $(this).prev(".js-css-file-name").val();
        // console.log("content"+content);
        // console.log("file"+file);
        axios.post('brand/update', {
            file: file,
            content: content
        })
        .then((response) => {
        })
        .catch((error) => {
        })
    })

我不知道为什么会发生这种情况。

标签： javascripthtmlcsslaraveltextarea

解决方案

您确实会在 textarea 中添加空格，因为textareaHTML 中的标签之间确实有空格，因此您需要将它们彼此相邻放置 ( <textarea>...</textarea>)。

您得到的 1 可能是因为您的 Axios 查询正在处理您的 CSS 内容，就像它是 JSON 一样。将您的查询格式标题设置为纯文本。

推荐阅读