美文网首页
kindEditor富文本编辑器

kindEditor富文本编辑器

作者: 东方舵手 | 来源:发表于2018-08-31 21:15 被阅读0次

    1. 引入js和css

    <link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
    

    2. 初始化富文本 必须有个textarea

    <textarea style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea>
    

    3. js 初始化代码

    <script type="text/javascript">
        var itemAddEditor ;
        //页面初始化完毕后执行此方法
        $(function(){
            //创建富文本编辑器
            itemAddEditor = TT.createEditor("#itemAddForm [name=desc]");
    
        });
    </script>
    
    var TT =  {
        // 编辑器参数
        kingEditorParams : {
            //指定上传文件参数名称
            filePostName  : "uploadFile",
            //指定上传文件请求的url。
            uploadJson : '/pic/upload',
            //上传类型,分别为image、flash、media、file
            dir : "image"
        },
        createEditor : function(select){
            return KindEditor.create(select, TT.kingEditorParams);
        }
    
    };
    
    

    4. 在表单中提交前 需要对kindEditor的控件进行同步

    //同步文本框中的内容
    itemAddEditor.sync();
    

    相关文章

      网友评论

          本文标题:kindEditor富文本编辑器

          本文链接:https://www.haomeiwen.com/subject/xibewftx.html