netnr 2015-05-19 17:19:00 👁1.1K 💬0

KindEditor

官方站点:http://kindeditor.net/down.php 文档说明:http://kindeditor.net/doc.php


引用这个库LitJSON.dll加入JS头文件

<link href="../kindeditor/themes/default/default.css" rel="stylesheet" type="text/css" />
<script src="../kindeditor/kindeditor-min.js" type="text/javascript"></script>
<script src="../kindeditor/zh_CN.js" type="text/javascript"></script>

页面初始化 Kindeditor

//后面根据这个操作富文本
var editor;
KindEditor.ready(function (K) {
    editor = K.create('textarea[name="content"]', { //textarea的name值
        allowFileManager: true,
        resizeType: 1,  //允许改变富文本高度
        uploadJson: '../kindeditor/net/upload_json.ashx',  // 上传配置 一般处理文件
        fileManagerJson: '../kindeditor/net/file_manager_json.ashx',
        items: ['source', 'wordpaste', '|', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
                'insertunorderedlist', 'lineheight', 'link', '|', 'emoticons', 'image', 'multiimage', 'insertfile', 'media', '|', 'preview', 'fullscreen'
        ],
        //工具栏目配置
        afterCreate: function () {
            var self = this;
            //点击保存事件
            document.getElementById("btnSaveWrite").onclick = function () {
                self.sync(); //同步编辑器内容
                saveContent(); //保存内容到数据库 我这里是 Ajax提交
            }
            //Ctrl Enter 快捷保存
            K.ctrl(self.edit.doc, 13, function () {
                self.sync();
                saveContent();
            });
        }
    });
});

富文本标签

<textarea name="content" style="width: 100%; height: 350px; visibility: hidden; line-height: 25px;"></textarea>
<!--保存的按钮  这里只是例子 请自由更改 id-->
<input id="btnSaveWrite" type="button" value="保存" class="btn" />

保存

function saveContent() {
    if (editor.isEmpty()) {//判断内容是否为空 (回车 空格视为空)
        editor.focus(); //富文本选中
    }

    //editor.html() 获取富文本的值 包括html标签 是你要存入数据库的值
    //editor.html('在这里赋值给富文本,可以 Ajax从数据库查询赋值')
    else if (editor.html().length > 23888) {
        alert("很抱歉,内容过长。");
    }
    else {
        //这里就写保存到数据库的方法
    }
}

editor.readonly(); //只读
editor.readonly(false); //取消只读

链接