ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add the directionality plugin for tinymce 

closes CNVS-19413

folks have been requesting RTL support.  This uses
tinymce's core plugin to provide it.  Unfortunately that adds
another two buttons to the toolbar.  :(

wraps the directionality plugin in an AMD wrapper, and adds it
to our default configuration

Also prevents canvas from stripping out the "dir" element
when HTML scrubbing

TEST PLAN:
 - go to any RCE
 - see the two new buttons for RTL and LTR
 - use them to change back and forth, make sure it doesn't break
 - ensure that our custom plugins don't interact badly with it. (I've
   done a cursory code read and some clicking around, but that would
   be my biggest concern)

Change-Id: I0884b65a99ec0e1db8c6abd82711a35799a062dd
Reviewed-on: https://gerrit.instructure.com/50672
QA-Review: August Thornton <august@instructure.com>
Tested-by: Jenkins
Reviewed-by: Rob Orton <rob@instructure.com>
Product-Review: Ethan Vizitei <evizitei@instructure.com>
This commit is contained in:
Ethan Vizitei 2015-03-19 15:50:46 -06:00
parent 654fb95119
commit 3f706051c4
6 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/coffeescripts/editor/stocktiny.coffee
View File

@ -9,6 +9,7 @@ define [
'bower/tinymce/plugins/table/plugin'
'bower/tinymce/plugins/textcolor/plugin'
'bower/tinymce/plugins/link/plugin'
'bower/tinymce/plugins/directionality/plugin'
], (markScriptsLoaded, punch) ->
# prevent tiny from loading any CSS assets
@ -23,6 +24,7 @@ define [
"plugins/table/plugin"
"plugins/textcolor/plugin"
"plugins/link/plugin"
'plugins/directionality/plugin'
]
tinymce

3
gems/canvas_sanitize/lib/canvas_sanitize/canvas_sanitize.rb
View File

@ -87,6 +87,7 @@ module CanvasSanitize #:nodoc:
'title',
'role',
'lang',
'dir',
'aria-labelledby',
'aria-atomic',
'aria-busy',
@ -134,7 +135,7 @@ module CanvasSanitize #:nodoc:
'iframe' => ['src', 'width', 'height', 'name', 'align', 'frameborder', 'scrolling', 'sandbox', 'allowfullscreen','webkitallowfullscreen','mozallowfullscreen'],
'ol' => ['start', 'type'],
'q' => ['cite'],
'table' => ['summary', 'width', 'border', 'cellpadding', 'cellspacing', 'center', 'frame', 'rules', 'dir'],
'table' => ['summary', 'width', 'border', 'cellpadding', 'cellspacing', 'center', 'frame', 'rules'],
'tr' => ['align', 'valign', 'dir'],
'td' => ['abbr', 'axis', 'colspan', 'rowspan', 'width', 'align', 'valign', 'dir'],
'th' => ['abbr', 'axis', 'colspan', 'rowspan', 'width', 'align', 'valign', 'dir', 'scope'],

5
gems/canvas_sanitize/spec/canvas_sanitize/canvas_sanitize_spec.rb
View File

@ -23,4 +23,9 @@ describe CanvasSanitize do
cleaned = Sanitize.clean("<p lang='es'>Hola</p>", CanvasSanitize::SANITIZE)
expect(cleaned).to eq("<p lang=\"es\">Hola</p>")
end
it "doesnt strip dir attributes by default" do
cleaned = Sanitize.clean("<p dir='rtl'>RightToLeft</p>", CanvasSanitize::SANITIZE)
expect(cleaned).to eq("<p dir=\"rtl\">RightToLeft</p>")
end
end

3
public/javascripts/bower/tinymce/plugins/directionality/plugin.js
View File

@ -9,7 +9,7 @@
*/
/*global tinymce:true */
define(['bower/tinymce/tinymce'], function(tinymce){
tinymce.PluginManager.add('directionality', function(editor) {
function setDir(dir) {
var dom = editor.dom, curDir, blocks = editor.selection.getSelectedBlocks();
@ -62,3 +62,4 @@ tinymce.PluginManager.add('directionality', function(editor) {
stateSelector: generateSelector('rtl')
});
});
});

4
public/javascripts/tinymce.config.js
View File

@ -49,7 +49,7 @@ define([], function(){
theme : "modern",
skin : "light",
skin_url : "/vendor/tinymce_themes/light",
plugins: "autolink,media,paste,table,textcolor,link",
plugins: "autolink,media,paste,table,textcolor,link,directionality",
external_plugins: {
"instructure_image": "/javascripts/tinymce_plugins/instructure_image/plugin.js",
"instructure_links": "/javascripts/tinymce_plugins/instructure_links/plugin.js",
@ -120,7 +120,7 @@ define([], function(){
*/
EditorConfig.prototype.formatBtnGroup = 'bold,italic,underline,forecolor,backcolor,removeformat,alignleft,aligncenter,alignright';
EditorConfig.prototype.positionBtnGroup = 'outdent,indent,superscript,subscript,bullist,numlist';
EditorConfig.prototype.fontBtnGroup = 'fontsizeselect,formatselect';
EditorConfig.prototype.fontBtnGroup = 'ltr,rtl,fontsizeselect,formatselect';
/**

11
spec/coffeescripts/TinymceConfigSpec.coffee
View File

@ -4,6 +4,9 @@ define ['tinymce.config'], (EditorConfig)->
largeScreenWidth = 1300
dom_id = "some_textarea"
tinymce = { baseURL: "/base/url" }
toolbar1 = "bold,italic,underline,forecolor,backcolor,removeformat,alignleft,aligncenter,alignright"
toolbar2 = "outdent,indent,superscript,subscript,bullist,numlist,table,instructure_links,unlink,instructure_image,instructure_equation"
toolbar3 = "ltr,rtl,fontsizeselect,formatselect"
module "EditorConfig",
@ -19,14 +22,14 @@ define ['tinymce.config'], (EditorConfig)->
width = 100
config = new EditorConfig(tinymce, INST, width, dom_id)
toolbar = config.toolbar()
ok(toolbar[0] is "bold,italic,underline,forecolor,backcolor,removeformat,alignleft,aligncenter,alignright")
ok(toolbar[1] is "outdent,indent,superscript,subscript,bullist,numlist,table,instructure_links,unlink,instructure_image,instructure_equation")
ok(toolbar[2] is "fontsizeselect,formatselect")
ok(toolbar[0] is toolbar1)
ok(toolbar[1] is toolbar2)
ok(toolbar[2] is toolbar3)
test 'buttons go on the first row for large windowing', ->
config = new EditorConfig(tinymce, INST, largeScreenWidth, dom_id)
toolbar = config.toolbar()
equal(toolbar[0], "bold,italic,underline,forecolor,backcolor,removeformat,alignleft,aligncenter,alignright,outdent,indent,superscript,subscript,bullist,numlist,table,instructure_links,unlink,instructure_image,instructure_equation,fontsizeselect,formatselect")
equal(toolbar[0], "#{toolbar1},#{toolbar2},#{toolbar3}")
ok(toolbar[1] is "")
ok(toolbar[2] is "")