jquery轻量级文本编辑器Trumbowyg

ლ(╹◡╹ლ)感觉介个比CKDitor好用~可能~或许~大概~

先下一个trumbowyg吧~把css和js引入~

<link rel="stylesheet" href="trumbowyg/design/css/trumbowyg.css">
<script src="trumbowyg/jquery.min.js"></script>
        <script src="trumbowyg/trumbowyg.js"></script>
        <script src="trumbowyg/langs/fr.js"></script>
        <script src="trumbowyg/plugins/upload/trumbowyg.upload.js"></script>
        <script src="trumbowyg/plugins/base64/trumbowyg.base64.js"></script>

使用方法↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

EINS（基本用法）：

 <form action="">
        <div id="simple-editor">夜月</div>
  </form>
  <script>$('#simple-editor').trumbowyg();</script>

 

 

ZWEI（自定义按钮）：

<div id="customized-buttonpane" class="editor">
            <h2>夜月</h2>
</div>
<script>
        $.trumbowyg.btnsGrps.test = ['bold', 'link'];
        $.extend(true, $.trumbowyg.langs, {
                fr: {
                    align: 'Alignement',
                    image: 'Image'
                }
            });
        
        $('#customized-buttonpane').trumbowyg({
                lang: 'fr',
                closable: true,
                fixedBtnPane: true,
                btnsDef: {
                    align: {
                        dropdown: ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
                        ico: 'justifyLeft'
                    },
                    image: {
                        dropdown: ['insertImage', 'upload', 'base64'],
                        ico: 'insertImage'
                    }
                },
                btns: ['viewHTML',
                    '|', 'formatting',
                    '|', 'btnGrp-test',
                    '|', 'align',
                    '|', 'btnGrp-lists',
                    '|', 'image']
            });
</script>

 

 直接用上面的代码你会发现怎么少了个G~因为少了以下的代码_(:з」∠)_

 $.trumbowyg.btnsGrps.test = ['bold', 'link'];
 $.extend(true, $.trumbowyg.langs, {
       fr: {
            align: 'Alignement',
            image: 'Image'
       }
  });

 

DREI（textarea也可以，简单的定制与当前的选项）：

        <textarea id="night" cols="30" rows="10">
            <h2>夜月</h2>
        </textarea>
        <script>
       		$('#night').trumbowyg({
                lang: 'fr',
                closable: true,
                mobile: true,
                fixedBtnPane: true,
                fixedFullWidth: true,
                semantic: true,
                resetCss: true,
                autoAjustHeight: true,
                autogrow: true
            });
        </script>