kindeditor富文本编辑器的简单使用方法

1 首先得和官网的使用步骤一致 引入css,和js

//默认样式,涵盖比较全
<link rel="stylesheet" href="/kindeditor/themes/default/default.css" />
//简单模式,编辑操作只有部分,但是我在用的时候好像没效果,
//如果有哪位大佬无意中点进这篇文章,可否留下您的评论,在下先谢过了。
<link rel="stylesheet" href="/kindeditor/themes/simple/simple.css" />
<script charset="utf-8" src="/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="/kindeditor/lang/zh-CN.js"></script>
<link rel="stylesheet" href="/kindeditor/plugins/code/prettify.css" />
<script type="text/javascript" charset="utf-8" src="/kindeditor/plugins/code/prettify.js"></script>
var editor;
//全局变量,在文章内容回显的时候需要加个定时器,编辑器是同步,回显的内容是异步,
//所以说可能数据返回了,但是编辑器还没渲染出来。定时器也是异步操作,在这个短时间内编辑器
//就已经加载出来了。
KindEditor.ready(function(K) {
    editor = K.create('#editor_content', {
        themeType : 'simple',//我采用的是简单模式,但是没有其效果
        width : '700px',
        minHeight:'400px',
        //items就是要用的操作
        items:[
             'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
            'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
            'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
            'formatblock', 'fontname', 'fontsize', 'bold',
            'italic', 'underline', 'strikethrough', 'lineheight', '|', 'image',
            'hr', 'emoticons','link', 'unlink',
        ],
        cssPath : '/kindeditor/plugins/code/prettify.css',//不是必须
        /*allowFileManager : true,*/
        uploadJson: '/ss/newEditerUpLoad?token='+getToken(),//对于这个接口后台代码比较特殊
        afterUpload : function(url, data, name) {
            //this.sync();
            if(name=="image" || name=="multiimage"){ //单个和批量上传图片时
                var img = new Image();
                img.src = url;
                img.onload = function(){ 
                //图片必须加载完成才能获取尺寸,限制图片的大小
                    if(img.width>700) editor.html(editor.html().replace('<img src="' + url + '"','<img src="' + url + '" width="700"'))
                }
            }
        },
    });

});

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值