我正在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() || '​') + '<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:
<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() || '​') + '<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' %>