KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、 Safari、Opera等主流浏览器。KindEditor使用JavaScript编写,可以无缝的于Java、.NET、PHP、ASP等程序接 合。 KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用,2006年7月首次发布2.0以 来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的编辑器之一。
听说是国产的支持一下,还挺好用的就是。
1 <html> 2 <head> 3 <meta charset="utf-8" /> 4 <title>Use KindEditor For PHP</title> 5 <link rel="stylesheet" href="../themes/default/default.css" /> 6 <link rel="stylesheet" href="../plugins/code/prettify.css" /> 7 <script charset="utf-8" src="../kindeditor-min.js"></script> 8 <script charset="utf-8" src="../lang/zh_CN.js"></script> 9 <script charset="utf-8" src="../plugins/code/prettify.js"></script>10 <script>11 KindEditor.ready(function(K) {12 var editor1 = K.create('textarea[name="content1"]', {13 cssPath : '../plugins/code/prettify.css',14 uploadJson : '../php/upload_json.php',15 fileManagerJson : '../php/file_manager_json.php',16 allowFileManager : true,17 afterCreate : function() {18 var self = this;19 K.ctrl(document, 13, function() {20 self.sync();21 K('form[name=example]')[0].submit();22 });23 K.ctrl(self.edit.doc, 13, function() {24 self.sync();25 K('form[name=example]')[0].submit();26 });27 }28 });29 prettyPrint();30 });31 KindEditor.ready(function(K) {32 var editor = K.editor({33 allowFileManager : true34 });35 K('#image1').click(function() {36 editor.loadPlugin('image', function() {37 editor.plugin.imageDialog({38 imageUrl : K('#url1').val(),39 clickFn : function(url, title, width, height, border, align) {40 K('#url1').val(url);41 editor.hideDialog();42 }43 });44 });45 }); 46 });47 </script>48 </head>49 <body> 50 <form name="example" method="post" action="savegoods.php">51 <p>标题:<input type="text" name="title" id="title" value="title" /></p>52 <p>类别: <select name="kinds"><option value="xian" selected>鲜奶 <option value="suan">酸奶 </select></p>53 <p>封面图片:<input type="text" name="url1" id="url1" value="" /> <input type="button" id="image1" value="选择图片" />(网络图片 + 本地上传)</p>54 <p>封面描述:<input type="text" name="description" id="description" value="description" /></p>55 <p>内容:</p>56 <textarea name="content1" style="width:700px;height:200px;visibility:hidden;">s</textarea> 57 <br />58 <input type="submit" name="button" value="提交内容" /> (提交快捷键: Ctrl + Enter)59 </form>60 </body>61 </html>