学习笔记

  > 关于summernote编辑器代码段html的插入问题

关于summernote编辑器代码段html的插入问题

最近在做这个视频学习网站的时候,由于这个程序的代码编辑器使用的是summernote,所以就需要插入代码,让大家看的更清楚一点,之前想过使用一些高亮的插件,但是发现没有太大必要,只要大家看的清楚就可以了。

本身在这个编辑器里就一个代码段,查看源代码我们不难发现其本身就是增加了<pre>标签。这样我们就可以通过前台进行对pre标签的css,进行展示。

参见效果。http://study.caisangzi.com/article/show/47

不过发现在后台插入的时候没有太大问题,但是更改的时候,发现从数据库取出的数据,被浏览器给识别了,这就造成修改保存出现了很大的问题。

仔细翻看了网上的资料发现,究其根本原因就是html的转义问题,summernote并没有对单双引号进行转义,所以,我需要在提交到数据库的时候使用一些方法进行转义,然后在输出的时候再次转义一下。

方法就是,PHP htmlentities() 函数,参考地址:http://www.w3school.com.cn/php/func_string_htmlentities.asp

又由于本身网站就是utf8的统一编码,所以不需要考虑编码的问题。

贴出代码

public function update_article($id)
	{
		$id = !empty($id) ? intval($id) : exit('param id error');
		$title 			= $this->input->post("title");
		$body 			= $this->input->post("body");
		$body 			= htmlentities($body);
		$des 			= $this->input->post("des");
		$keywords 		= $this->input->post("keywords");
		$cid 			= $this->input->post("cid");
		$pic 			= $this->input->post("pic_url",TRUE) == '' ? $this->pic_default($cid) : $this->input->post("pic_url",TRUE);
		$author 		= $this->input->post("author");
		$video_url		= $this->input->post("video_url");
		$re_id			= $this->input->post("re_id");

这里是关键

$body 			= $this->input->post("body");
$body 			= htmlentities($body);

然后我们在前台输入的时候使用html_entity_decode,再将转义的代码再次转义回来。

<div class="content">
<?php echo html_entity_decode($article['body']); ?>
</div>

问题解决,需要注意的地方,猜测,summernote本身在初始化的时候可以识别转义的代码,所以在它初始化之前不需要进行转移输出。

第二,注意在如果使用的也是ci框架,记得这里的true要去掉。

$body = $this->input->post("body",TRUE);


最主要的问题就是html在php程序下的转义实现。

发布时间:2017-09-26,08:46:39

关于summernote编辑器代码段html的插入问题,主要问题就是因为html转义的的问题。

作者:澎蠡

让学习成为一种习惯,让知识交流变成一种生活方式。