Rails Project Integration Simditor Editor

If you just need to integrate an editor in a rails project, I recommend that you use Simditor. Lightweight and easy to use, take a few minutes to see it.

Some libraries that the front end needs to reference

= Require jquery
Module
Hotkeys
Uploader
Simditor

= Require Simditor

[email protected] download the necessary files

How the view file is spelled

.ui.form  = form_for  @post  do |f|    .field       = f.text_field :title,:label=>false,:id=> ' Post_title ',:p laceholder= > ' Please enter title ',:class=> ' Ui transparent input '     .field       = f.text_area :content,:label=>false    .field       = f.button :submit,:class=> ' Ui fluid button ':javascript   Var editor = new simditor ({    textarea: $ (' #post_content '),     placeholder:  ' Please input the text ',    defaultimage:  '/image.png ',     fileKey:  ' Upload_file ',    upload: {       url:  '/upload ',      leaveconfirm:  ' is uploading files, If you leave the upload will automatically cancel '     },    pasteimage: true  }); 

In JS

Filekey save some properties of the uploaded file (the upload file here is a picture)

The upload property needs to be aware of the URL: '/upload ' is indicated here.

How routes are written

According to the URL of upload: '/upload ' we can write the corresponding request processing route

Post ' upload ' = ' upload#image '

Processing of the Backstage ROM series

The task at the front end is almost complete, so let's take a look at some of the code at the back end.

class uploadcontroller < applicationcontroller  def image     file = params[:upload_file]    file_list = []     success = true    msg =  ' upload success '     file_real_ path =  '     if !file.content_type.match (/^image\/(gif|png| | Jpg| | jpeg|) {1}$/)       success = false      msg  =  "#{file.original_filename}: Only upload jpg,jpeg,png format images are supported"     elsif file.size  > 2*1024*1024      success = false       msg =  "#{file.original_filename}: Picture is too large, please upload a picture less than 2M"     end     if success      file_real_path = save_file (file )       file_list << file_real_path    end     Logger.info file_real_path    render json: {:success=>success, :msg =>msg,:file_path=> "/#{file_real_path}"  }  end  private  def save _file (file)     extname = file.content_type.match (/^image\/(gif|png|jpg|jpeg) {1}$ /). To_a[1]    filename = file.basename (File.original_filename, '. * ')      uri = file.join (' uploads ', ' images ', ' #{datetime.now.strftime ('%y/%m%d/%h%m%s ')}_#{ Securerandom.hex (4)}_#{current_user.id}.#{extname} ")     save_path =  Rails.root.join (' public ', URI)     file_dir = file.dirname (Save_path)      fileutils.mkdir_p (file_dir)  unless dir.exists? (file_dir)     File.open save_path,  ' WB '  do&nbsP;|f|      f.write (File.read)     end     Return uri  endend

It is important to note that back-end processing should return JSON, here:

Render JSON: {: success=>success,:msg=>msg,:file_path=> "/#{file_real_path}"}

You must return the path of the inserted picture to be displayed on the front page.

Give me a chestnut.

After submitting, we look at the request, in the following log, you can take a closer look at the process of uploading pictures.

started post  "/upload"  for 127.0.0.1 at 2015-05-02 03:39:59 + 0800processing by uploadcontroller#image as */*  parameters: {"Upload_file" =>#<actiondispatch::http::uploadedfile:0xba34087c  @tempfile =#<tempfile:/tmp/ rackmultipart20150502-7561-lbplib.png>,  @original_filename = "Fruit-2.png",  @content_type = "image/ PNG ",  @headers =" content-disposition: form-data; name=\ "upload_file\";  filename=\ " fruit-2.png\ "\r\ncontent-type: image/png\r\n" >,  "original_filename" = "Fruit-2.png"}   User Load  (0.2ms)   SELECT   ' users ' .* from  ' users '  where   ' users '. ' ID '  = 12 limit 1uploads/images/2015/0502/033959_a79e85fa_12.pngcompleted  200 OK in 28ms  (views: 1.0ms | activerecord: 0.2ms) started  post  "/posts"  for 127.0.0.1 at 2015-05-02 03:42:00 +0800processing by postscontroller#create as html   parameters: {"UTF8" and ", " authenticity_token "=" dsggdols6ovbjtsl9kxuodhnrgmbox8owb7fcwuydfangjkdcbl6t8wf2jle3ft/swqshh2peh1//0ho0o+/ua== ", " POST "=>{" Title "=" This is the headline ", " Content "=" <p><b> bold  </b>&nbsp; <i> italic </i > &nbsp;<u> underline </u> &nbsp;<strike> Strikethrough text </strike></p><ol ><li> sequential tables </li><li> ordered tables </li></ol><ul><li> unordered lists </li><li> Unordered list </li></ul><p><br></p>"},  "button" = "}     (0.1ms)   BEGIN  SQL  (0.2ms)   INSERT INTO  ' posts '   (' tags ',  ' title ',  ' content ',  ' created_at ',  ' updatEd_at ')  VALUES  (null,  ' This is the title ',  ' <p><b> bold  </b>&nbsp; <i > Italic </i> &nbsp;<u> underline </u> &nbsp;<strike> strikethrough text </strike></p ><ol><li> sequential tables </li><li> ordered tables </li></ol><ul><li> unordered lists </li> <li> unordered list </li></ul><p><br></p> ',  ' 2015-05-01  19:42:00.407888 ',  ' 2015-05-01 19:42:00.407888 ')     (101.7ms)    commitredirected to http://huxi.com/completed 302 found in 107ms  ( ACTIVERECORD:&NBSP;102.1MS)

Finally look at the contents of post stored in the database

IRB (main):008:0> post.first  post load  (0.3ms)   SELECT   ' posts ' .* from  ' posts '   ORDER BY  ' posts '. ' ID '  asc limit 1=> # <Post id: 4, title:  "This is the title", content:  "<p><b> bold  </b> &nbsp; <i> Italic </i> &nbsp;<u> underline </u> &nb ... ",  visited_ count: nil, tags: [], created_at:  "2015-05-01 19:42:00", updated_at:  " 2015-05-01 19:42:00 "&GT;IRB (Main):009:0> post.first.content  post load  (0.1ms )   SELECT   ' posts ' .* from  ' posts '   ORDER BY  ' posts '. ' ID '  ASC LIMIT 1=>  <p><b> Bold  </b>&nbsp; <i> Italic </i > &nbsp;<u> underline </u> &nbsp;<strike> Strikethrough text </strike></p><ol ><li> Sequential list </li><li> There are sequence tables </li></ol><ul><li> unordered lists </li><li> unordered lists </li></ul> <p><br></p> "IRB (main):010:0>

Over.

Rails Project Integration Simditor Editor