bootstrap-wysiwyg中JS控件富文本的用法

1、引入js和css檔案(注：這裡必須引入正确，下面是我的路徑，你修改為你自己的，不多說了)

2、其實調用也很容易，難點在于怎麼把‘富文本裡面的内容送出給背景’（這裡我給到一個隐藏input  如下面的代碼）

<!-- 這裡是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  onclick="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',

                                {name:'bold', className:'btn-info'},

                                {name:'italic', className:'btn-info'},

                                {name:'strikethrough', className:'btn-info'},

                                {name:'underline', className:'btn-info'},

                                {name:'insertunorderedlist', className:'btn-success'},

                                {name:'insertorderedlist', className:'btn-success'},

                                {name:'outdent', className:'btn-purple'},

                                {name:'indent', className:'btn-purple'},

                                {name:'justifyleft', className:'btn-primary'},

                                {name:'justifycenter', className:'btn-primary'},

                                {name:'justifyright', className:'btn-primary'},

                                {name:'justifyfull', className:'btn-inverse'},

                                {name:'createLink', className:'btn-pink'},

                                {name:'unlink', className:'btn-pink'},

                                {name:'insertImage', className:'btn-success'},

                                'foreColor',

                                {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();

}

4、下篇寫下如何把本地圖檔上傳到伺服器上面

<a href="http://www.erdangjiade.com/">http://www.erdangjiade.com/</a>