如何在自己的页面中导入富文本编辑器,今天学习到的干货,赶紧自己码起,以备以后需要时参考!
用easyui这个前端框架来引入~
首先,,,需要引入js和css
<link href="kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="kindeditor-4.1.10/lang/zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-easyui-1.4.1/jquery.min.js"></script>
具体路径根据自己项目中这些资源文件的位置而定
生成富文本主要用到一段Js
<script type="text/javascript">
$(function(){
KindEditor.ready(function(){
KindEditor.create("#editor")
})
})
</script>
页面完成加载后,通过KindEditor.create("#editor")来创建富文本,create里面的内容为JQ的选择器
上文的意思为在 id为editor的元素内创建一个富文本编辑器
<body>
<h1>富文本编辑器Demo</h1>
<textarea style="width:700px;height:350px" id="editor"></textarea>
</body>
效果展示:
学习整理笔记之富文本的使用
完结!!!
上面会用到的资源下载链接
链接: https://pan.baidu.com/s/1qH96hDPLmgbBRp8SKStdiA 提取码: 4x95