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

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>

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  ο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">&times;</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/

转载于:https://www.cnblogs.com/66daima/p/7507708.html