kindeditor富文本编辑

最新推荐文章于 2022-03-11 21:09:22 发布

web_qdkf

最新推荐文章于 2022-03-11 21:09:22 发布

阅读量260

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/web_qdkf/article/details/80008152

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!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>