<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<title>KindEditor富文本编辑</title>
</head>
<body>
<textarea type="text" id="textArea"></textarea>
<script src="../js/jquery.min.js"></script>
<!--css引入文件最好和kindeditor的js文件绑定一起-->
<link href="../kindeditor/themes/default/default.css " rel="stylesheet " />
<!-- KindEditor js-->
<script src="../js/kindeditor/kindeditor-min.js"></script>
<script src="../kindeditor/lang/zh_CN.js "></script>
<script>
var editor = {
"id": ["comment"],
"tools": "bugTools"
};
var bugTools = ['formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', '|',
'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', '|',
'emoticons', 'image', 'code', 'link', '|', 'removeformat', 'undo', 'redo', 'fullscreen', 'source', 'about'
];
var simpleTools = ['formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', '|',
'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', '|',
'emoticons', 'image', 'code', 'link', '|', 'removeformat', 'undo', 'redo', 'fullscreen', 'source', 'about'
];
var fullTools = ['formatblock', 'fontname', 'fontsize', 'lineheight', '|', 'forecolor', 'hilitecolor', '|', 'bold', 'italic', 'underline', 'strikethrough', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', '|',
'insertorderedlist', 'insertunorderedlist', '|',
'emoticons', 'image', 'insertfile', 'hr', '|', 'link', 'unlink', '/',
'undo', 'redo', '|', 'selectall', 'cut', 'copy', 'paste', '|', 'plainpaste', 'wordpaste', '|', 'removeformat', 'clearhtml', 'quickformat', '|',
'indent', 'outdent', 'subscript', 'superscript', '|',
'table', 'code', '|', 'pagebreak', 'anchor', '|',
'fullscreen', 'source', 'preview', 'about'
];
editorTool = simpleTools;
if(editor.tools == 'bugTools') {
editorTool = bugTools;
}
if(editor.tools == 'fullTools') {
editorTool = fullTools;
}
//单个富文本编辑基于KindEditor 4.x
KindEditor.ready(function(K) {
//文章内容
var textAreaEditor = K.create('#textArea', {
width: 'auto', //编辑器的宽度,可以设置px或%
height: "auto", //编辑器的高度,只能设置px
minWidth:700,//指定编辑器最小宽度,单位为px。
minHeight:400,//指定编辑器最小高度,单位为px。
items: editorTool, //配置编辑器的工具栏
filterMode: true, //true时过滤HTML代码,false时允许输入任何代码。
resizeMode: 2, //2或1或0,2时可以拖动改变宽度和高度,1时只能改变高度,0时不能拖动。
//cssPath: '', //指定编辑器iframe document的CSS,用于设置可视化区域的样式
allowUpload: true, //true或false,true时显示上传图片标签。
shadowMode: true, //true或false,true时弹出层显示阴影。
htmlTags: {}, //指定要保留的HTML标记和属性
allowFileManager: true, //true或false,true时显示浏览服务器图片功能。
uploadJson: '', //图片上传地址
afterCreate: function() {}, //设置编辑器创建后执行的回调函数
afterDialogCreate: function() {}, // 设置弹出浮动框创建后执行的回调函数
afterChange: function() {}, //编辑器内容发生变化后执行的回调函数
afterTab: function() {}, //按下TAB键后执行的的回调函数。
afterFocus: function() {}, //编辑器聚焦(focus) 时执行的回调函数。
afterBlur: function() {}, //编辑器失去焦点(blur)时执行的回调函数
});
textAreaEditor.html(); //取得编辑器的HTML内容。
textAreaEditor.text(); //取得编辑器的纯文本内容。(包含img和embed)
textAreaEditor.selectedHtml(); //取得当前被选中的HTML内容。
textAreaEditor.count("html"); //为"html"时取得字数包含HTML代码,mode
textAreaEditor.count("text"); //为"text"时只包含纯文本、IMG、EMBED
textAreaEditor.isEmpty(); //判断编辑器是否有可见内容,比如文本、图片、视频。
textAreaEditor.focus(); //编辑器聚焦。
textAreaEditor.blur(); //编辑器失去焦点。
});
//更多api参数详细访问地址:http://kindeditor.net/docs/editor.html#k-create-expr-options
//http://kindeditor.net/doc3.php?cmd=config
</script>
</body>
</html>
kindeditor富文本编辑
最新推荐文章于 2019-12-24 17:08:23 发布