HTML WYSIWYG that has GUI interface for adding <ruby> element

Question

I've just discovered the ruby annotation element (no relation to the Ruby programming language).

I'm looking for an online or desktop WYSIWYG so that I can more easily annotate some flash card text I'm putting into Anki (spaced repetition software).

I've looked online but did not found anything, especially since there is obvious confusion with Ruby, the programming language.

Anyone know of anything?

I made a command line script to do this form, but sometimes I'd prefer the editor, and my friends have to use an editor (not developers).

2rpy.rb: #!/usr/bin/env ruby # #Takes a line of chinese chars and converts to tags with pinyin in tags

    require 'pry'
    require 'awesome_print'
    require 'chinese_pinyin'

    def to_py(st)
      Pinyin.t(st, tonemarks: true)
    end

    STDIN.each_line do |line|
      line = line.force_encoding("UTF-8").chomp
      rts = line.split('').collect{|char| " #{char}<rt>#{to_py(char)}</rt>"}.join
      puts "<ruby>#{rts}</ruby>"
    end

So given a line like:

她的英語口語馬馬虎虎。

It will output:

<ruby> 她<rt>tā</rt> 的<rt>de</rt> 英<rt>yīng</rt> 語<rt>yǔ</rt> 口<rt>kǒu</rt> 語<rt>yǔ</rt> 馬<rt>mǎ</rt> 馬<rt>mǎ</rt> 虎<rt>hǔ</rt> 虎<rt>hǔ</rt> 。<rt></rt></ruby>