之前在rails开发中使用了ckeditor作为可视化编辑器，不过感觉ckeditor过于庞大,有很多不需要的功能，而且图片上传功能不好控制不同用户可以互相删除图片，感觉很不好。于是考虑更改可视化编辑器,多方考虑选择了bootstrap3-wysiwyg,但是这个编辑器无法实现图片上传功能，还有换行使用br而不是p标签不是很好。于是考虑自定义完善其功能。
个人原创，版权所有，转载请注明原文出处，并保留原文链接:
https://www.embbnux.com/2015/03/17/rails_use_bootstrap3-wysiwyg_with_carrierwave_picture_upload
一 bootstrap3-wysiwyg安装
这里使用bootstrap-wysihtml5-rails集成到rails中,安装和配置具体见该github.
在gemfile添加: gem ‘bootstrap-wysihtml5-rails‘,bundle install安装。
在app/assets/stylesheets/application.css添加
|
1
|
*= require bootstrap-wysihtml5 |
在app/assets/javascripts/application.js里添加
|
1
2
|
//= require bootstrap-wysihtml5//= require bootstrap-wysihtml5/locales/zh-CN |
在要使用编辑器的地方添加”class=’wysihtml5′”,比如:
|
1
|
= f.text_area :content,class: "wysihtml5" |
然后在js文件里面初始化编辑器:
|
1
2
3
4
5
6
7
8
9
|
$('.wysihtml5').each(function(i, elem) { $(elem).wysihtml5({ toolbar: { "color": true, "size": 'sm' }, "locale" : 'zh-CN', }); }); |
这样应该就可以了但是现在没办法实现图片上传,图片只能够插入链接的方式，如下
上传图片功能还是很重要的,幸亏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 }); });}) |
这样编辑器图片弹窗就会变成下面这样：
这只是前端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#modelclass 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
|
#routespost "/images/upload" => "images#upload"#controllerclass 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) endend |
这里的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> </p>"); }); |