kindeditor 編輯器

下載地址：http://kindeditor.net/down.php

最全的手冊：http://kindeditor.net/docs/option.html

 

HTML 代碼塊

      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">內容</label>
        <div class="layui-input-block">
          <textarea id="editor_id" name="content"  class="layui-textarea">{notempty name="$info.content"}{$info.content}{/notempty}</textarea>
        </div>
      </div>

JS 代碼塊

    <script charset="utf-8" src="__PUBLIC__/kindeditor/kindeditor-all.js"></script>
    <script charset="utf-8" src="__PUBLIC__/kindeditor/lang/zh-CN.js"></script>
    <script type="text/javascript">
        KindEditor.ready(function(K) {
             //textarea 
              editor = K.create('#editor_id', { 
                //themeType: 'simple',
                resizeType : 1,
                urlType:'domain',
                allowImageRemote : true,  
                width : '100%',  //編輯器的寬
                height : '460px',  //編輯器的高
                uploadJson: '__PUBLIC__/kindeditor/php/upload_json.php',
                fileManagerJson: '__PUBLIC__/kindeditor/php/file_manager_json.php',
                //items : ['source','bold','italic','underline','forecolor','image'],  
              
                afterCreate: function(){this.sync();},  //此行可不寫，不影響獲取textarea的值
                afterBlur : function(){this.sync();}//需要添加的  
            }); 
              //封面圖實時上傳
            K('#image').click(function() {
                    editor.loadPlugin('image', function() {
                            editor.plugin.imageDialog({
                                    imageUrl : K('#url').val(),
                                    clickFn : function(url, title, width, height, border, align) {
                                            K('#url').val(url);
                                            K("#image_show").html('![]('+url+')');
                                            editor.hideDialog();
                                    }
                            });
                    });
            });
        });
</script>

 簡單的 QQ 留言樣式

<script>
           KindEditor.ready(function(K) {
               K.each({
                'plug-align' : {
                    name : '對齊方式',
                    method : {
                        'justifyleft' : '左對齊',
                        'justifycenter' : '居中對齊',
                        'justifyright' : '右對齊'
                    }
                },
                'plug-order' : {
                    name : '編號',
                    method : {
                        'insertorderedlist' : '數字編號',
                        'insertunorderedlist' : '項目編號'
                    }
                },
                'plug-indent' : {
                    name : '縮進',
                    method : {
                        'indent' : '向右縮進',
                        'outdent' : '向左縮進'
                    }
                }
            },function( pluginName, pluginData ){
                var lang = {};
                lang[pluginName] = pluginData.name;
                KindEditor.lang( lang );
                KindEditor.plugin( pluginName, function(K) {
                    var self = this;
                    self.clickToolbar( pluginName, function() {
                        var menu = self.createMenu({
                                name : pluginName,
                                width : pluginData.width || 100
                            });
                        K.each( pluginData.method, function( i, v ){
                            menu.addItem({
                                title : v,
                                checked : false,
                                iconClass : pluginName+'-'+i,
                                click : function() {
                                    self.exec(i).hideMenu();
                                }
                            });
                        })
                    });
                });
            });
            window.editor = K.create('#editor_id', {
                themeType: 'qq',
                items : [
                    'bold','italic','underline','fontname','fontsize','forecolor','hilitecolor','plug-align','plug-order','plug-indent','link'
                ],

            });
        });
 
</script>