<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>KindEditor一套开源的HTML可视化编辑器</title> <!-- 下载页面: http://www.kindsoft.net/down.php --> <!-- 引入kindeditor编辑器的js --> <script charset="utf-8" src="./editor/kindeditor.js"></script> <!-- 引入kindeditor编辑器的中文字符集 --> <script charset="utf-8" src="./editor/lang/zh-CN.js"></script> <!-- code@kindeditor-4.1.11-zh-CN --> <!-- 引入kindeditor编辑器的css --> <link rel="stylesheet" type="text/css" href="./editor/themes/default/default.css> <link rel="stylesheet" type="text/css" href="./editor/themes/simple/simple.css"> </head> <body> <form action="" method="" enctype="multipart/form-data"> <p>下面是KindEditor的编辑区域:</p> <!-- 在需要显示编辑器的位置添加textarea输入框;id唯一 --> <!-- 文本区设置name值 name="content" 这里和上面那张图文本区的name值相对应 --> <textarea id="editor_id" name="content" style="width:700px;height:300px;"> <strong>HTML内容</strong> </textarea> </form> </body> <script> /* ================ KindEditor上传图片 ===================*/ /*javascript,可以根据自己的项目进行修改cssPath、uploadJson、fileManagerJson的路径。*/ KindEditor.ready(function(K) { // #editor_id这里传的是id,就是你需要保存到该位置的字段id var editor1 = K.create('#editor_id', { // KindEditor中指定上传文件的服务器端程序。 //数据类型: String; 默认值: basePath + ‘php/upload_json.php’ uploadJson : './editor/php/upload_json.php', //将原来编辑器里的php处理方法移植到自己想要的地方,比如fileController 修改URL就好。不过编辑器默认不需要管理功能,屏蔽了。 fileManagerJson : './editor/php/file_manager_json.php', // 指定主题风格,可设置”default”、”simple”,指定simple时需要引入simple.css数据类型: String; 默认值: “default” themeType : 'simple', //打开本地的上传图片的功能 allowFileManager : true, //true时过滤HTML代码,false时允许输入任何代码。 //数据类型: Boolean; 默认值: false filterMode : false, //items中的 image 是打开本地上传图片的功能 items : [ 'source', '|', 'undo', 'redo', '|', 'preview', 'template', 'cut', 'copy', 'paste', 'plainpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage', 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about' ], //设置编辑器创建后执行的回调函数。 //数据类型: Function; 默认值: 无 afterCreate : function() { var self = this; document.getElementById('editor_id').onclick = function() { self.sync();//将textarea的内容放到主页面上,而不是编辑器上 var content = document.getElementById('editor_id').value; $.ajax({ data: $('#myform').serialize(),//序列化 }) </script> </html>