Rails中使用富文本编辑器Simditor (支持Markdown)

August 27, 2018 16:30
访问量:481
摘要:Simditor 是 Tower 出产的富文本编辑器,极其简洁,很好用.

编辑器demo

初级的使用

1.首先按照文档开始基本的应用很简单。

gem 'simditor'

bundle install

2.js与 css,加入对应的 js 和 css 文件

app/javascripts/application.js
//= require simditor

app/stylesheets/application.css
*= require simditor

3.在对应的 edit.html.erb中加入 js

<script type="text/javascript">
  var editor = new Simditor({
          textarea: $('#editor'),
          pasteImage: true,
          defaultImage: '<%= image_path "upload-loading.png" %>',
          upload: {url: '/upload'}
      });
</script>

4.将 textarea 的 id 换成 editor 来使用

<%= f.textarea :description, label: '项目简介', required: true, placeholder: "项目简介",  input_html: {id: "editor", class: "form-control"} %>

5.在 show.html.erb 里面使用 simple_format显示即可

这里尽量不要使用 raw 和 html_safe 会伴随着安全问题,用 sanitize 或者 simple_format 。

  <%= simple_format(@case.description) %>

到这里我们已经实现了基本的Simditor的使用。

进阶-同一个页面使用多个编辑器

一个页面应用多个编辑器的时候 1,2步都一样, 第三部开始有了区别。

在app/assets/javascripts/simditor_init.js中添加代码如下:

$(".rich_text_editor").each(function (index, dom) {
    new Simditor({
      textarea: $(dom),
      placeholder: '',
      pasteImage: true,
      markdown: false,
      toolbar: ['markdown', 'title', 'bold', 'fontScale', 'color',  'emoji', 'ol', 'ul', 'blockquote', 'code', 'table',
      emoji: {
        imagePath: '/assets/emoji/'
      }
    });
});

这时候我们不能用id, 要用class, 对每个dom元素遍历。

只需要在用到富文本编辑器的页面,引用该js文件,并在对应的textarea中加上class = rich_text_editor 就可以使用多个编辑器了。

使用Simditor的扩展丰富富文本编辑器的内容。'

1. 增加了表情包 simditor-emoji

按照github上吧css,js文件导入到项目中,并引用。这里有个小坑,就是关于表情包图片的路径需要注意。

  emoji: {
``
    imagePath: '/assets/emoji/'   
    (这个路径,如果部署到生产可能要用到 <% asset_path ..... %>的形式)
  }

2. 这个扩展是编辑器全屏 simditor-fullscreen

导入css,js文件。应用即可, 这里涉及到icomoon的font有问题,把css文件中src注释掉即可。

3. 最重要的扩展来了 simditor-markdown。 这个是所见即所得的编辑器,并不支持markdown的语法。所以这个扩展是最重要的一个。

<script type="text/javascript" src="[path]/marked.js"></script>
<script type="text/javascript" src="[path]/to-markdown.js"></script>
<script type="text/javascript" src="[path]/simditor-markdown.js"></script>

<link rel="stylesheet" href="[path]/simditor-markdown.css" media="screen" charset="utf-8" />

这里用到了3个js,一个css文件。 到对应的地方把文件下载到项目中应用。

基本上富文本编辑器就告一段落如果还想更多的扩展,看官方文档。

如果后续需要编辑器能够上传图片到服务器,或者是upyun,等等请参考以下博客:

评论

暂无相关评论,快来抢占沙发吧!
评论框离家出走了,点击找回!
昵称
邮箱
网站
昵称
邮箱
网站