富文本编辑器

官方文档: http://simditor.tower.im/docs/doc-usage.html

link rel="stylesheet" type="text/css" href="[style path]/simditor.css" />

<script type="text/javascript" src="[script path]/jquery.min.js"></script>
<script type="text/javascript" src="[script path]/module.js"></script>
<script type="text/javascript" src="[script path]/hotkeys.js"></script>
<script type="text/javascript" src="[script path]/uploader.js"></script>
<script type="text/javascript" src="[script path]/simditor.js"></script>

注意

Simditor基于jQuery和module.js。
hotkeys.js用于绑定热键。
uploader.js与上传文件有关。如果您不需要上传功能,则不需要导入此文件。
在您的项目中使用Simditor
要使用Simditor,首先,你需要一个textarea像这样的元素:


初始化Simditor:

var editor = new Simditor({
textarea: $('#editor')
//optional options
});

自定义:

// 初始化simditor的函数
$(function() {
var editor,toolbar;
toolbar = ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'];
Simditor.locale = 'zh-CN';
editor = new Simditor({
textarea: $('#simditor'),
toolbar: toolbar,
pasteImage: true
});
// 加到window上去,其他地方才能访问到editor这个变量
window.editor = editor;
});

// 添加文章的执行函数
$(function() {
$('#submit-article-btn').click(function() {
// 获取元素
var titleElement = $('#title-input');
var categoryElement = $('#category-select');
var descElement = $('#desc-input');
var thumbnailElement = $('#thumbnail-input');
var tagElements = $('.tag-checkbox');

	// 获取数据
	var title = titleElement.val();
	var category = categoryElement.val();
	var desc = descElement.val();
	var thumbnail = thumbnailElement.val();
	var tags = [];
	tagElements.each(function() {
		if($(this).is(':checked')){
			var tagId = $(this).val();
			tags.push(tagId);
		}
	});
	var content_html = editor.getValue();
	var data = {
		'title': title,
		'category': category,
		'desc': desc,
		'thumbnail': thumbnail,
		'tags': tags,
		'content_html': content_html
	};
	
	// 通过ajax发布到服务器
	myajax.post({
		'url': '/cms/add_article/',
		'data': data,
		'success':function(result) {
			if (result['code'] == 200) {
				$('#submit-success-modal').modal('show');
				titleElement.val('');
				descElement.val('');
				thumbnailElement.val('');
				tagElements.removeAttr('checked');
				editor.setValue('');
			}else{
				alert(result['message']);
			}
		},
		'error': function(err) {
			console.log(err);
		}
	});
});
原文地址:https://www.cnblogs.com/lajiao/p/9074684.html