Plugin - Simditor

介绍:

Simditor 是一款轻量级的富文本编辑器

 

引用:

<!--font-awesome 是一个font icon 库, 用来生成 toolbar 的样式-->
<!--如果把 font-awsome.css 放在 styles 文件夹，那么就应该把 font 文件放在跟 styles 同级的 fonts 文件夹-->
<link rel="stylesheet" type="text/css" href="[style path]/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="[style path]/simditor.css" />
<!--jquery : 基于jquery, jquery是必须的-->
<script type="text/javascript" src="[script path]/jquery.min.js"></script>
<!--module : 是彩程内部使用的 CoffeeScript 组件抽象类，Simditor 基于这个类开发-->
<script type="text/javascript" src="[script path]/module.js"></script>
<!--hotkeys : 用于支持快捷键-->
<script type="text/javascript" src="[script path]/hotkeys.js"></script> 
<!--uploader : 是一个与 UI 无关的上传逻辑，如果你的项目不需要上传附件，那么可以不引用这个文件-->
<script type="text/javascript" src="[script path]/uploader.js"></script>
<!--hotkeys : 用于支持快捷键-->
<script type="text/javascript" src="[script path]/simditor.js"></script>
<!--注 : 如果觉得需要引用的脚本文件太多，可以用 simditor-all.js（里面包含了module.js uploader.js 和 simditor.js）-->

 

使用:

首先定义一个 textarea

<textarea id="editor" placeholder="这里输入内容" autofocus></textarea>

 var editor = new Simditor({
        // 是初始化 Simditor 的必需选项，可以接受 jQuery Object、HTML Element 或者 Selector String
        // is a required option. jQuery Object、HTML Element or Selector String can be passed to this option.
        textarea: $('#editor'),
        //（默认值：false）是否允许粘贴上传图片，依赖 upload 选项，仅支持 Firefox 和 Chrome 浏览器
        //  Support uploading by pasting images from clipboard. Only supported by Firefox and Chrome
        pasteImage: true,
        //（默认值：''）编辑器的 placeholder，如果为空 Simditor 会取 textarea 的 placeholder 属性
        // (default: '') Placeholder of simditor. Use the placeholder attribute value of the textarea by default.
        placeholder: '',
        //（默认值：true）是否显示工具栏按钮, bool 或者 键值对
        // (default: true) - Show the toolbar buttons
        /* [
                'title'
                'bold'
                'italic'
                'underline'
                'strikethrough'
                'fontScale'
                'color'
                'ol'             # ordered list
                'ul'             # unordered list
                'blockquote'
                'code'           # code block
                'table'
                'link'
                'image'
                'hr'             # horizontal ruler
                'indent'
                'outdent'
                'alignment'
            ]
        */
        toolbar: true,
        //（默认值：true）是否让工具栏按钮在页面滚动的过程中始终可见
        // (default: true) - Fixed the toolbar on the top of the browser when scrolling.
        toolbarFloat: true,
        //（默认值：false）是否隐藏工具栏，隐藏后 toolbarFloat 会失效
        // (default: false) - Hide the toolbar.
        toolbarHidden: false,
        //（默认值：'images/image.png'）编辑器插入混排图片时使用的默认图片
        // (default: 'images/image.png') - Default image placeholder. Used when inserting pictures in Simditor.
        defaultImage: 'images/image.png',
        //（默认值：true）是否在编辑器中使用 tab 键来缩进
        // (default: true) - Use 'tab' key to make indent.
        tabIndent: true,
        //（默认值：{}）键值对，在编辑器中增加 hidden 字段（input:hidden），通常用于生成 form 表单的默认参数
        // (default: {}) Insert a hidden input in textarea to store params (key-value pairs).
        params: {},
        //（默认值：false）false 或者键值对，编辑器上传本地图片的配置
        // (default: false) Accept false or key - value pairs. Extra options for uploading images. e.g. 'url', 'params'
        upload: {
            // 上传的 API
            // upload api url
            url: '/Home/Upload',
            // 附带的参数
            // extra params sent to the server;
            params: null,
            // key of the file param
            fileKey: '123123',
            // 最多同时上传图片的数量
            // how many images can be uploaded simultaneously;
            connectionCount: 3,
            // 图片上传中点击关闭页面时 将显示的文字
            // messages will be shown if one leave the page while file is being uploaded
            /* 
                JSON response after uploading complete:
                {
                  "success": true/false,
                  "msg": "error message", # optional
                  "file_path": "[real file path]"
                }
            */
            leaveConfirm: 'Uploading is in progress, are you sure to leave this page?'
        },
        // (default: ['upload', 'external']) Insert images by uploading from the local computer or external links. If both are enabled, Simditor will show a drop-down menu when click the image button.
        imageButton: ['upload', 'external'],
        // (default: null) Tags that are allowed in Simditor. Default whitelist:
        /*
            ['br', 'span', 'a', 'img', 'b', 'strong', 'i', 'strike', 'u', 'font', 'p', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'h1', 'h2', 'h3', 'h4', 'hr']
            Note that custom whitelist will be merged into the default one.
        */
        allowedTags: null,
        // (default: null) Inline style whitelist. Default whitelist:
        allowedStyles: [],
        // (default: null) A list of programming languages supported by code block. Default list:
        /*
            [
              { name: 'Bash', value: 'bash' }
              { name: 'C++', value: 'c++' }
              { name: 'C#', value: 'cs' }
              { name: 'CSS', value: 'css' }
              { name: 'Erlang', value: 'erlang' }
              { name: 'Less', value: 'less' }
              { name: 'Sass', value: 'sass' }
              { name: 'Diff', value: 'diff' }
              { name: 'CoffeeScript', value: 'coffeescript' }
              { name: 'HTML,XML', value: 'html' }
              { name: 'JSON', value: 'json' }
              { name: 'Java', value: 'java' }
              { name: 'JavaScript', value: 'js' }
              { name: 'Markdown', value: 'markdown' }
              { name: 'Objective C', value: 'oc' }
              { name: 'PHP', value: 'php' }
              { name: 'Perl', value: 'parl' }
              { name: 'Python', value: 'python' }
              { name: 'Ruby', value: 'ruby' }
              { name: 'SQL', value: 'sql'}
            ]
        */
        codeLanguages: []
    });