rails使用bootstrap3-wysiwyg可視化編輯器並實現自定義圖片上傳插入功能

時間  2019-11-09
標籤 rails 使用 bootstrap3 bootstrap wysiwyg 可視化 編輯器 實現 自定義 圖片 上傳 插入 功能 欄目 Bootstarp 简体版
原文   原文鏈接

以前在rails開發中使用了ckeditor做爲可視化編輯器，不過感受ckeditor過於龐大,有不少不須要的功能，並且圖片上傳功能很差控制不一樣用戶能夠互相刪除圖片，感受很很差。因而考慮更改可視化編輯器,多方考慮選擇了bootstrap3-wysiwyg,可是這個編輯器沒法實現圖片上傳功能，還有換行使用br而不是p標籤不是很好。因而考慮自定義完善其功能。javascript

 

我的原創，版權全部，轉載請註明原文出處，並保留原文連接:css

https://www.embbnux.com/2015/03/17/rails_use_bootstrap3-wysiwyg_with_carrierwave_picture_uploadhtml

一 bootstrap3-wysiwyg安裝

這裏使用bootstrap-wysihtml5-rails集成到rails中,安裝和配置具體見該github.前端

在gemfile添加: gem ‘bootstrap-wysihtml5-rails‘,bundle install安裝。
html5

在app/assets/stylesheets/application.css添加java

1
*= require bootstrap-wysihtml 5

在app/assets/javascripts/application.js裏添加git

1
2
//= require bootstrap-wysihtml5
//= require bootstrap-wysihtml5/locales/zh-CN

 

在要使用編輯器的地方添加」class=’wysihtml5′」,好比:github

1
= f.text_area :content , class : "wysihtml5"

 

而後在js文件裏面初始化編輯器:ajax

1
2
3
4
5
6
7
8
9
$( '.wysihtml5' ).each( function (i, elem) {
     $(elem).wysihtml5({
       toolbar: {
         "color" : true ,
         "size" : 'sm'
       },
       "locale" : 'zh-CN' ,
     });
   });

 

這樣應該就能夠了可是如今沒辦法實現圖片上傳,圖片只可以插入連接的方式，以下json

選區_032

上傳圖片功能仍是很重要的,幸好bootstrap3-wysiwyg提供了很好的擴展功能，能夠本身實現上傳功能.

二 使用carrierwave實現圖片上傳功能

首先要修改編輯器的圖片彈窗,js配置以下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
$(document).ready( function (){
   var csrf_token = $( 'meta[name=csrf-token]' ).attr( 'content' );
   var csrf_param = $( 'meta[name=csrf-param]' ).attr( 'content' );
   var customTemplates = {
     image : function (context) {
       var locale = context.locale;
       var options = context.options;
       return "<li>" +
         "<div class='bootstrap-wysihtml5-insert-image-modal modal fade' data-wysihtml5-dialog='insertImage'>" +
         "<div class='modal-dialog'>" +
         "<div class='modal-content'>" +
         "<div class='modal-header'>" +
         " <a class='close' data-dismiss='modal'>×</a>" +
         "<h3>" + locale.image.insert + "</h3>" +
         "</div>" +
         "<div class='modal-body'>" +
         "<div class='upload-picture'>" +
         "<form accept-charset='UTF-8' action='/images/upload' class='form-horizontal' id='wysiwyg_image_upload_form' method='post' enctype='multipart/form-data'>" +
         "<div style='display:none'>" +
         "<input name='utf8' value='✓' type='hidden'></input>" +
         "<input name='" + csrf_param + "' value='" +　csrf_token + "' type='hidden'></input>" +
         "</div>" +
         "<div class='form-group'>" +
         "<div class='col-xs-9 col-md-10'>" +
         "<input value='' accept='image/jpeg,image/gif,image/png' class='form-control' id='wysiwyg_image_picture' name='image[picture]' type='file' required='required'></input>" +
         "</div>" +
         "<div class='col-xs-3 col-md-2'>" +
         "<input class='btn btn-primary' id='wysiwyg_image_submit' name='commit' type='submit' value='上傳'></input>" +
         "</div>" +
         "</div>" +
         "</form>" +
         "</div>" +
         "<div class='form-group'>" +
         "<input value='http://' id='bootstrap-wysihtml5-picture-src' class='bootstrap-wysihtml5-insert-image-url form-control' data-wysihtml5-dialog-field='src'>" +
         "</div>" +
         "<div id='wysihtml5_upload_notice'>" +
         "</div>" +
         "</div>" +
         "<div class='modal-footer'>" +
         "<a href='#' class='btn btn-default' data-dismiss='modal'>" + locale.image.cancel + "</a>" +
         "<a class='btn btn-primary' data-dismiss='modal' data-wysihtml5-dialog-action='save' href='#'>" + locale.image.insert + "</a>" +
         "</div>" +
         "</div>" +
         "</div>" +
         "</div>" +
         "<a class='btn btn-sm btn-default' data-wysihtml5-command='insertImage' title='" + locale.image.insert + "' tabindex='-1'><span class='glyphicon glyphicon-picture'></span></a>" +
         "</li>" ;
     }
   };
   $( '.wysihtml5' ).each( function (i, elem) {
     $(elem).wysihtml5({
       toolbar: {
         "color" : true ,
         "size" : 'sm'
       },
       "locale" : 'zh-CN' ,
       customTemplates: customTemplates
     });
   });
 
})

這樣編輯器圖片彈窗就會變成下面這樣：

選區_033

這只是前端view,controller和model層都得再實現

MODEL: Image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#migration:
  def change
     create_table :images do |t|
       t.string   :picture
       t.string   :title , default: 'www.embbnux.com'
       t.references :user , index: true
       t.timestamps
     end
   end
#model
class Image < ActiveRecord::Base
   belongs_to :user
   mount_uploader :picture , PictureUploader
   validates :user_id , presence: true
   validates :title , length: { maximum: 250 }
end

這裏的圖片上傳使用carrierwave，具體使用請見該github readme

Controller:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#routes
post "/images/upload" => "images#upload"
 
#controller
class ImagesController < ApplicationController
   before_action :logged_in_user
   def upload
     @image = current_user.images.build(images_params)
     image_url = ""
     if @image .save
       image_url = "http://" << ENV [ "HOME_URL" ] << @image .picture.url
       status = "上傳成功!點擊插入圖片按鈕插入."
     else
       status = "上傳失敗!"
     end
     respond_to do |format|
       format.json { render :json =>{ :image_url => image_url, :status => status} }
     end
   end
   private
   def images_params
     params.require( :image ).permit( :picture )
   end
end

這裏的controller我使用ajax提交post代碼,這樣體驗比較好，上傳成功後把圖片的地址傳回客戶端,自動放在原來的插入圖片連接處:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$( '#wysiwyg_image_upload_form' ).on( 'submit' , function (event){
     event.stopPropagation();
     event.preventDefault();
     $( '#wysiwyg_image_submit' ).val( 'Uploading' );
     var wysiwyg_file = $( '#wysiwyg_image_picture' )[0].files[0];
     var wysiwyg_formData = new FormData();
     wysiwyg_formData.append( 'utf8' , "✓" );
     wysiwyg_formData.append(csrf_param, csrf_token);
     wysiwyg_formData.append( 'image[picture]' , wysiwyg_file,wysiwyg_file.name);
     $.ajax({
         url: '/images/upload' ,
         type: 'POST' ,
         data: wysiwyg_formData,
         dataType: 'json' ,
         processData: false ,
         contentType: false ,
         success: function (data, textStatus, jqXHR)
         {
           $( '#wysiwyg_image_submit' ).val( '上傳' );
           $( '#wysiwyg_image_picture' ).val( '' );
           $( '#bootstrap-wysihtml5-picture-src' ).val(data.image_url);
         },
         error: function (jqXHR, textStatus, errorThrown)
         {
         }
     });

這樣上傳功能基本就完成了,ajax關鍵要提供csrf-token參數,其餘都沒問題

最終效果能夠到我開發的網站看:   huaborn.com

三　替換br標籤爲p標籤

這個編輯器若是你鍵盤按回車鍵，他是自動加入br標籤，感受比較醜，段落之間仍是使用p比較好看

無心中發現要是原來文本編輯器裏存在<p></p>它換行就會自動添加p標籤而不是br標籤。

因此最終使用下面代碼實現:

1
2
3
4
5
6
7
8
9
10
11
12
$( '.wysihtml5' ).each( function (i, elem) {
     $(elem).wysihtml5({
       toolbar: {
         "color" : true ,
         "size" : 'sm'
       },
       "locale" : 'zh-CN' ,
       customTemplates: customTemplates
     });
     var input_text = $(elem).html();
     $(elem).html(input_text+ "<p>&nbsp</p>" );
   });
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程