1

我正在 RoR 中制作一个简单的博客。当我编辑帖子时，我丢失了代码片段中的所有换行符。如何确保在重新加载帖子内容时，编辑器正确格式化代码片段？

这是文本编辑器的输入：

A B

这是使用自定义按钮生成的 froala 编辑器中的源代码：

<pre><code>A B</code></pre>

这是插入数据库的数据：

"<pre><code>A\r\nB</code></pre>"

这是它在网页上的样子：

在此处输入图像描述

这是我尝试更新帖子时在 Froala 编辑器中的样子：

在此处输入图像描述

这次的源代码是这样的：

<pre><code>AB</code></pre>

这是自定义按钮的代码：

customButtons: {
insertCode: {
title: 'Insert code',
  icon: {
    type: 'font',
      value: 'fa fa-code'
  },
    callback: function() {
      if (!this.selectionInEditor()) {
        this.$element.focus(); // Focus on editor if it's not.
      }

      var html = '<pre><code>' + (this.text() || '&#8203;') + '<span class="f-marker" data-type="false" data-id="0" data-fr-verified="true"></span><span class="f-marker" data-type="true" data-id="0" data-fr-verified="true"></span></code></pre>';

      this.insertHTML(html);
      this.restoreSelectionByMarkers();
      this.saveUndoStep();
    }
  }
}

- - - - - - - - - - - - -更新 - - - - - - - - - - - - -----

问题似乎与 froala 启动功能有关：

第 1 步：创建一个包含以下内容的文本区域：

<textarea id="froalaedit" name="content">
<pre><code>A
B</code></pre>
</textarea>

第 2 步：添加一个按钮来启动 froala 编辑器：

<button onclick="myFunction()">Click me</button>

<script>
function myFunction(){
  $('textarea#froalaedit').editable({
    inlineMode: false,
    buttons: ['html', 'removeFormat', 'sep', 'undo', 'redo', 'sep', 'insertHorizontalRule', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'sep', 'fontFamily', 'fontSize', 'color', 'sep', 'formatBlock', 'blockStyle', 'align', 'sep', 'insertOrderedList', 'insertUnorderedList', 'sep', 'createLink', 'insertImage', 'insertVideo', 'table', 'uploadFile', 'fullscreen', 'insertCode'],
    minHeight: 200,
    customButtons: {
      insertCode: {
        title: 'Insert code',
        icon: {
          type: 'font',
          value: 'fa fa-code'
        },
        callback: function() {
          if (!this.selectionInEditor()) {
            this.$element.focus(); // Focus on editor if it's not.
          }

          var html = '<pre><code>' + (this.text() || '&#8203;') + '<span class="f-marker" data-type="false" data-id="0" data-fr-verified="true"></span><span class="f-marker" data-type="true" data-id="0" data-fr-verified="true"></span></code></pre>';

          this.insertHTML(html);
          this.restoreSelectionByMarkers();
          this.saveUndoStep();
        }
      }
    }
  })
};
</script>

第 3 步：按下按钮时复制行为。

- - - - - - - - - - 固定的 - - - - - - - - - - - -

做过这个：

<div id="eg-textarea"><%= @post.content.html_safe %></div>

而不是这个：

<%= f.text_area :content, rows: 40, id: 'eg-textarea' %>
4

1 回答 1

1

\n里面有问题，textarea没有正确渲染。您可以使用 adiv而不是 textarea 或使用 Github 的主版本来解决该问题。

于 2015-05-19T13:36:03.127 回答