rails使用bootstrap3-wysiwyg可视化编辑器并实现自定义图片上传插入功能

之前在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

#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>");

  });
时间： 2024-10-07 03:03:51

rails使用bootstrap3-wysiwyg可视化编辑器并实现自定义图片上传插入功能的相关文章

vue项目富文本编辑器vue-quill-editor之自定义图片上传

使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改配置. 创建一个quill-config.js的文件,里面写自定义图片上传.代码如下 /*富文本编辑图片上传配置*/ const uploadConfig = { action: '', // 必填参数 图片上传地址 methods: 'POST', // 必填参数 图片上传方式 token: ''

使用百度UMeditor富文本编辑器，修改自定义图片上传，修改源码

富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百度开发的插件,lite版是UM EasyUI编辑器:用easyUI的都懂,基本上肯定用到 其他的富文本编辑器就不说了,前两个小编我用的比较多 本来我是比较倾向于CKEditor,但是这个插件不支持图片上传,图片功能只能链接过去,而不能在控件本身中上传,所以就选择了UMeditor 为啥选择UM,不选

在线HTML文档编辑器使用入门之图片上传与图片管理的实现

1 在线HTML文档编辑器使用入门之图片上传与图片管理的实现: 2 官方网址: http://kindeditor.net/demo.php 3 开发步骤: 4 1.开发中只需要导入选中的文件(通常在 webapp 下,建立 editor 文件夹 ) 5 导入:lang.plugins.themes.kindeditor.js/kindeditor-min.js-->放在editor文件夹下 6 2.在页面上引入相关的js&css文件 7 <!-- 导入Kindeditor相关文件 -

百度开源富文本编辑器 UEditor配置：图片上传和文件上传独立使用方法

使用UEditor编辑器自带的插件实现图片上传和文件上传功能,这里通过配置UEditor单独使用其内置的第三方插件swfupload来实现图片和文件的上传,通过对UEditor配置轻松实现图片批量上传,文件披批量上传 第一步:先配置UEditor <script src="ueditor/ueditor.config.js"></script> <script src="ueditor/ueditor.all.min.js">&l

百度编辑器前端二开图片上传Js

百度编辑器图片上传Jsueditor.all.min.js 下载链接 链接:https://pan.baidu.com/s/1VNgw9ELgRRHKeCQheFkQTw 提取码:fnfi 使用方法: 替换原来的 ueditor.all.min.js  原文地址:https://www.cnblogs.com/q1104460935/p/10278629.html

PHP ckeditor富文本编辑器 结合ckfinder实现图片上传功能

一:前端页面代码 <script src="/www/res/ckeditor/ckeditor.js"></script> <textarea id="articlecontent" ><?php echo $request['content']; ?></textarea> <script type="text/javascript"> $('#articleconten

ueditor 百度编辑器 自定义图片上传路径和格式化上传文件名

今天项目中需要自定义图片上传的保存路径,并且不需要按照日期自动创建存储文件夹和文件名,我的ueditor版本是1.3.6.下面记录一下我配置成功的方法,如果有什么不对的地方欢迎指出,共同学习: 1:我在本地项目的根目录下新建一个文件夹,比如:upload. 2:打开ueditor/php/config.php,改成如下代码后保存: <?php return array( //图片上传允许的存储目录 /*'imageSavePath' => array ( 'upload1', 'upload2

Simditor 富文本编辑器多选图片上传、视频连接插入

simditor 是一个基于浏览器的所见即所得的文本编辑器.Simditor 富文本编辑器, 支持多选图片上传, 视频连接插入, HTML代码编辑以及常用富文本按钮,支持的浏览器:IE10.Firefox.Safari. 点击这里下载zip文件.你也可以安装 Simditor bower 和 npm: $ npm install simditor $ bower install simditor 在 项目中使用 simditor 导入 simditor 样式文件和 js 文件 <link rel

Drupal 7 配置ckeditor和ckfinder编辑器实现图片上传--不用wysisyg

注意: 1.这里的ckeditor编辑器是独立模块,不是那个wysiwyg模块. 2.这里的图片上传仅仅为文章内图片,非字段图片. 1.下载文件(1) http://drupal.org/project/ckeditor drupal的ckeditor模块(2) http://ckeditor.com/download CKeditor源码(3) http://ckfinder.com/download CKfinder(注意,不是免费的) 将ckedit文件夹放置在/sites/all/mod