KindEditor编辑器初始化参数

编辑器初始化参数

width

编辑器的宽度,可以设置px或%,比textarea输入框样式表宽度优先度高。

数据类型: String
默认值: textarea输入框的宽度
示例:

K.create('#id', {
        width : '700px'
});

height

编辑器的高度,只能设置px,比textarea输入框样式表高度优先度高。

数据类型: String
默认值: textarea输入框的高度
minWidth
指定编辑器最小宽度,单位为px。

数据类型: Int
默认值: 650

minHeight

指定编辑器最小高度,单位为px。

数据类型: Int
默认值: 100

items

配置编辑器的工具栏,其中”/”表示换行,”|”表示分隔符。

数据类型: Array
默认值:

[
        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
        'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
        'anchor', 'link', 'unlink', '|', 'about'
]
参数名称
source HTML代码
preview预览
undo后退
redo前进
cut剪切
copy复制
paste粘贴
plainpaste粘贴为无格式文本
wordpaste从Word粘贴
selectall全选
justifyleft左对齐
justifycenter居中
justifyright右对齐
justifyfull两端对齐
insertorderedlist编号
insertunorderedlist项目符号
indent增加缩进
outdent减少缩进
subscript下标
superscript上标
formatblock段落
fontname字体
fontsize文字大小
forecolor文字颜色
hilitecolor文字背景
bold粗体
italic斜体
underline下划线
strikethrough删除线
removeformat删除格式
image图片
flashFlash
media视音频
table表格
hr插入横线
emoticons插入表情
link超级链接
unlink取消超级链接
fullscreen全屏显示
about关于
print打印
code插入程序代码
map Google地图
baidumap百度地图
lineheight行距
clearhtml清理HTML代码
pagebreak插入分页符
quickformat一键排版
insertfile插入文件
template插入模板
anchor插入锚点

noDisableItems

designMode 为false时,要保留的工具栏图标。

数据类型: Array
默认值: [‘source’, ‘fullscreen’]
filterMode
true时根据 htmlTags 过滤HTML代码,false时允许输入任何代码。

数据类型: Boolean
默认值: true

Note
4.1.1版本开始默认值为true。

htmlTags

指定要保留的HTML标记和属性。Object的key为HTML标签名,value为HTML属性数组,”.”开始的属性表示style属性。

数据类型: Object
默认值:

{
        font : ['color', 'size', 'face', '.background-color'],
        span : [
                '.color', '.background-color', '.font-size', '.font-family', '.background',
                '.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.line-height'
        ],
        div : [
                'align', '.border', '.margin', '.padding', '.text-align', '.color',
                '.background-color', '.font-size', '.font-family', '.font-weight', '.background',
                '.font-style', '.text-decoration', '.vertical-align', '.margin-left'
        ],
        table: [
                'border', 'cellspacing', 'cellpadding', 'width', 'height', 'align', 'bordercolor',
                '.padding', '.margin', '.border', 'bgcolor', '.text-align', '.color', '.background-color',
                '.font-size', '.font-family', '.font-weight', '.font-style', '.text-decoration', '.background',
                '.width', '.height', '.border-collapse'
        ],
        'td,th': [
                'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor',
                '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.font-weight',
                '.font-style', '.text-decoration', '.vertical-align', '.background', '.border'
        ],
        a : ['href', 'target', 'name'],
        embed : ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess'],
        img : ['src', 'width', 'height', 'border', 'alt', 'title', 'align', '.width', '.height', '.border'],
        'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : [
                'align', '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.background',
                '.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.text-indent', '.margin-left'
        ],
        pre : ['class'],
        hr : ['class', '.page-break-after'],
        'br,tbody,tr,strong,b,sub,sup,em,i,u,strike,s,del' : []
}

wellFormatMode

true时美化HTML数据。

数据类型: Boolean
默认值: true
resizeType
2或1或0,2时可以拖动改变宽度和高度,1时只能改变高度,0时不能拖动。

数据类型: Int
默认值: 2

themeType

指定主题风格,可设置”default”、”simple”,指定simple时需要引入simple.css。

数据类型: String
默认值: “default”
示例:

<link rel="stylesheet" href="../themes/default/default.css" />
<link rel="stylesheet" href="../themes/simple/simple.css" />
<script charset="utf-8" src="../kindeditor.js"></script>
<script charset="utf-8" src="../lang/zh-CN.js"></script>
<script>
        var editor;
        KindEditor.ready(function(K) {
                editor = K.create('#editor_id', {
                        themeType : 'simple'
                });
        });
</script>

#langType
指定语言,可设置”en”、”zh-CN”,需要引入lang/[langType].js。

数据类型: String
默认值: “zh-CN”
示例:

<link rel="stylesheet" href="../themes/default/default.css" />
<script charset="utf-8" src="../kindeditor.js"></script>
<script charset="utf-8" src="../lang/en.js"></script>
<script>
        var editor;
        KindEditor.ready(function(K) {
                editor = K.create('#editor_id', {
                        langType : 'en'
                });
        });
</script>

designMode

可视化模式或代码模式

数据类型: Boolean
默认值: true
fullscreenMode
true时加载编辑器后变成全屏模式。

数据类型: Boolean
默认值: false

basePath

指定编辑器的根目录路径。

数据类型: String
默认值: 根据kindeditor.js文件名自动获取

themesPath

指定编辑器的themes目录路径。

数据类型: String
默认值: basePath + ‘themes/’

pluginsPath

指定编辑器的plugins目录路径。

数据类型: String
默认值: basePath + ‘plugins/’

langPath

指定编辑器的lang目录路径。

数据类型: String
默认值: basePath + ‘lang/’

minChangeSize

undo/redo文字输入最小变化长度,当输入的文字变化小于这个长度时不会添加到undo记录里。

数据类型: String
默认值: 5

urlType

改变站内本地URL,可设置”“、”relative”、”absolute”、”domain”。空为不修改URL,relative为相对路径,absolute为绝对路径,domain为带域名的绝对路径。

数据类型: String
默认值: “”

newlineTag

设置回车换行标签,可设置”p”、”br”。

数据类型: String
默认值: “p”

pasteType

设置粘贴类型,0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴

数据类型: Int
默认值: 2

dialogAlignType

设置弹出框(dialog)的对齐类型,可设置”“、”page”,指定page时按当前页面居中,指定空时按编辑器居中。

数据类型: String
默认值: “page”

shadowMode

true时弹出层(dialog)显示阴影。

数据类型: Boolean
默认值: true

zIndex

指定弹出层的基准z-index。

数据类型: Int
默认值: 811213

useContextmenu

true时使用右键菜单,false时屏蔽右键菜单。

数据类型: Boolean
默认值: true

syncType

同步数据的方式,可设置”“、”form”,值为form时提交form时自动同步,空时不会自动同步。

数据类型: String
默认值: “form”

indentChar

wellFormatMode 为true时,HTML代码缩进字符。

数据类型: String
默认值: “\t”

cssPath

指定编辑器iframe document的CSS文件,用于设置可视化区域的样式。

数据类型: String或Array
默认值: 空

cssData

指定编辑器iframe document的CSS数据,用于设置可视化区域的样式。

数据类型: String
默认值: 空

bodyClass

指定编辑器iframe document body的className。

数据类型: String
默认值: “ke-content”

colorTable

指定取色器里的颜色。

数据类型: Array
默认值:

[
        ['#E53333', '#E56600', '#FF9900', '#64451D', '#DFC5A4', '#FFE500'],
        ['#009900', '#006600', '#99BB00', '#B8D100', '#60D978', '#00D5FF'],
        ['#337FE5', '#003399', '#4C33E5', '#9933E5', '#CC33E5', '#EE33EE'],
        ['#FFFFFF', '#CCCCCC', '#999999', '#666666', '#333333', '#000000']
]

afterCreate

设置编辑器创建后执行的回调函数。

数据类型: Function
默认值: 无

afterChange

编辑器内容发生变化后执行的回调函数。

数据类型: Function
默认值: 无

afterTab

按下TAB键后执行的的回调函数。

数据类型: Function
默认值: 插入4个空格的函数

afterFocus

编辑器聚焦(focus)时执行的回调函数。

数据类型: Function
默认值: 无

afterBlur

编辑器失去焦点(blur)时执行的回调函数。

数据类型: Function
默认值: 无

afterUpload

上传文件后执行的回调函数。

数据类型: Function
默认值: 无

KindEditor.ready(function(K) {
        K.create('#id', {
                afterUpload : function(url) {
                        alert(url);
                }
        });
});

uploadJson

指定上传文件的服务器端程序。

数据类型: String
默认值: basePath + ‘php/upload_json.php’

fileManagerJson

指定浏览远程图片的服务器端程序。

数据类型: String
默认值: basePath + ‘php/file_manager_json.php’
allowPreviewEmoticons
true时鼠标放在表情上可以预览表情。

数据类型: Boolean
默认值: true

allowImageUpload

true时显示图片上传按钮。

数据类型: Boolean
默认值: true

allowFlashUpload

true时显示Flash上传按钮。

数据类型: Boolean
默认值: true

allowMediaUpload

true时显示视音频上传按钮。

数据类型: Boolean
默认值: true

allowFileUpload

true时显示文件上传按钮。

数据类型: Boolean
默认值: true

Note
4.0.6版本开始支持。

allowFileManager

true时显示浏览远程服务器按钮。

数据类型: Boolean
默认值: false

fontSizeTable

指定文字大小。

数据类型: Array
默认值:

['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px']

imageTabIndex

图片弹出层的默认显示标签索引。

数据类型: Int
默认值: 0

Note
4.0.6版本开始支持。

formatUploadUrl

false时不会自动格式化上传后的URL。

数据类型: Boolean
默认值: true

Note
4.1版本开始支持。

fullscreenShortcut

false时禁用ESC全屏快捷键。

数据类型: Boolean
默认值: false

Note
4.1版本开始支持,从4.1.2版本开始默认值为false。

extraFileUploadParams

上传图片、Flash、视音频、文件时,支持添加别的参数一并传到服务器。

数据类型: Array
默认值: {}

KindEditor.ready(function(K) {
        K.create('#id', {
                extraFileUploadParams : {
                        item_id : 1000,
                        category_id : 1
                }
        });
});

Note
4.1.1版本开始支持。

filePostName

指定上传文件form名称。

数据类型: String
默认值: imgFile

Note
4.1.2版本开始支持。

fillDescAfterUploadImage

true时图片上传成功后切换到图片编辑标签,false时插入图片后关闭弹出框。

数据类型: Boolean
默认值: false

Note
4.1.2版本开始支持。

afterSelectFile

从图片空间选择文件后执行的回调函数。

数据类型: Function
默认值: 无

Note
4.1.2版本开始支持。

pagebreakHtml

可指定分页符HTML。

数据类型: String
默认值: <hr style=”page-break-after: always;” class=”ke-pagebreak” />

Note
4.1.3版本开始支持。

allowImageRemote

true时显示网络图片标签,false时不显示。

数据类型: Boolean
默认值: true

Note
4.1.6版本开始支持。

autoHeightMode

值为true,并引入autoheight.js插件时自动调整高度。

数据类型: Boolean
默认值: false

Note
4.1.8版本开始支持。

fixToolBar

值为true,并引入fixtoolbar.js插件时固定工具栏位置。

数据类型: Boolean
默认值: false

参考
http://kindeditor.net/docs/option.html#id70

  • 15
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,我们需要在 Spring Boot 项目中引入 kindeditor 的相关依赖。可以通过在 Maven 或 Gradle 配置文件中添加以下依赖来实现: Maven: ```xml <dependency> <groupId>com.github.kindeditor</groupId> <artifactId>kindeditor</artifactId> <version>4.1.11</version> </dependency> ``` Gradle: ```groovy compile group: 'com.github.kindeditor', name: 'kindeditor', version: '4.1.11' ``` 接着,在 Spring Boot 项目中添加一个控制器,用于处理 kindeditor 的上传请求和获取文件列表请求。示例代码如下: ```java @RestController @RequestMapping("/kindeditor") public class KindEditorController { @Autowired private Environment env; /** * KindEditor上传文件接口 * @param file * @param request * @return */ @PostMapping("/upload") public Map<String, Object> upload(@RequestParam("imgFile") MultipartFile file, HttpServletRequest request) { Map<String, Object> result = new HashMap<>(); String url = ""; try { // 获取上传文件目录 String uploadDir = env.getProperty("kindeditor.upload-dir"); if (StringUtils.isBlank(uploadDir)) { uploadDir = request.getServletContext().getRealPath("/upload"); } File dir = new File(uploadDir); if (!dir.exists()) { dir.mkdirs(); } // 获取上传文件名 String fileName = file.getOriginalFilename(); // 生成新的文件名 String newFileName = UUID.randomUUID().toString() + "." + StringUtils.substringAfterLast(fileName, "."); // 保存文件 File dest = new File(dir, newFileName); file.transferTo(dest); // 返回文件访问URL url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/upload/" + newFileName; result.put("error", 0); result.put("url", url); } catch (Exception e) { result.put("error", 1); result.put("message", "文件上传失败"); } return result; } /** * KindEditor获取文件列表接口 * @param request * @return */ @GetMapping("/filemanager") public Map<String, Object> fileManager(HttpServletRequest request) { Map<String, Object> result = new HashMap<>(); try { // 获取上传文件目录 String uploadDir = env.getProperty("kindeditor.upload-dir"); if (StringUtils.isBlank(uploadDir)) { uploadDir = request.getServletContext().getRealPath("/upload"); } File dir = new File(uploadDir); if (!dir.exists()) { dir.mkdirs(); } // 遍历目录,获取文件列表 List<Map<String, Object>> fileList = new ArrayList<>(); File[] files = dir.listFiles(); if (files != null && files.length > 0) { for (File file : files) { Map<String, Object> fileInfo = new HashMap<>(); fileInfo.put("is_dir", file.isDirectory()); fileInfo.put("has_file", file.isFile()); fileInfo.put("filesize", file.length()); fileInfo.put("filename", file.getName()); fileInfo.put("datetime", new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date(file.lastModified()))); fileList.add(fileInfo); } } result.put("error", 0); result.put("file_list", fileList); } catch (Exception e) { result.put("error", 1); result.put("message", "文件列表获取失败"); } return result; } } ``` 其中,`upload` 方法用于处理 kindeditor 的上传请求,`filemanager` 方法用于获取文件列表请求。在 `upload` 方法中,我们通过 `MultipartFile` 接口获取上传的文件信息,然后将文件保存至指定目录,并返回文件访问 URL。在 `filemanager` 方法中,我们遍历指定目录下的所有文件,并将文件信息封装成列表返回。 最后,在前端页面中引入 kindeditor 的相关资源文件,并在页面中添加文本编辑器元素。示例代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>KindEditor富文本编辑器</title> <link rel="stylesheet" href="http://cdn.staticfile.org/kindeditor/4.1.11/themes/default/default.css" /> <script src="http://cdn.staticfile.org/kindeditor/4.1.11/kindeditor.js"></script> <script src="http://cdn.staticfile.org/kindeditor/4.1.11/lang/zh-CN.js"></script> </head> <body> <textarea id="editor"></textarea> <script> KindEditor.ready(function(K) { K.create('#editor', { uploadJson: '/kindeditor/upload', fileManagerJson: '/kindeditor/filemanager' }); }); </script> </body> </html> ``` 在以上代码中,我们引入了 kindeditor 的相关资源文件,并在页面中添加了一个 ID 为 `editor` 的 textarea 元素,然后通过 JavaScript 代码初始化kindeditor,并设置了上传文件和获取文件列表的 URL。 至此,我们就可以在 Spring Boot 项目中轻松实现 kindeditor 的富文本编辑器功能了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值