简述:
记录kindEditor 这一开源编辑器的使用
Kindeditor - download&document
http://kindeditor.net/doc.php
步骤:
1. 引入头
<link rel="stylesheet" href="${contextPath}/common/static/lib/kindeditor-4.1.7/themes/default/default.css" /> <script src="${contextPath}/common/static/lib/kindeditor-4.1.7/kindeditor.js" type="text/javascript"></script> <script src="${contextPath}/common/static/lib/kindeditor-4.1.7/lang/zh_CN.js" type="text/javascript"></script>
在html里插入一个textarea
<div class="mtn"><textarea id="topicContent" name="content">${topicContent!""}</textarea></div>
添加文本编辑器初始化代码
/** * 富文本编辑器 */ KindEditor.ready(function(K) { window.editor = K.create('#topicContent', { afterBlur: function(){ this.sync(); }, uploadJson : '${contextPath}/resource/upload', fileManagerJson : '${contextPath}/resource/get', allowFileManager : true, langType : 'zh_CN', resizeType : 0, width: '665px', height: '400px', designMode: true, items: ['preview', '|', 'undo', 'redo', '|', 'print', 'template', 'code', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', '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', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink'] }); });
/** * 向编辑框插入图片 */ function insertImageToEditor(imgUrl){ editor.insertHtml('<img src="' + imgUrl + '"/>'); }
效果图: