CI富文本编辑器

[Wscats]

ckeditor官网
引入js和css文件

<script src="<?php echo base_url('assets/lib/ckeditor/ckeditor.js');?>"></script>
<link rel="stylesheet" href="<?php echo base_url('assets/lib/ckeditor/samples.css');?>">
<link rel="stylesheet" href="<?php echo base_url('assets/lib/ckeditor/neo.css');?>">

在视图显示富文本编辑器的html结构，注意不要把注释写在id为editor的闭合标签里面，不然后面提交的时候会把注释也提交上去，刚开始可以用php显示数据库的html结构

<main>
	<div class="grid-width-100">
		<!--数据库拿出来的html结构渲染到富文本编辑器-->
		<div id="editor">
			<?php echo $news[0]['text'];?>
		</div>
	</div>
</main>
<input type="submit" name="submit" onclick="submitNewsDetail()" value="提交修改" />

当我们富文本经过初始化后，我们就可以尝试来获取富文本编辑器编写的html结构

//富文本编辑器初始化，来自ck demo
if(CKEDITOR.env.ie && CKEDITOR.env.version < 9)
	CKEDITOR.tools.enableHtml5Elements(document);

CKEDITOR.config.height = 150;
CKEDITOR.config.width = 'auto';

var initSample = (function() {
	var wysiwygareaAvailable = isWysiwygareaAvailable(),
		isBBCodeBuiltIn = !!CKEDITOR.plugins.get('bbcode');

	return function() {
		var editorElement = CKEDITOR.document.getById('editor');

		// :(((
		if(isBBCodeBuiltIn) {
			editorElement.setHtml('<h1>Hello world1!</h1><p>I&#39;m an instance of <a href="http://ckeditor.com">CKEditor</a>.');
		}

		// Depending on the wysiwygare plugin availability initialize classic or inline editor.
		if(wysiwygareaAvailable) {
			CKEDITOR.replace('editor');
		} else {
			editorElement.setAttribute('contenteditable', 'true');
			CKEDITOR.inline('editor');

			// TODO we can consider displaying some info box that
			// without wysiwygarea the classic editor may not work.
		}
	};

	function isWysiwygareaAvailable() {
		// If in development mode, then the wysiwygarea must be available.
		// Split REV into two strings so builder does not replace it :D.
		if(CKEDITOR.revision == ('%RE' + 'V%')) {
			return true;
		}

		return !!CKEDITOR.plugins.get('wysiwygarea');
	}
})();
initSample();

获取html内容，然后可以通过表单提交或者ajax把html结构存进数据库
这里举例用ajax提交富文本数据

• 1、获取CKEditor被选中的内容

var mySelection = CKEDITOR.instances.ckStem.getSelection();

• 2、获取CKEditor纯文本

var stemTxt=CKEDITOR.instances.CKEditor1.document.getBody().getText(); //取得纯文本  

• 3、获取CKEditor带HTML标签的文本

var stem = CKEDITOR.instances.CKEditor1.getData();

我这里使用了CKEDITOR.instances.editor.getData()来获取富文本html内容

//用ajax提交ck编辑信息
function submitNewsDetail() {
	console.log($("[name='title']").val());
	$.ajax({
		type: "POST",
		url: "<?php echo site_url('news/edit_by_ck?id='.$id);?>",
		data: {
			title: $("[name='title']").val(),
			//获取富文本的html内容
			text: CKEDITOR.instances.editor.getData(),
			channel: $("[name='channel']").val(),
		},
		async: true,
		success: function(data) {
			console.log("已经成功提交");
			console.log(JSON.parse(data));
			//成功后返回新闻列表详细页面
			window.location.href = "<?php echo site_url('news/show');?>"
		}
	});
}