一款简洁好用的编辑器--Simditor

发布时间:1970-01-01  编辑:Mrs.默先森 

    安装下载

    npm安装:

    $ npm install simditor

    bower安装

    $ bower install simditor

    github:https://github.com/mycolorway/simditor


    使用

    在web 应用中引入:

    <link rel="stylesheet" type="text/css" href="[style path]/simditor.css" />
    
    <script type="text/javascript" src="[script path]/jquery.min.js"></script>
    <script type="text/javascript" src="[script path]/module.js"></script>
    <script type="text/javascript" src="[script path]/hotkeys.js"></script>
    <script type="text/javascript" src="[script path]/uploader.js"></script>
    <script type="text/javascript" src="[script path]/simditor.js"></script>


    在项目中初始化出simditor:

    <textarea id="editor" placeholder="武斌博客网:https://www.wubin.pro" autofocus></textarea>
    <script>
        var editor = new Simditor({
            textarea: $('#editor')
            //optional options
        });
    </script>

    ok,到此默认的编辑器就可以看到了

    屏幕快照 2018-08-17 下午5.05.04.png


    可选参数:

    var editor = new Simditor({
        textarea: $('#editor')
        //optional options
        ,placeholder:'武斌博客网:https://www.wubin.pro'
        ,toolbar:true//显示工具栏,默认值false
        ,toolbarFloat:true//滚动时在浏览器顶部固定工具栏,默认值true
        ,toolbarHidden:false//隐藏工具栏,默认值false
        ,defaultImage:''//默认图像占位符。在Simditor中插入图片时使用,默认值'images/image.png'
        ,tabIndent:true//使用tab缩进,默认true
        ,params:{name:'超人'}//在textarea中插入隐藏输入以存储参数,默认值{}
        ,upload:false//上传图片的额外参数,默认值false,可接受的值:false或key - value
        ,pasteImage:false//通过剪贴板粘贴图像支持上传(仅支持Firefox and Chrome),默认值false
    });


    更多参数请参考 Options Doc 

    如需要定义toolBar,可设置toolBar参数:

    toolbar:[
        'title'//标题
        ,'bold'//加粗
        ,'italic'//斜体
        ,'underline'//下划线
        ,'strikethrough'//删除线
        ,'fontScale'//字体缩放
        ,'color'//字体颜色
        ,'ol'//有序列表
        ,'ul'//无序列表
        ,'blockquote'//引用
        ,'code'//代码
        ,'table'//表格
        ,'link'//链接
        ,'image'//上传图片
        ,'hr'//分割线
        ,'indent'//缩进
        ,'outdent'//反向缩进
        ,'alignment'
    ]


    上传参数

    upload:{
        url: ''//上传url接口地址
        ,params: null//请求服务器携带的额外参数
        ,fileKey: 'upload_file'//上传文件name,等同    ,connectionCount: 3//可同时上传的图片数量
        ,leaveConfirm: '文件上传中离开页面时的提示消息'
    }

    上传完成返回的json数据

    {
      "success": true/false,
      "msg": "error message", # optional
      "file_path": "[real file path]"
    }


本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动。

陶太富博客 http://blog.taotaifu.cn

最新发布

最新评论

0.059494s