KindEditor使用

Posted 2020-07-28 DJL箫氏

参考链接：http://www.cnblogs.com/sntetwt/p/3679837.html

http://kindeditor.net/docs/option.html#cssdata

1 设置初始字体：

KindEditor.ready(function(K) {
    window.editor = K.create(\'textarea[name="content"]\', {
        cssData: \'body {font-family: "微软雅黑"; font-size: 14px}\'
    });
});

当引入kindedit的相关文件后，就可以进行初始化操作，如果不设置，那么引入的就是默认样式，包含全部的选项功能。 K.create(\'textarea[name="content"]\',{})

这是代表选择name=content的textarea,就和选择器是一样的，这样就可以单独配置每一个textarea。后面就是对这个textarea进行单独配置。cssData就是对这个的整体初始配置，例如body配置的字体为微软雅黑，当然如果需要配置的文件很多，那么也可以直接引入一个css文件，用cssPath进行配置。

 

2 设置文本框是否可拖动：resizeType

     2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。

• 数据类型: Int
• 默认值: 2

 

代码插入功能开启和代码高亮

首先要设置items中的code

KindEditor.ready(function(K) {
          editor = K.create(\'textarea\', {
          allowImageUpload : true,
          cssData: \'body {font-family: "微软雅黑"; font-size: 16px}\',//设置默认字体
          uploadJson: \'/uploadImg\',//设置action  请求路径
//          uploadJson: \'/ueditor/ue\',
          resizeType : 0,   //编辑区域大小禁止改变
          items : [
            \'fontname\', \'fontsize\', \'|\', \'forecolor\', \'hilitecolor\', \'bold\', \'italic\',
            \'underline\', \'removeformat\', \'|\', \'justifyleft\', \'justifycenter\', \'justifyright\',
            \'insertorderedlist\', \'insertunorderedlist\', \'|\', \'emoticons\', \'image\',\'code\', \'link\',\'fullscreen\']
          });
        });

相关功能选项的手册

http://kindeditor.net/docs/option.html

http://www.hdj.me/use-kindeditor-prettify-plugin

主要要用到插件文件夹下的code插件  引入

<link rel="stylesheet" type="text/css" href="kindedit/plugins/code/prettify.css" />
<script type="text/javascript" src="kindedit/plugins/code/prettify.js"></script>
<script>
$(function(){ prettyPrint(); });
</script>

后台编辑器声明的时候加上插件样式，缺省这个参数，编辑器中插入代码跟普通文字一样，并且再次编辑的时候被隐藏了，所以这一步很关键。（这一步没有很懂）

 

var editor = KindEditor.create(\'textarea.editor\', {
    cssPath : [\'[kePath]/plugins/code/prettify.css\']
});

 

获取textarea的值

https://blog.phpha.com/backup/archives/510.html

我的个人博客中是  editor.html();  editor.html("设置内容")