雖然打成Gem的富文本編輯不少，但我喜歡的一個(gè)木有末盔。
勉強(qiáng)用的話(huà)筑舅，我會(huì)選ckeditor，但是它「太大陨舱，麻煩翠拣，顏值低」。
我喜歡的是這樣的編輯器是長(zhǎng)這樣的：
rubygems中有個(gè)老版本游盲，一年多沒(méi)有跟新了误墓，給作者發(fā)郵件蛮粮，提issue都沒(méi)有回復(fù)。不排除加班那啥的可能谜慌。
所以然想，每次使用，我都得
- 下載js
- require
- 寫(xiě)html和js
心累欣范。
一直想寫(xiě)自己寫(xiě)一個(gè)Gem变泄，把上面的123全都躲開(kāi)。
但是技能樹(shù)一直沒(méi)有點(diǎn)到恼琼，找到的教程又多是簡(jiǎn)單介紹一下妨蛹，完全不肯深入，給我?guī)?lái)了好幾次從入門(mén)到放棄的體驗(yàn)晴竞。
今天蛙卤，放棄的所謂的「未知解釋未知」，直接選擇了有逼格的（不要臉的）模仿（抄襲）噩死，像吃?shī)W利奧一樣「抄一抄表窘，改一改，點(diǎn)一點(diǎn)」甜滨，終于終于弄出了wangeditor_rails。
得到的結(jié)論就是瘤袖，我不愧是一個(gè)山寨大國(guó)里面的人衣摩。沒(méi)有好的教材，沒(méi)有找到老師捂敌，抄襲絕逼是學(xué)習(xí)的好方法昌执。書(shū)抄百遍啄清，其義自見(jiàn)。
下面記錄一下，寫(xiě)Gem的步驟肄渗，一來(lái)備忘，二來(lái)看看是不是有誰(shuí)會(huì)搜到榛斯。
創(chuàng)建Gem的框架
我沒(méi)有是用bundle绊汹，而是使用的rails生成Gem的框架
rails plugin new Gem的名字
使用rails生成有一個(gè)好處，它會(huì)自動(dòng)在test目錄生成一個(gè)dummy的rails項(xiàng)目并在這個(gè)項(xiàng)目中引用你寫(xiě)得Gem奖慌。
下載wangEditor.js
直接
yarn init
yarn install wangeditor
填寫(xiě).gemspec文件
這個(gè)文件是Gem的說(shuō)明呀抛虫，git repo呀，什么的简僧，設(shè)置一下就OK
創(chuàng)建生成器
生成器就是平時(shí)我們敲rails g XXX的那個(gè)東西
使用devise建椰，simple_form的使用，我們都使用過(guò)岛马。
創(chuàng)建的這個(gè)生成器的目的就是當(dāng)敲入rails g wangeditor_rails:install的時(shí)候棉姐，將wangEditor.js拷貝到app/assets/javascripts中
# lib/generators/wangeditor/install/install_generator.rb
module Wangeditor
class InstallGenerator < Rails::Generators::Base
┆ JAVASCRIPTS_FILE = "app/assets/javascripts/wangEditor.js"
┆ source_root File.expand_path("../../../../../", __FILE__)
┆ def copy_javascripts
copy_file 'node_modules/wangeditor/release/wangEditor.js', JAVASCRIPTS_FILE
┆ end
end
end
創(chuàng)建表單Helper
這樣在代碼是為了在view中使用<%= f.wangeditor :content %>
# lib/wangeditor_rails/helper.rb
module WangeditorRails
module Helper
def wangeditor(name, method, options = {})
content = options[:object][method]
id = options[:id] || "#{name}_#{method}"
name = "#{name}[#{method}]"
#puts options
output_buffer = ActiveSupport::SafeBuffer.new
output_buffer << hidden_area(id, content, name)
output_buffer << display_area(id, content)
output_buffer << javascript_tag(create_scripts(id))
end
def hidden_area(id, content, name)
content_tag :div, text_area_tag(id, content, name: name), style: 'display: none;'
end
def display_area(id, content)
unless content.nil?
content = sanitize content
end
content_tag(:div, content, id: "#{id}_editor")
end
def create_scripts(id)
"var E = window.wangEditor
var editor = new E('##{id}_editor')
editor.customConfig.onchange = function (content) {
document.getElementById('#{id}').value = content
}
editor.create()"
end
end
module Builder
def wangeditor(method, options = {})
@template.send("wangeditor", @object_name, method, objectify_options(options))
end
end
end
綁定SimpleForm調(diào)用
這樣在代碼是為了在view中使用<%= f.input :content, as: :wangeditor %>
# lib/wangeditor_rails/simple_form.rb
module WangeditorRails
module SimpleForm
class WangeditorInput < ::SimpleForm::Inputs::Base
def input(wrapper_options)
@builder.wangeditor(attribute_name, input_html_options)
end
end
end
end
::SimpleForm::FormBuilder.map_type :wangeditor, :to => WangeditorRails::SimpleForm::WangeditorInput
在rails引用
上面寫(xiě)得表單方法不能直接使用屠列，需要往rails里「注冊(cè)」一下
# lib/wangeditor_rails/engine.rb
require "wangeditor_rails"
require "rails"
module WangeditorRails
class Engine < Rails::Engine
initializer "wangeditor_rails.helper_and_builder" do
ActiveSupport.on_load :action_view do
ActionView::Base.send(:include, WangeditorRails::Helper)
ActionView::Helpers::FormBuilder.send(:include, WangeditorRails::Builder)
end
end
initializer "wangeditor_rails.simple_form" do
require "wangeditor_rails/simple_form" if Object.const_defined?("SimpleForm")
end
end
end
在Gem核心文件中引用
# lib/wangeditor_rails.rb
require 'wangeditor_rails/engine'
require 'wangeditor_rails/helper'
module WangeditorRails
end
