1、引入js和css文件(注：这里必须引入正确，下面是我的路径，你修改为你自己的，不多说了)
<link href="/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="ont-awesome.css" rel="stylesheet">
<script src="{$url_admin}assets/js/jquery.min.js"></script>
<script src="{$url_admin}assets/js/ace-extra.min.js"></script>
<script src="{$url_admin}assets/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="{$url_admin}assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="{$url_admin}assets/js/markdown/markdown.min.js"></script>
<script src="{$url_admin}assets/js/markdown/bootstrap-markdown.min.js"></script>
<script src="{$url_admin}assets/js/jquery.hotkeys.min.js"></script>
<script src="{$url_admin}assets/js/uncompressed/bootstrap-wysiwyg.js"></script>
<script src="{$url_admin}assets/js/bootbox.min.js"></script>
<script src="{$url_admin}assets/js/ace-elements.min.js"></script>
<!-- 这里是html代码-->
<form action="" class="form-group" id="addNews">
<div class="wysiwyg-editor" id="editor1" name="editor1">
</div>
<input type='hidden' name='details' id='details' value=''>
<button οnclick="copyNewsHidden()" >提交</button>
</form>
//js调用富文本如下
<script type="text/javascript">
jQuery(function($){
function showErrorAlert (reason, detail) {
var msg='';
if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
else {
console.log("error uploading file", reason, detail);
}
$('<div class="alert"> <button type="button" class="close" data-dismiss="alert">×</button>'+
'<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
}
$('#editor1').ace_wysiwyg({
toolbar:
[
'font',
null,
'fontSize',
null,
{name:'bold', className:'btn-info'},
{name:'italic', className:'btn-info'},
{name:'strikethrough', className:'btn-info'},
{name:'underline', className:'btn-info'},
null,
{name:'insertunorderedlist', className:'btn-success'},
{name:'insertorderedlist', className:'btn-success'},
{name:'outdent', className:'btn-purple'},
{name:'indent', className:'btn-purple'},
null,
{name:'justifyleft', className:'btn-primary'},
{name:'justifycenter', className:'btn-primary'},
{name:'justifyright', className:'btn-primary'},
{name:'justifyfull', className:'btn-inverse'},
null,
{name:'createLink', className:'btn-pink'},
{name:'unlink', className:'btn-pink'},
null,
{name:'insertImage', className:'btn-success'},
null,
'foreColor',
null,
{name:'undo', className:'btn-grey'},
{name:'redo', className:'btn-grey'}
],
'wysiwyg': {
fileUploadError: showErrorAlert
}
}).prev().addClass('wysiwyg-style2');
$('[data-toggle="buttons"] .btn').on('click', function(e){
var target = $(this).find('input[type=radio]');
var which = parseIrnt(target.val());
var toolbar = $('#editor1').prev().get(0);
if(which == 1 || which == 2 || which == 3) {
toolbar.className = toolbar.className.replace(/wysiwyg\-style(1|2)/g , '');
if(which == 1) $(toolbar).addClass('wysiwyg-style1');
else if(which == 2) $(toolbar).addClass('wysiwyg-style2');
}
});
//Add Image Resize Functionality to Chrome and Safari
//webkit browsers don't have image resize functionality when content is editable
//so let's add something using jQuery UI resizable
//another option would be opening a dialog for user to enter dimensions.
if ( typeof jQuery.ui !== 'undefined' && /applewebkit/.test(navigator.userAgent.toLowerCase()) ) {
var lastResizableImg = null;
function destroyResizable() {
if(lastResizableImg == null) return;
lastResizableImg.resizable( "destroy" );
lastResizableImg.removeData('resizable');
lastResizableImg = null;
}
var enableImageResize = function() {
$('.wysiwyg-editor')
.on('mousedown', function(e) {
var target = $(e.target);
if( e.target instanceof HTMLImageElement ) {
if( !target.data('resizable') ) {
target.resizable({
aspectRatio: e.target.width / e.target.height
});
target.data('resizable', true);
if( lastResizableImg != null ) {//disable previous resizable image
lastResizableImg.resizable( "destroy" );
lastResizableImg.removeData('resizable');
}
lastResizableImg = target;
}
}
})
.on('click', function(e) {
if( lastResizableImg != null && !(e.target instanceof HTMLImageElement) ) {
destroyResizable();
}
})
.on('keydown', function() {
destroyResizable();
});
}
enableImageResize();
/**
//or we can load the jQuery UI dynamically only if needed
if (typeof jQuery.ui !== 'undefined') enableImageResize();
else {//load jQuery UI if not loaded
$.getScript($path_assets+"/js/jquery-ui-1.10.3.custom.min.js", function(data, textStatus, jqxhr) {
if('ontouchend' in document) {//also load touch-punch for touch devices
$.getScript($path_assets+"/js/jquery.ui.touch-punch.min.js", function(data, textStatus, jqxhr) {
enableImageResize();
});
} else enableImageResize();
});
}
*/
}
});
</script>
3、利用隐藏域把富文本的内容提交给后台（这里我给到一个提交的js方法copyNewsHidden()如下）
<script>
function copyNewsHidden(){
var newsEditor1=$('#editor1').html();
var details=$('#details').val(newsEditor1);
$('#addNews').submit();
}
</script>
4、下篇写下如何把本地图片上传到服务器上面
PHP+Mysql网站源码学习请访问：PHP+Mysql网站源码学习请访问
http://www.erdangjiade.com/