Simditor

---

Simditor is a browser-based WYSIWYG text editor.

It is used by Tower -- a popular project management web application.

Supported Browsers: IE10+、Chrome、Firefox、Safari.

• Download Zip
• Install with npm: $ npm install simditor
• Install with bower: $ bower install simditor

Demo and docs can be found here.

====分割线=========================================

样式更新说明(2018-9-5)

搭环境太麻烦了，直接暴力调整js和css。

• 修改simditor.js，优化文档模式使用
• placeholder回来了
• 调整simditor.css部分样式

使用说明

默认启用文档模式，文档宽度为 800px。可根据需要在 option 中配置。

var editor = new Simditor({
      textarea: $('#txt-content'),
      placeholder: 'Simditor魔改，这里输入文本...',
      toolbar: toolbar,
      pasteImage: true,

      docMode: true,//文档模式
      docWidth: 800,//文档宽度

      defaultImage: 'plugins/simditor/placeholder.png',
      upload: location.search === '?upload' ? {
        url: '/upload'
      } : false
    })

样式更新说明(2018-9-2)

• 工具栏样式
• 引用样式
• 文档编辑区宽度（800px）
• placeholder暂时隐藏了，absolute不支持margin属性，后续调整js实现。
• 增加文档宽度标识
• 字数统计

代码使用

由于不熟悉Simditor的JS代码，没集成，使用稍微麻烦点。

首先需要引用本项目中的样式simditor.css配合使用，文档宽度定义为 800px。如果需要调整的可以修改editor.scss中 $simditor-body-width值或直接修改simditor.css，搜索800px，840px替换。

然后在初始化的方法里加入相关代码。下面代码是在官网示例的基础上做的调整，供参考。

(function() {
  $(function() {
    var $preview, editor, mobileToolbar, toolbar;
    Simditor.locale = 'zh-CN';
    toolbar = ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'];
    mobileToolbar = ["bold", "underline", "strikethrough", "color", "ul", "ol"];
    if (mobilecheck()) {
      toolbar = mobileToolbar;
    }
    editor = new Simditor({
      textarea: $('#txt-content'),
      //placeholder: '这里输入文字...',
      toolbar: toolbar,
      pasteImage: true,
      defaultImage: 'assets/images/image.png',
      upload: location.search === '?upload' ? {
        url: '/upload'
      } : false
    });

    // 1、文档宽度标识
    var docPlaceholderHTML = $("<div class=\"doc-placeholder\"></div>");
    docPlaceholderHTML.append("<span class=\"left\"></span>");
    docPlaceholderHTML.append("<span class=\"right\"></span>");
    $(".simditor-body").before(docPlaceholderHTML);

    $preview = $('#preview');
    if ($preview.length > 0) {
      return editor.on('valuechanged', function(e) {
        return $preview.html(editor.getValue());
      });
    }

    // 2、监听valuechanged事件，通过正则获取长度
    editor.on("valuechanged",function(e,src){
      var value = editor.getValue();
      var text = value.replace(/<\/?[^>]*>/g,'').replace(/[ | ]*\n/g,'\n').replace(/\n[\s| | ]*\r/g,'\n').replace(/&nbsp;/ig,'');
      $(".words-count .num").text(text.length);
  	});
  });

}).call(this);