Question

我使用CKEditor存储HTML输入。单程工作正常。数据完全按照我的输入进入数据库。

但是，当我尝试在JSON中检索它时，我会收到各种解析错误。

这是一个简单的字符串搞砸了

<p>This is my text</p>

<span style="font-size:14px">More test</span>

JSON挂在双引号和空格上。所以我在插入之前在PHP中实现了这个函数。

function parseline($string){
  $string = str_replace(chr(10), "//n", $string);
  $string = str_replace(chr(13), "//n", $string);
  $string = str_replace(chr(34), "'", $string);
  $string = str_replace("'","\'", $string); 
  return $string;
}

然后该行变为

<p>This is a test and more content</p>//n<span style=\'font-size:72px\'>

然而。这仍然会挂起JSON解析。

如何从CKEditor正确存储数据，然后如何从数据库中解析数据，以便可以正确解析为JSON？

理想情况下，我想妥善保存。然后我需要反向解析// n out以在编辑器中正确显示。因为现在，如果我获得有效数据，我仍然会在编辑器中显示// n作为实际值。

我已经在这上面了6个小时了。我把头发撕掉了。

编辑 - 22小时后仍然坚持

以下是进入数据库的内容

<p>qweqweqweqwe</p>

然后我就这样（使用Lumen / laravel）

$post = Post::find($id);
return json_encode($post);

然后在Vue我得到那个json

 el:'#app',
 data : {
   post: {}
},
methods: {
  getPost: function(id){
     var that = this;
     $.ajax({
     url:'post/'+id,
     dataType:'json',
     type:'GET'
    }).done(function(data){
       // Assign the data to Vue 
       that.post = JSON.parse(data);
    }).fail(function(xhr){
   });
  }
}

此操作失败，出现此异常

 Uncaught SyntaxError: Unexpected token 
 in JSON at position 175

返回的json是

 {"uuid":"0bcb9c59-19da-4dcf-90d6-6dd53adfb449","title":"test","slug":"test","body":"<p>qweqweqweqwe</p>
 ","created_at":1519529598,"updated_at":1519534639}

显然它失败了，因为在结束后有一个Enter键＆lt; / p＆gt;。但我已经尝试在存储之前删除所有输入键和所有内容。替换为新行/ n。这有效，但后来我回来了，还有像style =“font-size：14px;”之类的东西。来自CKeditor，因为双引号也使它失败。

所以问题是。我完全按照输入的数据存储数据。正确地检索它看起来绝对不能正常工作或轻松完成。至少作为有效的json。

编辑3 - Completeley丢失并正式难倒

我以json

取回了这个

 var data = {
  "uuid": "2cd2d954-233a-46d6-8111-29596262d3bc",
  "body": "<p>test<\/p>\n",
  "cover_img": "https:\/\/static.pexels.com\/photos\/170811\/pexels-photo-170811.jpeg",
  "title": "asdf",
  "slug": "asdf",
  "created_at": 1519536364,
  "updated_at": 1519538302
}

如果我这样做

JSON.parse(data);

我一直得到

Uncaught SyntaxError: Unexpected token 
 in JSON at position 66

即使您将该确切对象复制到JSONLint.com，它也完全有效。我很难过。我觉得自己在整个职业生涯中遇到过任何问题。这很奇怪，因为它似乎很难找到。

Answer 1

将其直接存储为数据库中的HTML。根本不要修改，调整或以其他方式搞砸它 - 数据库中的内容应该是用户提交的内容。 ^{_{（像XSS保护这样的东西，解析短代码等等应该在显示器上完成，这样你就可以调整你的算法，同时仍然可以使用原始的HTML。）}}

通过json_encode运行Vue将其提供给Vue，这将正确地转义它：

$response = ['html' => $html];

return json_encode($response);

（你也可以做json_encode($html)，这将返回一个JS友好的字符串而不是JSON对象.Vue也会对此感到满意。）

生成的JSON将是：

{"html":"<p>This is my text<\/p>\n\n<span style=\"font-size:14px\">More test<\/span>"}

当你JSON.parse时，哪个Vue就可以了。

如何正确存储CKEditor HTML输入

1 个答案: