富文本的使用

富文本编辑器

如何在自己的页面中导入富文本编辑器,今天学习到的干货,赶紧自己码起,以备以后需要时参考!

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

效果展示:

0.0

学习整理笔记之富文本的使用 

完结!!!

上面会用到的资源下载链接

链接: https://pan.baidu.com/s/1qH96hDPLmgbBRp8SKStdiA 提取码: 4x95 

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容