• 技术文档
  • 专业的网站建设公司
  • 020-39182790

技术文档

您现在的位置:首页 > 服务支持 > 技术文档
如何自定义kindeditor工具栏面板?
作者:织晶客服部 发布于:2022/9/27 21:51:45 点击量: 来源:织晶网络

在网站/其他应用编辑富文本时,需要在线编辑器来编辑文本,目前比较好用的有kindeditor编辑器,虽然2017年之后官方再无更新,不过开发者可以根据实际项目需求进行个性化配置工具栏面板,以便于使用。

比如:我要配置简单的kindeditor工具栏,如下图:

像这种简单实用的工具栏面板如何配置呢?


需要在引用kindeditor编辑器的html/视图文件中,在下面方法中
KindEditor.ready(function(K) {

//code->add items attribute

})

添加items中想要的属性就可以实现,items项中就是自定义想要的按钮功能,很简单吧!


如下图,已添加的一些属性:


----------------------------------END!


下面是items主要属性的释义参考:
source:表示切换编辑器进入源代码HTML查看模式;
wordpaste:表示从WORD内粘贴;
justifyleft:表示选中文本居左;
justifycenter:表示选中文本居中;
justifyright:表示选中文本居右;
justifyfull:表示两端对齐;
clearhtml:表示清除HTML标签;
quickformat:表示快速排版;
selectall:表示全选;
fullscreen:表示全屏;
formatblock:表示段落;
fontname:表示字体;
fontsize:表示文字大小;
forecolor:表示文字颜色;
hilitecolor:表示文字背景色;
bold:表示文字加粗;
italic:表示文字斜体;
underline:表示给文字追加下划线;
strikethrough:表示给文字追加删除线;
lineheight:表示调整行距;
removeformat:表示删除选中段的格式;
image:表示单个上传图片;
multiimage:表示批量上传图片;
media:表示插入音视频文件;
insertfile:表示插入文件;
table:表示插入表格;
hr:表示插入横线;
emoticons:表示插入表情;
baidumap:表示插入地图;
link:表示插入超链接;
unlink:表示取消超级链接;一般和link配合出现;
about:表示关于kindeditor编辑器的信息;


kindeditor编辑器下载地址:https://gitee.com/luolonghao/kindeditor



上一篇:PHP中如何操作数据库?

下一篇:PHP中$_POST、$_GET、$_REQUEST之间的区别