kindEditor编辑器如何自定义工具栏

最新推荐文章于 2025-05-13 10:53:13 发布

天幕流光-

最新推荐文章于 2025-05-13 10:53:13 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： kindEditor编辑器文章标签： kindEditor编辑器

本文链接：https://blog.youkuaiyun.com/qq_43455410/article/details/85139368

kindEditor编辑器专栏收录该内容

1 篇文章

订阅专栏

本文指导如何自定义kindEditor编辑器的工具栏。首先从http://kindeditor.net/down.php下载所需插件，然后引入编辑器的CSS和JS文件。接着编辑HTML代码以插入编辑器，最后根据http://kindeditor.net/docs/option.html#items来配置自定义工具栏选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.http://kindeditor.net/down.php 下载插件
2.引入css和js

<link rel="stylesheet" href="/resource/js/jobFair_kindeditor/themes/default/default.css" >
	<script src="/resource/js/jobFair_kindeditor/kindeditor-all.js"></script>
	<script src="/resource/js/jobFair_kindeditor/kindeditor-all-min.js"></script>

3.编辑html代码

<textarea id="editor_id" name="content" style="width:150px;height:80px;"></textarea>

4.调用kindeditor方法（自定义工具栏的属性网址：http://kindeditor.net/docs/option.html#items）

<script>
        KindEditor.ready(function(K) {
                 editor = K.create('#editor_id',{
                	//自定义kindEditor编辑器的工具栏，其中”/”表示换行，”|”表示分隔符。
                	items:["source","|","preview","/","copy","justifycenter"],
                	//自定义高度和宽度
                	allowImageUpload:false,
                	resizeType : 1,
                	width:"20%",
                	height:"80px"
                });
        	      
        });
</script>