KindEditor编辑器结合EasyUi

KindEditor编辑器

var editor;//初始化编辑器
editor = KindEditor.create('#descriptionKindEditorU', {//创建编辑器items : [//创建工具栏显示的功能'preview', 'undo', 'redo', '|', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline','removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist','insertunorderedlist', 'link'],afterCreate:function(){//编辑器加载后时间this.sync().html("我想要设置的内容/hidden里的值");},afterChange: function () {//编辑器发生改变时间$("用来取编辑器内容的文本框").val(this.sync().html());},resizeType:0//固定大小，2可以拖动改变宽度和高度，1只能改变高度，0不能拖动不能改变高度
});
editor.readonly(false);//编辑器非只读
//我是用一个hidden来接收编辑器的内容，在加载的时候把内容赋进去items工具栏的功能如下：
source：表示可以切换编辑器的编辑模式进入源代码HTML查看模式；
undo：表示后退，也就是我们常用的CTRL+Z快捷键功能；
redo：表示前进，也就是我们常用的CTRL+Y快捷键功能；
preview：表示预览，点击可以提前预览编辑器内的内容所展示的效果。
print：表示打印编辑器内的内容。
template：表示可以插入编辑器内的模板窗体；
code：表示可以插入代码段；
cut：表示剪切；
copy：表示复制，如同CTRL+C；
paste：表示粘贴，如同CTRL+V；
plainpaste：表示粘贴为无格式文本，主要是用于比如想赋值其他有HTML格式的纯文本进入编辑器，可以先在这里面进行HTML标签的过滤；
wordpaste：表示从WORD内粘贴；
justifyleft：表示选中文本居左；
justifycenter：表示选中文本居中；
justifyright：表示选中文本居右；
justifyfull：表示两端对齐；
insertorderedlist：表示编号（1、2、3）；
insertunorderedlist：表示项目符号；
indent：表示增加缩进；
outdent：表示减少缩进；
subscript：表示下标；如同：X2
superscript：表示上标；如同：X2
clearhtml：表示清除HTML标签；
quickformat：表示快速排版；
selectall：表示全选；
fullscreen：表示全屏；
formatblock：表示段落；
fontname：表示字体；
fontsize：表示文字大小；
forecolor：表示文字颜色；
hilitecolor：表示文字背景色；
bold：表示文字加粗；
italic：表示文字斜体；
underline：表示给文字追加下划线；
strikethrough：表示给文字追加删除线；
lineheight：表示调整行距；
removeformat：表示删除选中段的格式；
image：表示单个上传图片；
multiimage：表示批量上传图片；
flash：表示插入flash；
media：表示插入音视频文件；
insertfile：表示插入文件；
table：表示插入表格；
hr：表示插入横线；
emoticons：表示插入表情；
baidumap：表示插入地图；
pagebreak：表示插入分页符；
anchor：表示插入锚点；
link：表示插入超链接；
unlink：表示取消超级链接；一般和link配合出现；
about：表示关于kindeditor编辑器的信息；

需要导入的css和js文件如下：（可能有的不需要，这里没有仔细测试）

<link rel="stylesheet" href="../editor/themes/default/default.css" />
<link rel="stylesheet" href="../editor/main.css" />
<link rel="stylesheet" href="../editor/prettify.css" /><script charset="utf-8" src="../editor/kindeditor-all.js"></script>
<script charset="utf-8" src="../editor/kindeditor.js"></script>
<script charset="utf-8" src="../editor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="../editor/kindeditor-min.js"></script>
<script charset="utf-8" src="../editor/show_ads.js"></script>
<script charset="utf-8" src="../editor/lang/zh_CN.js"></script>

因为上传文件的大小受限制，文件在百度云盘中

http://pan.baidu.com/s/1o65UHyM

该文章给需要的朋友做个参照，不喜勿喷

KindEditor编辑器结合EasyUi相关推荐

php网页添加图片的代码,天天查询-PHP版的kindeditor编辑器加图片上传水印功能
首先简单介绍一下kindeditor编辑器: KindEditor 是一套开源的在线HTML编辑器,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...
DWZ与KindEditor编辑器的整合
原文:DWZ与KindEditor编辑器的整合 DWZ自带的编辑器是xheditor,可能很多人用不习惯.就像我,习惯用kindeditor了.现在就来说说如何整合dwz和kindeditor. 一. ...
KindEditor编辑器在ASP.NET中的使用
KindEditor编辑器在ASP.NET中的使用最近做的项目中都有用到富文本编辑器,一直在寻找最后用的富文本编辑器,之前用过CKEditor,也用过UEditor,这次打算用一下KindEdit ...
kindeditor编辑器和图片上传独立分开的配置细节
关于kindeditor编辑器上传按钮的异步加载最关键的部署问题,它的上传图片的组件都已经封装得很好了的,只需要监听到页面按钮的点击事件给编辑器对象传递一些对应的初始化参数即可显示图片上传的弹窗实现异 ...
如何在一个页面添加多个不同的kindeditor编辑器
kindeditor官方下载地址:http://kindeditor.net/down.php (入门必看)kindeditor官方文档:http://kindeditor.net/doc.ph ...
KindEditor编辑器上传图片超过限制
使用KindEditor编辑器上传较大图片时,会出现如下图所示的错误: 超过php.ini允许的大小这样的问题需要到php.ini文件中将upload_max_filesize = 2M的限制大小修改 ...
关于kindeditor编辑器批量上传图片不显示添加图片按钮的问题
今天在项目里发现kindeditor编辑器批量上传图片不显示添加文件按钮,去官网看demo是有的,经过浏览器debug发现是由于 multiimage.js文件的一个时间参数传递的不对, 很奇怪,改为 ...
如何在一个页面上使用多个KindEditor编辑器并将值传递到服务器端
如何在一个页面上使用多个KindEditor编辑器并将值传递到服务器端 1.声明一个editor数组: 2.将之前的编辑器显示行代码: 3.传递KindEditor所填写的相关数据: 今天使用Kind ...
php中如何使用KindEditor编辑器
前不久做了一个小网站,发布新闻的时候,同事推荐了一个好的富文本编辑器kindeditor,觉得用的挺方便,今天在这总结一下,简单的介绍一下kindeidtor使用,这里只将核心的一些配置说明列在下面, ...

KindEditor编辑器结合EasyUi

KindEditor编辑器

该文章给需要的朋友做个参照，不喜勿喷

KindEditor编辑器结合EasyUi相关推荐

最新文章

热门文章