[LON-CAPA-cvs] cvs: loncom /html/adm/ckeditor loncapaconfig.js /html/adm/ckeditor/plugins/chem plugin.js /html/adm/ckeditor/plugins/chem/dialogs chem.js /html/adm/ckeditor/plugins/chem/icons chem.png /html/adm/ckeditor/plugins/chem/icons/hidpi chem.png /html/adm/ckeditor/plugins/chem/lang de.js en.js es.js fr.js ja.js pt-br.js pt.js ru.js zh-cn.js zh.js /html/adm/ckeditor/plugins/lcm plugin.js /interface lonhtmlcommon.pm doc/loncapafiles loncapafiles.lpml

damieng damieng at source.lon-capa.org
Wed Apr 1 12:14:47 EDT 2015


damieng		Wed Apr  1 16:14:47 2015 EDT

  Added files:                 
    /loncom/html/adm/ckeditor/plugins/chem	plugin.js 
    /loncom/html/adm/ckeditor/plugins/chem/dialogs	chem.js 
    /loncom/html/adm/ckeditor/plugins/chem/icons	chem.png 
    /loncom/html/adm/ckeditor/plugins/chem/icons/hidpi	chem.png 
    /loncom/html/adm/ckeditor/plugins/chem/lang	de.js en.js es.js fr.js 
                                               	ja.js pt-br.js pt.js 
                                               	ru.js zh-cn.js zh.js 

  Modified files:              
    /doc/loncapafiles	loncapafiles.lpml 
    /loncom/html/adm/ckeditor	loncapaconfig.js 
    /loncom/html/adm/ckeditor/plugins/lcm	plugin.js 
    /loncom/interface	lonhtmlcommon.pm 
  Log:
  update for ckeditor, with a new plugin for <chem>
  
-------------- next part --------------
Index: doc/loncapafiles/loncapafiles.lpml
diff -u doc/loncapafiles/loncapafiles.lpml:1.912 doc/loncapafiles/loncapafiles.lpml:1.913
--- doc/loncapafiles/loncapafiles.lpml:1.912	Tue Mar 31 13:45:36 2015
+++ doc/loncapafiles/loncapafiles.lpml	Wed Apr  1 16:14:28 2015
@@ -2,7 +2,7 @@
  "http://lpml.sourceforge.net/DTD/lpml.dtd">
 <!-- loncapafiles.lpml -->
 
-<!-- $Id: loncapafiles.lpml,v 1.912 2015/03/31 13:45:36 damieng Exp $ -->
+<!-- $Id: loncapafiles.lpml,v 1.913 2015/04/01 16:14:28 damieng Exp $ -->
 
 <!--
 
@@ -4834,6 +4834,20 @@
 loncom/html/adm/ckeditor/plugins/lcm/lang/vi.js;
 loncom/html/adm/ckeditor/plugins/lcm/lang/zh-cn.js;
 loncom/html/adm/ckeditor/plugins/lcm/lang/zh.js;
+loncom/html/adm/ckeditor/plugins/chem/plugin.js;
+loncom/html/adm/ckeditor/plugins/chem/dialogs/chem.js;
+loncom/html/adm/ckeditor/plugins/chem/icons/chem.png;
+loncom/html/adm/ckeditor/plugins/chem/icons/hidpi/chem.png;
+loncom/html/adm/ckeditor/plugins/chem/lang/de.js;
+loncom/html/adm/ckeditor/plugins/chem/lang/en.js;
+loncom/html/adm/ckeditor/plugins/chem/lang/es.js;
+loncom/html/adm/ckeditor/plugins/chem/lang/fr.js;
+loncom/html/adm/ckeditor/plugins/chem/lang/ja.js;
+loncom/html/adm/ckeditor/plugins/chem/lang/pt-br.js;
+loncom/html/adm/ckeditor/plugins/chem/lang/pt.js;
+loncom/html/adm/ckeditor/plugins/chem/lang/ru.js;
+loncom/html/adm/ckeditor/plugins/chem/lang/zh-cn.js;
+loncom/html/adm/ckeditor/plugins/chem/lang/zh.js;
   </dependencies>
 </file>
 
Index: loncom/html/adm/ckeditor/loncapaconfig.js
diff -u loncom/html/adm/ckeditor/loncapaconfig.js:1.3 loncom/html/adm/ckeditor/loncapaconfig.js:1.4
--- loncom/html/adm/ckeditor/loncapaconfig.js:1.3	Tue Mar 31 13:45:39 2015
+++ loncom/html/adm/ckeditor/loncapaconfig.js	Wed Apr  1 16:14:31 2015
@@ -47,7 +47,9 @@
     
     
     config.allowedContent = true;
-    config.extraPlugins = 'lcm';
+    config.extraPlugins = 'lcm,chem';
+    
+    config.mathJaxLib = '/adm/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML';
     
     config.specialChars = [
         /* upercase greek */
Index: loncom/html/adm/ckeditor/plugins/lcm/plugin.js
diff -u loncom/html/adm/ckeditor/plugins/lcm/plugin.js:1.1 loncom/html/adm/ckeditor/plugins/lcm/plugin.js:1.2
--- loncom/html/adm/ckeditor/plugins/lcm/plugin.js:1.1	Tue Mar 31 13:45:41 2015
+++ loncom/html/adm/ckeditor/plugins/lcm/plugin.js	Wed Apr  1 16:14:44 2015
@@ -397,7 +397,9 @@
                         // leave \[ \] as is
                     } else {
                         // add \( \)
-                        value = '\\(' + value + '\\)';
+                        // value = '\\(' + value + '\\)';
+                        // actually, we do not want to display things too well in this case
+                        // (if this is math, it would not work well with other math renderings like tth)
                     }
                     newValue = CKEDITOR.tools.htmlEncode( value );
 
Index: loncom/interface/lonhtmlcommon.pm
diff -u loncom/interface/lonhtmlcommon.pm:1.359 loncom/interface/lonhtmlcommon.pm:1.360
--- loncom/interface/lonhtmlcommon.pm:1.359	Tue Mar 31 13:46:01 2015
+++ loncom/interface/lonhtmlcommon.pm	Wed Apr  1 16:14:46 2015
@@ -1,7 +1,7 @@
 # The LearningOnline Network with CAPA
 # a pile of common html routines
 #
-# $Id: lonhtmlcommon.pm,v 1.359 2015/03/31 13:46:01 damieng Exp $
+# $Id: lonhtmlcommon.pm,v 1.360 2015/04/01 16:14:46 damieng Exp $
 #
 # Copyright Michigan State University Board of Trustees
 #
@@ -1308,6 +1308,7 @@
     function startRichEditor(id) {
         // fix character entities inside <m>
         // NOTE: this is not fixing characters inside <parse>
+        // NOTE: < and > inside <chem> should fix automatically because there should not be a letter after <.
         var ta = document.getElementById(id);
         var value = ta.value;
         var in_m = false; // in the m element
@@ -1351,36 +1352,41 @@
     
     function destroyRichEditor(id) {
     	CKEDITOR.instances[id].destroy();
-        // replace character entities < and > in <m>
+        // replace character entities < and > in <m> and <chem>
         // and "&fctname(" by "&fctname("
         // and the quotes inside functions: "&fct(1, "a")" -> "&fct(1, "a")"
         var ta = document.getElementById(id);
         var value = ta.value;
-        var in_m = false; // in the m element
-        var in_text = false; // in the text inside the m element
-        var im = -1; // position of <m>
+        var in_element = false; // in the m or chem element
+        var tagname = ""; // m or chem
+        var in_text = false; // in the text inside the element
+        var im = -1; // position of start tag
         var it = -1; // position of the text inside
         for (var i=0; i<value.length; i++) {
-            if (value.substr(i, 2) == "<m") {
-                // ignore previous <m> if found twice
-                in_m = true;
+            if (value.substr(i, 2) == "<m" || value.substr(i, 5) == "<chem") {
+                // ignore previous tags if found twice
+                in_element = true;
+                if (value.substr(i, 2) == "<m")
+                    tagname = "m";
+                else
+                    tagname = "chem";
                 in_text = false;
                 im = i;
                 it = -1;
-            } else if (in_m) {
+            } else if (in_element) {
                 if (!in_text) {
                     if (value.charAt(i) == ">") {
                         in_text = true;
                         it = i+1;
                     }
-                } else if (value.substr(i, 4) == "</m>") {
-                    in_m = false;
+                } else if (value.substr(i, 3+tagname.length) == "</"+tagname+">") {
+                    in_element = false;
                     var text = value.substr(it, i-it);
                     var l1 = text.length;
                     text = text.replace(/</g, "<");
                     text = text.replace(/>/g, ">");
                     var l2 = text.length;
-                    value = value.substr(0, it) + text + "</m>" + value.substr(i+4);
+                    value = value.substr(0, it) + text + value.substr(i);
                     i = i + (l2-l1);
                 }
             }

Index: loncom/html/adm/ckeditor/plugins/chem/plugin.js
+++ loncom/html/adm/ckeditor/plugins/chem/plugin.js
/**
 * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

/**
 * @fileOverview [Chemistry] LON-CAPA ckeditor plugin for the <chem> element.
 */

'use strict';

CKEDITOR.plugins.add( 'chem', {
    lang: 'de,en,es,fr,ja,pt,pt-br,ru,zh,zh-cn',
    requires: 'widget',
    icons: 'chem',
    hidpi: true,

    init: function( editor ) {
        editor.widgets.add( 'chem', {

            dialog: 'chem',
            
            button: editor.lang.chem.button,

            template:
                '<span class="chem"></span>',

            data: function() {
                var span = this.element;
                if (this.data.reaction)
                    CKEDITOR.plugins.chem.add_html(this.data.reaction, span);
                else
                    span.setHtml('?');
            },

            upcast: function( el, data ) {
                if ( !( el.name == 'chem' ) )
                    return;

                if ( el.children.length > 1 || el.children[ 0 ].type != CKEDITOR.NODE_TEXT )
                    return;

                data.reaction = CKEDITOR.tools.htmlDecode( el.children[ 0 ].value );
                
                var span = new CKEDITOR.htmlParser.element('span');
                span.addClass('chem');
                
                CKEDITOR.plugins.chem.add_html(data.reaction, span);
                
                // Add attribute to prevent deleting empty span in data processing.
                var attrs = span.attributes;
                attrs[ 'data-cke-survive' ] = 1;
                if (el.attributes.eval)
                    attrs['data-eval'] = el.attributes.eval;
                el.replaceWith(span);
                return span;
            },

            downcast: function( el ) {
                var chem = new CKEDITOR.htmlParser.element('chem');
                if (el.attributes['data-eval'])
                    chem.attributes.eval = el.attributes['data-eval'];
                chem.add(new CKEDITOR.htmlParser.text(CKEDITOR.tools.htmlEncode(this.data.reaction)));
                return chem;
            }
            
        } );
        // Add dialog.
        CKEDITOR.dialog.add( 'chem', this.path + 'dialogs/chem.js' );
    }
} );


/**
 * @private
 * @singleton
 * @class CKEDITOR.plugins.chem
 */
CKEDITOR.plugins.chem = {};

/**
 * Adds HTML to the span for the given reaction, using UNICODE characters for arrows.
 *
 * @private
 * @param {string} reaction
 * @param {CKEDITOR.dom.element} span - element the HTML will be constructed inside
 */
CKEDITOR.plugins.chem.add_html = function( reaction, span ) {
    // this is doing the same thing as chemparse, except it uses UNICODE characters instead of LaTeX
    var tokens = reaction.split(/(\s\+|\->|<=>|<\-|\.)/);
    var formula = '';
    for (var i=0; i<tokens.length; i++) {
        var token = tokens[i];
        if (token == '->' ) {
            formula += '→ ';
            continue;
        }
        if (token == '<-' ) {
            formula += '← ';
            continue;
        }  
        if (token == '<=>') {
            formula += '⇌ ';
            continue;
        }
        if (token == '.') {
          formula = formula.replace(/ | /, '');
          formula += '·';
          continue;
        }
        var found = token.match(/^\s*([\d|\/]*(?:&frac\d\d)?)(.*)/);
        if (found != null && found.length > 1 && found[1] != '1')
            formula += found[1]; // stoichiometric coefficient
        
        var molecule;
        if (found != null && found.length > 2)
            molecule = found[2];
        else
            molecule = '';
        // subscripts
        // $molecule =~ s|(?<=[a-zA-Z\)\]\s])(\d+)|<sub>$1</sub>|g;
        // Javascript does not support look-behind like Perl
        molecule = molecule.replace(/([a-zA-Z\)\]\s])(\d+)/g, '$1<sub>$2</sub>');
        // superscripts
        molecule = molecule.replace(/\^(\d*[+\-]*)/g, '<sup>$1</sup>');
        // strip whitespace
        molecule = molecule.replace(/\s*/g, '');
        // forced space
        molecule = molecule.replace(/_/g, ' ');
        molecule = molecule.replace(/-/g, '−');
        formula += molecule + ' ';
    }
    // get rid of trailing space
    formula = formula.replace(/( | )$/, '');
    // we need to add CSS here, because ckeditor changes CSS for sup and sub, and ckeditor css for plugins is not used inside dialogs
    // (whether we define it with CKEDITOR.editor.addContentsCss or CKEDITOR.addCss)
    formula = formula.replace(/<sub>/g,'<sub style="vertical-align:sub; font-size:smaller">');
    formula = formula.replace(/<sup>/g,'<sup style="vertical-align:super; font-size:smaller">');
    span.setHtml(formula);
}

Index: loncom/html/adm/ckeditor/plugins/chem/dialogs/chem.js
+++ loncom/html/adm/ckeditor/plugins/chem/dialogs/chem.js
/**
 * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

'use strict';

CKEDITOR.dialog.add( 'chem', function( editor ) {
    return {
        title: editor.lang.chem.title,
        minWidth: 300,
        minHeight: 150,
        contents: [
            {
                id: 'info',
                elements: [
                    {
                        id: 'ta',
                        type: 'textarea',
                        label: editor.lang.chem.dialogInput,

                        onLoad: function() {
                            var that = this;

                            if ( !( CKEDITOR.env.ie && CKEDITOR.env.version == 8 ) ) {
                                this.getInputElement().on( 'keyup', function() {
                                    var dlg = that.getDialog();
                                    var preview = dlg.getContentElement('info', 'preview');
                                    var div = preview.getElement();
                                    var span = div.getChild( 0 );
                                    var value = that.getInputElement().getValue();
                                    if (value)
                                        CKEDITOR.plugins.chem.add_html(value, span);
                                    else
                                        span.setHtml('?');
                                } );
                            }
                        },

                        setup: function( widget ) {
                            this.setValue( widget.data.reaction );
                        },

                        commit: function( widget ) {
                            widget.setData( 'reaction', this.getValue() );
                        }
                    },
                    {
                        id: 'preview',
                        type: 'html',
                        html:
                            '<div style="width:100%;text-align:center;">' +
                                '<span class="chem"></span>' +
                            '</div>',

                        onLoad: function() {
                        },

                        setup: function( widget ) {
                            var span = CKEDITOR.document.getById( this.domId ).getChild( 0 );
                            if (widget.data.reaction)
                                CKEDITOR.plugins.chem.add_html( widget.data.reaction, span);
                            else
                                span.setHtml('?');
                        }
                    }
                ]
            }
        ]
    };
} );

Index: loncom/html/adm/ckeditor/plugins/chem/lang/de.js
+++ loncom/html/adm/ckeditor/plugins/chem/lang/de.js
/*
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.plugins.setLang( 'chem', 'de', {
	title: 'chem',
	button: 'Chemie',
	dialogInput: 'Schreiben Sie hier'
} );

Index: loncom/html/adm/ckeditor/plugins/chem/lang/en.js
+++ loncom/html/adm/ckeditor/plugins/chem/lang/en.js
/*
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.plugins.setLang( 'chem', 'en', {
	title: 'chem',
	button: 'Chemistry',
	dialogInput: 'Write here'
} );

Index: loncom/html/adm/ckeditor/plugins/chem/lang/es.js
+++ loncom/html/adm/ckeditor/plugins/chem/lang/es.js
/*
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.plugins.setLang( 'chem', 'es', {
	title: 'chem',
	button: 'Química',
	dialogInput: 'Escribe aquí'
} );

Index: loncom/html/adm/ckeditor/plugins/chem/lang/fr.js
+++ loncom/html/adm/ckeditor/plugins/chem/lang/fr.js
/*
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.plugins.setLang( 'chem', 'fr', {
	title: 'chem',
	button: 'Chimie',
	dialogInput: 'Saisir la formule ici'
} );

Index: loncom/html/adm/ckeditor/plugins/chem/lang/ja.js
+++ loncom/html/adm/ckeditor/plugins/chem/lang/ja.js
/*
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.plugins.setLang( 'chem', 'ja', {
	title: 'chem',
	button: '化学',
	dialogInput: 'の数式を入力してください'
} );

Index: loncom/html/adm/ckeditor/plugins/chem/lang/pt-br.js
+++ loncom/html/adm/ckeditor/plugins/chem/lang/pt-br.js
/*
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.plugins.setLang( 'chem', 'pt-br', {
	title: 'chem',
	button: 'Química',
	dialogInput: 'Escreva aqui'
} );

Index: loncom/html/adm/ckeditor/plugins/chem/lang/pt.js
+++ loncom/html/adm/ckeditor/plugins/chem/lang/pt.js
/*
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.plugins.setLang( 'chem', 'pt', {
	title: 'chem',
	button: 'Química',
	dialogInput: 'Escreva aqui'
} );

Index: loncom/html/adm/ckeditor/plugins/chem/lang/ru.js
+++ loncom/html/adm/ckeditor/plugins/chem/lang/ru.js
/*
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.plugins.setLang( 'chem', 'ru', {
	title: 'chem',
	button: 'химия',
	dialogInput: 'Введите здесь'
} );

Index: loncom/html/adm/ckeditor/plugins/chem/lang/zh-cn.js
+++ loncom/html/adm/ckeditor/plugins/chem/lang/zh-cn.js
/*
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.plugins.setLang( 'chem', 'zh-cn', {
	title: 'chem',
	button: '化学',
	dialogInput: '在此编写您的 指令'
} );

Index: loncom/html/adm/ckeditor/plugins/chem/lang/zh.js
+++ loncom/html/adm/ckeditor/plugins/chem/lang/zh.js
/*
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.plugins.setLang( 'chem', 'zh', {
	title: 'chem',
	button: '化學',
	dialogInput: '請輸入'
} );


More information about the LON-CAPA-cvs mailing list