kindeditor编辑器美化,kindeditor使用方法，kindeditor怎么设置长宽度
kindeditor编辑器美化,kindeditor使用方法，kindeditor怎么设置长宽度详细介绍
本文目录一览： kindeditor使用方法，kindeditor怎么设置长宽度
kindeditor使用方法，kindeditor怎么设置长宽度
1、首先我们需要kindeditor及其相关文件，这些文件可以去网上找，很容易找到。
2、下载完成后会看到很多文件，但是只需要其中的三个主要文件，如下图，把这三个文件拷贝到项目中，不要忘记jQuery文件。
3、然后就是使用方法了，其实这个kindeditor就是把textare框美化了一下，添加了一些功能。所以在html中，需要有一个textare框，给它一个id。
4、之后需要引入jQuery及kindeditor的js文件，其它的文件kindeditor会自动调用，不必手动引用。然后在js中写相关的语句就可以了，如下图：
5、
kindeditor的长度和宽度都可以通过参数来设置，其中width来设置宽度，最好用百分数，height来设置高度。
KindEditor.create('#editor_id',{allowImageUpload:false,resizeType : 1,width:"50%",height:"200px"});
6、除了用参数设置kindeditor大小之外，看html源码还可以看到kindeditor大小由class为ke-container和ke-container-default所在的div控制，所以可以给ke-container和ke-container-default设置一个宽度和高度，要确保其优先级最高，所以加！important。
.ke-container.ke-container-default{
width:600px!important;
height:100px!important;
}
KindEditor.ready(function(K) { var editor1 = K.create('#content1', { cssPath: 'kindeditor/plugins/code/prettify.css', allowFileManager: true, resizeType:1 }); }); resizeType 2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。 数据类型: Int 默认值: 2
方法/步骤
1
首先我们需要kindeditor及其相关文件，这些文件可以去网上找，很容易找到。
2
下载完成后会看到很多文件，但是我们只需要其中的三个主要文件，如下图，把这三个文件拷贝到你的项目中，不要忘记jQuery文件。
3
然后就是使用方法了，其实这个kindeditor就是把textare框美化了一下，添加了一些功能。所以在html中，我们需要有一个textare框，给它一个id。
4
之后我们需要引入jQuery及kindeditor的js文件，其它的文件kindeditor会自动调用，不必手动引用。然后在js中写相关的语句就可以了，如下图：
5
kindeditor的长度和宽度都可以通过参数来设置，其中width来设置宽度，最好用百分数，height来设置高度。
KindEditor.create('#editor_id',{allowImageUpload:false,resizeType : 1,width:"50%",height:"200px"});
6
除了用参数设置kindeditor大小之外，我们看html源码还可以看到kindeditor大小由class为ke-container和ke-container-default所在的div控制，所以我们可以给ke-container和ke-container-default设置一个宽度和高度，要确保其优先级最高，所以加！important。
.ke-container.ke-container-default{
width:600px!important;
height:100px!important;
}
kindeditor 如何实现和input的placeholder属性的效果
placeholder属性能够让你在文本框里显示提示信息，一旦你在文本框里输入了什么信息，提示信息就会隐藏。你以前可能无数次看到这种效果，但那些大部分是用JavaScript里实现的，而现在，HTML5提供了原生支持，而且效果更好！
HTML代码
复制代码
代码如下:
你也看见了，需要做的只是在文本框的声明标签上加入placeholder属性。完全不需要JavaScript来创造这种效果。
检查浏览器是否支持Placeholder属性
因为placeholder是一种新属性，很有必要检查一下你的浏览器是否支持它，比如IE6、IE8肯定是不支持的：
复制代码
代码如下:
function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}
如果用户的浏览器不支持placeholder特征，你需要借助MooTools, Dojo, 或其它JavaScript工具来实现它：
复制代码
代码如下:
/* mootools ftw! */
var firstNameBox = $('first_name'),
message = fi www.hbbz08.com rstNameBox.get('placeholder');
firstNameBox.addEvents({
focus: function() {
if(firstNameBox.value == message) { searchBox.value = ''; }
},
blur: function() {
if(firstNameBox.value == '') { searchBox.value = message; }
}
});
用CSS美化placeholder
在进一步研究时我发现了另外一个有趣的CSS功能：CSS美化INPUT placeholder效果。下面让我来用简单的CSS代码美化文本框里的placeholder文字。
CSS代码
火狐浏览器里的用法和谷歌浏览器里不太一样。它们的名称都很好理解：
复制代码
代码如下:
/* all */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }
/* individual: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
/* individual: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
KindEditor编辑器的使用方法 KindEditor怎么用
KindEditor是一款用Javascript编写的开源在线HTML编辑器，主要用户是让用户在网站上获得可见即可得的编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。你可以在其官网了解更多信息，包括演示、文档、下载等。
KindEditor的使用方法也非常简单，下面言小鱼就简单介绍一下其用法，这些内容你可以在KindEditor官网找到。
KindEditor编辑器的使用方法 KindEditor怎么用
工具/原料
KindEditor编辑器
电脑
方法/步骤
1
你要把所需的文件下载下来，下载地址去上面的官网找吧。
2
你要把所需要的文件上传到你的网站，接下来就是引用了。在需要显示编辑器的位置添加textarea输入框，注意ID在页面中应该是唯一的，不说你也知道。
KindEditor编辑器的使用方法 KindEditor怎么用
3
在该HTML页面添加以下脚本，第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考 编辑器初始化参数 (官网有详细介绍)。
KindEditor编辑器的使用方法 KindEditor怎么用
KindEditor编辑器的使用方法 KindEditor怎么用
4
如果你想获得编辑器中的数据，可以用下面的代码。
KindEditor编辑器的使用方法 KindEditor怎么用
5
KindEditor的使用方法就介绍到这里了，如果您还有不明白的地方可以去官网查找详细资料，相信一定能找到您想要的答案!
END
注意事项
本文由言小鱼原创，转载请注明，也可以去小鱼的博客看原文。
如何将百度Uediter中的代码高亮嵌入kindeditor编辑器中
首先打开 kindeditor-class.php，很容易找到上面的代码，做修改；然后打开 kindeditor.php 文件，找到代码，把 Kindeditor 的高亮代码 js 注册在底部，保存。
ckeditor更换为kindeditor编辑器
方法/步骤
KindEditor是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript. 编写，可以无缝地与Java、.NET、PHP、ASP 等程序集成。
我下载的是4.1.10版本的，其中包含asp、jsp、php等不同脚本针对性的编辑器包，选择适用我的cms的php包
将对应版本和编码格式对应的编辑器包更替到网站中，然后去网站后台，系统--》系统基本参数--》核心设置--》Html编辑器，第一项即是
需要fck的用户可以去官网下载
然后点击确定，点击左侧的生成--》更新系统缓存
5
到这里基本完成了，dedecms后台ckditor到kindeditor编辑器的更换，现在可以去后台发布文档查看编辑器了；
kindeditor 编辑器php的详细配置方法
简单的使用 无需配置 打开 kindeditor\examples 里面的页面看下代码，直接考过去用就是了
通过使用KE.show(config)方法即可将编辑器添加到文档中。下面是一段源码：
KE.show = function(args) {
KE.init(args);
KE.event.ready(function() { KE.create(args.id); });
};
从源码中可以看出，有两种使用编辑器的方法：
法一：KE.show(config);
法二：KE.init(config);KE.create(id);
·无论使用哪种方式使用KindEditor编辑器，都必须进行参数配置；
·可以在KE.show()和KE.init()方法中传递配置参数config；
·配置参数config是一个对象，一般使用字面量对象；
·其中，id参数是唯一必须进行配置的，其他参数可以省略。
参数设置例子
KE.show({
id : "content_1",
width : "70%", //编辑器的宽度为70%
height : "200px", //编辑器的高度为100px
filterMode : false, //不会过滤HTML代码
resizeMode : 1 //编辑器只能调整高度
});
配置参数
1、id
TEXTAREA输入框的ID，必须设置。
数据类型：String
2、items
配置编辑器的工具栏，其中"-"表示换行，"|"表示分隔符。
数据类型：Array
默认值：
['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', '|', 'image',
'flash', 'media', 'advtable', 'hr', 'emoticons', 'link', 'unlink', '|', 'about']
3、width
编辑器的宽度，可以设置px或%，比TEXTAREA输入框样式表宽度优先度高。
数据类型：String
默认值：TEXTAREA输入框的宽度
注: 3.2版本开始支持。
4、height
编辑器的高度，只能设置px，比TEXTAREA输入框样式表高度优先度高。
数据类型：String
默认值：TEXTAREA输入框的高度
注: 3.2版本开始支持。
5、minWidth
数据类型：Int
指定编辑器最小宽度，单位为px。
默认值：200
6、minHeight
数据类型：Int
指定编辑器最小高度，单位为px。
默认值：100
7、filterMode
数据类型：Boolean
true时过滤HTML代码，false时允许输入任何代码。
默认值：false
注: 3.4以前版本的filterMode默认值为true。
8、htmlTags
指定要保留的HTML标记和属性。哈希数组的key为HTML标签名，value为HTML属性数组，"."开始的属性表示style属性。
数据类型：Object
默认值：
{
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' : []
}
注：filterMode为true时有效。3.4版本开始属性可设置style，保留所有inline样式。
9、resizeMode
2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。
数据类型：Int
默认值：2
10、skinType
风格类型，default或tinymce。
数据类型：String
默认值：default
注：3.4以前版本和3.4.1版本开始默认值为default，3.4版本的默认值为oxygen。
11、wyswygMode
可视化模式或代码模式
数据类型：Boolean
默认值：true
12、cssPath
指定编辑器iframe document的CSS，用于设置可视化区域的样式。
数据类型：String或Array
默认值：空
注：3.4.1版本开始可指定多个CSS文件。例如：cssPath : ['a.css', 'b.css']
13、skinsPath
指定编辑器的skins目录，skins目录存放风格的css文件和gif图片。
数据类型：String
默认值：KE.scriptPath + 'skins/'
14、pluginsPath
指定编辑器的plugins目录。
数据类型：String
默认值：KE.scriptPath + 'plugins/'
15、minChangeSize
undo/redo文字输入最小变化长度，当输入的文字变化小于这个长度时不会添加到undo堆栈里。
数据类型：Int
默认值：5
16、loadStyleMode
true时自动加载编辑器的CSS。
数据类型：Boolean
默认值：true
注: 3.4版本开始支持。
17、urlType
改变站内本地URL，可设置空、relative、absolute、domain。
空为不修改URL，relative为相对路径，absolute为绝对路径，domain为带域名的绝对路径。
数据类型：String
默认值：空
注: 3.4版本开始支持，3.4.1版本开始默认值为空。
18、newlineTag
设置回车换行标签，可设置p、br。
数据类型：String
默认值：br
注: 3.4版本开始支持。
19、afterCreate
设置编辑器创建后执行的回调函数。
数据类型：Function
默认值：无
20、afterDialogCreate
设置弹出浮动框创建后执行的回调函数。
数据类型：Function
默认值：无
注: 3.4.3版本开始支持。
21、allowUpload
true或false，true时显示上传图片标签。
数据类型：Boolean
默认值：true
注: 3.4版本开始支持。
22、allowFileManager
true或false，true时显示浏览服务器图片功能。
数据类型：Boolean
默认值：false
注: 3.4版本开始支持。
23、referMethod
设置referMethod后上传图片的POST参数里有referMethod。
数据类型：String
默认值：空
注: 3.4版本开始支持。
24、dialogAlignType
设置弹出框(dialog)的对齐类型，可设置page和空。
指定page时按当前页面居中，指定空时按编辑器居中。
数据类型：String
默认值：page
注: 3.4.1版本开始支持。
25、imageUploadJson
指定上传图片的服务器端程序。
数据类型：String
默认值：../../php/upload_json.php
注: 3.4.1版本开始支持。
26、fileManagerJson
指定浏览远程图片的服务器端程序。
数据类型：String
默认值：../../php/file_manager_json.php
注: 3.4.1版本开始支持。
27、autoSetDataMode
true或false。
true时自动将编辑器内容设置到原来的textarea，也就是每次输入内容就执行KE.util.setData函数。
数据类型：Boolean
默认值：true
注: 3.5版本开始支持。打开autoSetDataMode模式后会降低输入性能，理想的做法是关闭autoSetDataMode，提交数据前执行KE.util.setData。
28、afterSetData
自动执行KE.util.setData后执行的回调函数，autoSetDataMode为true时有效。
数据类型：Function
默认值：无
注: 3.5版本开始支持。
29、shadowMode
true或false，true时弹出层显示阴影。
数据类型：Boolean
默认值：true
注: 3.5版本开始支持。
30、allowPreviewEmoticons
true或false，true时鼠标放在表情上可以预览表情。
数据类型：Boolean
默认值：true
注: 3.5版本开始支持。
html里怎么制作自定义控件
我想很多朋友在使用Kindeditor编辑器的时候都会遇到这样一个问题，如：给A标签加上title属性过后，浏览的时候，却神奇般地发现title属性没有了。再次切换html源代码的时候，返现编辑器将title属性给删掉了。追究其根本原因主要是kindeditor设置了标签和属性的默认过滤机制。
一、如何控制kindeditor编辑器不过滤任何标签？
二、如何设置Kindeditor编辑器只保留某些标签和属性？
面对这样一个问题，我们可以通过设置其htmlTags属性来得以实现。htmlTags指定要保留的HTML标记和属性。Object的key为HTML标签名，value为HTML属性数组，开始的属性表示style属性。
定义每个标签的保留属性，记住形如这样的类型font-size'主要是表示其属于标签内的style属性内的样式。形如’src'这一类的，就表示标签的直接属性。
综上所述，通过以上两种方式即可实现kindeditor编辑器的标签和属性过滤效果。
急 急！！KindEditor编辑器简易版的工具栏的高度怎么调节
http://kindeditor.net/docs/option.html，看属性就行了，设置height高度和minHeight高度就可以了
kindeditor-4.1.10编辑器设置中文字体不管用怎么办？
可能因为你的电脑系统没有自带的黑体
使用 word 内的字体选择查看是否有黑体或simhei
也可以检查 C:\WINDOWS\Fonts 内有无simhei.ttf 文件
若无黑体 搜索下载或找一台电脑拷贝
附上kindeditor黑体设置源码:可见其使用的是simhei字体即黑体
Kindeditor在线文本编辑器如何过滤HTML_javascript技巧
KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写，可以无缝的与Java、.NET、PHP、ASP等程序接合。这个是官网上的介绍。主页：http://www.kindsoft.net/index.php下载：http://www.kindsoft.net/down.php示例：http://www.kindsoft.net/demo.php在使用kindeditor文本编辑器时遇到的问题，客户直接从Excel里粘贴文本内容到文本编辑器中（能不能再懒一些），然后不调整粘贴内容直接就保存（你敢不敢再懒一些）！对于这种很无语的行径，我只能对他大吼一声，我做一个标签过滤吧，这样你粘贴就不会出现问题了（怂？谁惹得起客户）。过滤方法也简单：默认filterMode是关闭状态，首先把filterMode设置为true，然后增加htmlTags，指定要保留的HTML标记和属性。哈希数组的key为HTML标签名，value为HTML属性数组，"."开始的属性表示style属性。数据类型：Object