Html编辑器,富文本编辑器KindEditor使用

编程知识 行业动态 更新时间:2024-06-13 00:22:46

介绍一个html编辑器,富文本编辑器,KindEditor,比较好用。

官网详细教程:http://kindeditor/about.php


效果图:





首先,下载kindeditor包。放到项目的JS插件包中。



在html页面定义一个textarea,设定长度,宽度。

<textarea id="notice" name="notice" style="width:870px;height:500px;"></textarea>

引入css,js文件

    <link rel="stylesheet" href="#springUrl('')/plugins/kindeditor/themes/default/default.css" />
    <link rel="stylesheet" href="#springUrl('')/plugins/kindeditor/plugins/code/prettify.css" />

    <script charset="utf-8" src="#springUrl('')/plugins/kindeditor/kindeditor.js"></script>
    <script charset="utf-8" src="#springUrl('')/plugins/kindeditor/lang/zh_CN.js"></script>
    <script charset="utf-8" src="#springUrl('')/plugins/kindeditor/plugins/code/prettify.js"></script>


在JS中初始化html编辑器

var editor;

$(function() {

	KindEditor.ready(function (KE) {
		
		editor = KE.create('#notice');
	});
})


这样就好哒!


//获取html编辑器内容

editor.html()

//设置html编辑器内容

editor.html("hello world");




更多推荐

Html编辑器,富文本编辑器KindEditor使用

本文发布于:2023-04-03 05:53:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/84704c09bc7c64edb5baf5a1b18eb8a8.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:编辑器   文本   Html   KindEditor

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!