网站前端_KindEditor.基础入门.0002.KindEditor_3.4.2配置参数?

2024-05-12 06:17:52

初始方式:

wKioL1hpIGnzcvFMAABIoj-IMwE782.png

说明: 在快速入门中使用KE.show({ .. .})来初始化了一个编辑器,具体进入js/kindeditor.js下可以看到KE对象下的show方法先调用了KE的init方法然后又调用了其event事件对象的ready方法,内部其实是调用的KE的create方法,传递的参数为args的id属性,所以可通过2种方式来初始化编辑器

# 方式一 :

wKiom1hpIH_haRKSAAAfp5m45kk934.png

# 方式二 :

wKioL1hpIJjz4csOAAAroH5KEBo885.png

注意: 无论使用哪种方式初始化编辑器,都需要传递配置对象{ ... },配置对象中id属性是必须配置的,其它的属性默认采用默认配置,全部可以不配置.

配置方法:

wKiom1hpIK6hMkHHAAER_1ynsEI750.png

说明: 上面2种方式初始化时候首先调用了kindeditor.js里的KE对象的init方法,进入方法可以看到首先var g = KE.g[args.id] = args,KE.g[args.id],g和KE.g[args.id]全部指向了args对象,然后2219~2222行通过KE.each遍历KE.setting对象的键值对如果args中没有定义KE.setting中的键值对则默认使用KE.setting中定义的键值对作为默认值,可以搜索下KE.setting看下相关的默认配置

扩展: 从上面可以看出要自定义配置参数第一种方式是通过在KE.show({...})的时候定义在传递的对象中,第二种方式是通过修改kindeditor.js中KE.setting对象相关配置.

配置参数:


KE.show({// 说明: TextArea输入框Id,必须设置,数据类型为Stringid : 'content1',// 说明: 配置编辑器的工具栏,其中'-'表示换行符,'|'表示分割符,数据类型为Arrayitems: [ 'source', 'fullscreen', 'undo', 'redo', 'print', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', 'justifyleft', 'justifycenter','justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript','superscript', 'selectall', 'title', 'fontname', 'fontsize', 'textcolor', 'bgcolor', 'bold', 'italic', 'underline', 'strikethrough', 'removeformat', 'p_w_picpath', 'flash', 'media', 'table', 'hr', 'emoticons', 'link', 'unlink', 'about'],// 说明: 设置编辑器的宽度,可以设置px或%,默认会比TextArea输入框样式表宽度优先// 度高,数据类型为Stringwidth: '100%',// 说明: 设置编辑器的高度,只能设置px,默认会比TextArea输入框样式表高度优先// 度高,数据类型为Stringheight: '300px',// 说明: 设置编辑器最小宽度,只能设置px,数据类型为IntminWidth: 1168,// 说明: 设置编辑器最小高度,只能设置px,数据类型为IntminHeight: 300,// 说明: 设置在源码模式下是否根据htmlTags过滤HTML代码,当为true时,在htmlTags// 中的元素只保留指定的属性,其它的被过滤掉,当为false时则htmlTags不会启任何作// 用,数据类型为BooleanfilterMode: false,// 说明: 配合filterMode一起使用设置要保留标记和属性,哈希数组的Key为标签名,// value是要保留的属性数组,.开始的属性表示style属性,数据类型为ObjecthtmlTags: {font : ['color', 'size', 'face', '.background-color'],span : ['style'],div : ['class', 'align', 'style'],table: ['class', 'border', 'cellspacing', 'cellpadding', 'width', 'height', 'align', 'style'],'td,th': ['class', 'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor', 'style'],a : ['class', 'href', 'target', 'name', 'style'],embed : ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality','style', 'align', 'allowscriptaccess', '/'],img : ['src', 'width', 'height', 'border', 'alt', 'title', 'align', 'style', '/'],hr : ['class', '/'],br : ['/'],'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : ['align', 'style'],'tbody,tr,strong,b,sub,sup,em,i,u,strike' : []},// 说明: 设置拖动方式,2表示可以水平或竖直拖动,1表示只可竖直拖到,0表示禁止拖// 动,数据类型为IntresizeMode: 1,// 说明: 设置风格类型,主题文件位于js/kindeditor/skins下,数据类型为StringskinType: 'tinymce',// 说明: 设置是否默认为可视化模式,true表示可视化模式,false表示代码编辑模式,// 数据类型为BooleanwyswygMode: true,// 说明: 设置编辑器iframe document的CSS,用于设置可视化区域的样式,用于设置可// 视化区域的样式,数据类型为String或ArraycssPath : KE.scriptPath+'index.css',// 说明: 设置默认皮肤的目录,包含一些风格相关的css文件和gif图片,默认位于js/// kindeditor/skins下,默认值为KE.scriptPath + 'skins/',数据类型为StringskinsPath: KE.scriptPath+'skins/',// 说明: 设置默认插件的目录,默认位于js/kindeditor/plugin,数据类型为StringpluginsPath: KE.scriptPath + 'plugins/',// 说明: 设置文字输入的最小变化长度,当到达此长度时才会记录到上一步undo和重复// redo堆栈中(其实就是push到对应的数组),数据类型为IntminChangeSize: 1,// 说明: 设置是否自动加载编辑器主题的CSS,默认为g.skinsPath + g.skinType + // '.css',数据类型为BooleanloadStyleMode: true,// 说明: 设置站内本地URL,可设置空/relative/absolute/domain,空表示不修改URL,// relative表示相对路径,absolute表示绝对路径,domain表示带域名的绝对路径,常用// 于编辑器内资源文件引用的是其它路径或地址,数据类型为StringurlType: '',// 说明: 设置换行符标签,可设置br或p,默认为br,数据类型为StringnewlineTag: 'br',// 说明: 设置编辑器创建后执行的回调函数,作为编辑器初始化之后的其它初始化,如// 下e其实就是content1,而内部的this其实就是id为content1编辑器对象,数据类型为// functionafterCreate: function(e){console.log(this);},// 说明: 设置图片上传时是否显示本地上传,true表示显示本地上传,false表示不支持// 数据类型为BooleanallowUpload: true,// 说明: 设置图片上传时网络上传时是否可浏览远程服务器图片功能,true表示显示,// false表示不显示,数据类型为BooleanallowFileManager: true,// 说明: 设置referMethod后上传图片的POST参数里有referMethod,数据类型为StringreferMethod: '',// 说明: 设置弹出框的对齐类型,可设置为page或空,page为相对于页面居中,空表示相// 对于编辑器居中dialogAlignType: 'page',// 说明: 设置上传图片时服务端处理脚本,数据类型为Stringp_w_picpathUploadJson: KE.scriptPath + 'php/upload_json.php',// 说明: 设置浏览远程图片服务端处理脚本,数据类型为StringfileManagerJson: KE.scriptPath + 'php/file_manager_json.php'
});

说明: 如上是kindeditor-3.4.2版本支持的所有选项,具体可手动修改index.js测试,高版本新增参数可参考http://kindeditor.net/doc3.php?cmd=config.

转载于:https://blog.51cto.com/xmdevops/1888193

网站前端_KindEditor.基础入门.0002.KindEditor_3.4.2配置参数?相关推荐

  1. 网站前端_EasyUI.基础入门.0002.带你玩转jQuery EasyUI Panel组件 ?

    简单介绍: 说明: Panel面板常当作其它内容的容器,可用于创建包含Layout布局/Tabs选项卡/Accordion折叠面板等基础组件,还提供了内置的折叠/关闭/最大化/最小化的行为,你可以将它 ...

  2. 网站前端_EasyUI.基础入门.0009.使用EasyUI Layout组件的最佳姿势?

    1. 基础布局 <div id="l" class="easyui-layout" data-options="width:500,height ...

  3. Web前端零基础入门——HTML5

    [尚硅谷]Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通 html入门 index1 > <html><head><title>我是谁? ...

  4. 前端零基础入门(八):background的妙用_css精灵

    在前面我们已经了解到了网页当中背景的基本用法了,包括: 背景颜色,背景图片,背景图片是否重复,背景图片是否平铺等等基础样式. 今天要和大家讨论的是背景图的一个稍微高级一点的用法:图片精灵(也叫:雪碧图 ...

  5. 【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程

    [尚硅谷]Web前端零基础入门HTML5+CSS3基础教程 学习视频来源:哔哩哔哩弹幕网(https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from ...

  6. web前端零基础入门(一)

    web前端零基础入门 01. 网页简介 02. 网页简史 03. HTML简介 04. 编写第一个网页 06. 安装notepad++ 07. 自结束标签和注释 07. 标签中的属性 08. 文档声明 ...

  7. 网站前端开发基础知识学什么?必备技能

    网站前端开发基础知识学什么?Web前端开发网页制主要由HTML.CSS.JavaScript三大要素组成.随着企业需求变,前端开发技术的三要素也演变成现今的HTML5.CSS3.jQuery.响应式布 ...

  8. 前端-HTML基础入门

    HTML基础入门 1.今日内容学习目标 1) 能够使用idea创建html文档(掌握) 2)能够使用h1~h6.hr.p.br 等与文本有关的标签 3)能够使用有序列表ul-li和无序列表ol-li显 ...

  9. 前端零基础入门_000_前言

    适合人群 本课程适合下面人群: 1)在校学生,想学习前端开发.将来从事前端开发工作.教程详细系统的讲解了前端基础,还讲解了相关的原理. 2)在职人士,想转行前端.教程提供了大量的案例实践,方便快速上手 ...

  10. web前端零基础入门学习!前端真不难!

    现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...

最新文章

  1. 1.MySQL与MongoDB的操作对比,以及区别
  2. 关于如何存储便于网上浏览的电子书籍
  3. python调用math函数_Python中sqrt函数使用方法
  4. C# 并行运算方法简析
  5. 前端学习(3032):vue+element今日头条管理-反馈
  6. DeePMD-kit的conda安装方法以及速度慢的解决方案
  7. GitHub更新已经fork的项目
  8. lisp 计算三点的夹角_计算三点所形成的夹角的三种方法
  9. h3c交换机端口加入vlan命令_h3c交换机vlan配置划分命令
  10. 注册gitLab时报错There was an error with the reCAPTCHA. Please solve the reCAPTCHA again.
  11. 微信红包服务器卡死,东大跨年红包记--并发案例分析
  12. Shader 常用函数
  13. Windows 7下载
  14. 小杜机器人线下店_泡泡玛特线下机器人商店突破1000台!
  15. Chapter7 Cloud Infrastructure Mechanisms
  16. 考研热催生百亿市场,行业老兵文都教育的“冷思考” ——和大学生交朋友
  17. Microsoft Graph for Office 365 - 认证和授权场景
  18. php artisan怎么用,php artisan常用方法
  19. 激活函数ReLU、Leaky ReLU、PReLU和RReLU
  20. IOS开发UI-------button

热门文章

  1. excel处理几十万行数据_Python处理Excel数据
  2. 七牛云异步抓取java_带你玩转七牛云存储——高级篇
  3. 数值积分方法的c语言实现,编程实现数值积分的几种--方法 c语言.doc
  4. ai作文批改_每日即评 | 积极适应“AI批改作文”的潮流
  5. @configuration注解_SpringBoot注解大全,收藏一波!!!
  6. 1-csv文件,解决数字不全或者数组+e的显示的问题
  7. php 请求 响应,发送http响应后继续处理php
  8. java 运动_java web 运动前端
  9. 网络爬虫之Xpath用法汇总
  10. 27款经典的 CSS 框架分享