10.05.2011, 16:19
#37253148
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
|
|
|
Всем привет!
Делаю редактор математических выражений на MathML (исходники прилагаются кстати небольшие)
До сих пор не могу решить такую проблему, когда в поле <p id='editarea'> (el) изменяеться ч/з javascript c помощью такой функции this.el.innerHTML = this.el.innerHTML.replace(new RegExp(isIt,""),onIt).replace(/mml:/g,""); то как заставить браузер заново построить формулу, т.е. так как он строит формулы при загрузке страницы
Советовали уже и XSLTproccessor использовать - но у меня не получилось промучился где-то неделю :(
и ajaxslt от google тож не работает..
Единственный вариант который заработал это ч/з перезагрузку страницы с сервера, но это не дело мучать сервер каждый раз когда вводишь символ/формулу
Гляньте, пожалуйста, сильно прошу. (у меня это работает на Опере, на других может пока не работать правильно ну вроде бы отлаживал и для Мозиллы)
исходники скачать в архиве
index.html
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MathML WebEditor Beta</title>
</head>
<body>
<!-- Подключаем Web-редактор математических выражений на MathML -->
<iframe name=mmlEditor src=mmlEditor.xml width= 90 % height= 90 % frameborder= 0 scrolling=no/>
</body>
</html>
mmlEditor.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. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90. 91. 92. 93. 94. 95. 96. 97. 98. 99. 100. 101. 102. 103. 104. 105. 106. 107. 108. 109. 110. 111. 112. 113. 114. 115. 116. 117. 118. 119. 120. 121. 122. 123. 124. 125. 126. 127. 128. 129. 130. 131. 132. 133. 134. 135. 136. 137. 138. 139. 140. 141. 142. 143. 144. 145. 146. 147.
/* скрипт обработки команд */
function mmlEditor()
{
this.cursor = "│"; // виртуальный курсор
this.subform = "░"; // подвыражение
this.math = "math";
// указатель на область редактирования,просмотра MathML кода
this.el = document.getElementById("editarea");
this.vl = document.getElementById("viewcode");
// Замена isIt на onIt
this.change = function(isIt, onIt)
{
this.el.innerHTML = this.el.innerHTML.replace(new RegExp(isIt,""),onIt).replace(/mml:/g,"");
}
// Проверка существования
this.exist = function(what)
{
return this.el.innerHTML.indexOf(what)!=- 1 ? 1 : 0 ;
}
// Установка курсора
this.setCursor = function()
{
if(this.exist(this.subform)) this.change(this.subform, this.cursor);
else if(this.exist("/"+this.math)) this.change("</"+this.math+">", this.cursor + "</"+this.math+">");
else this.change("/>",">" + this.cursor + "</"+this.math+">");
}
// Предпросмотр MathML кода
this.review = function()
{
this.vl.innerHTML = this.el.innerHTML.replace(/</g,"<").replace(/│/g,"").replace(/mml:/g,""); //!
}
// Вставляем форму
this.putForm = function(form)
{
this.change(this.cursor,form);
this.setCursor();
this.review();
}
// просмотр выделенного текста Ctrl+Enter
this.getSelText = function()
{
var txt = '';
if (window.getSelection) txt = window.getSelection();
else if (document.getSelection) txt = document.getSelection();
else if (document.selection) txt = document.selection.createRange().text;
return txt;
}
// Обработка нажатия клавиши
this.keyIsDown = function(event)
{
var e = arguments[ 0 ]||window.event;
var code=e.keyCode?e.keyCode:(e.which?e.which:e.charCode);
if(e.ctrlKey &&code== 13 )
{
alert(this.getSelText());
return;
}
if (code== 13 ) //enter
{
this.change(this.cursor,"");
this.setCursor();
return;
}
if ((code< 48 )||(code> 57 )) event.returnValue = false;
if (code== 8 ) //backspace
{
var nl = this.el.getElementsByTagName(this.math)[ 0 ];
if(nl.firstChild!=nl.lastChild) nl.removeChild(nl.lastChild);
nl.removeChild(nl.lastChild);
this.setCursor();
this.review();
return;
}
//вставляем/удаляем символ
var tag;
if (( code >= 48 ) && (code <= 57 ))
tag = "mn"; // 0 .. 9
if (((code >= 65 ) && (code <= 90 )) ||
((code >= 97 ) && (code <= 122 )))
tag = "mi"; //abc
if (((code >= 42 ) && (code <= 47 )) ||
((code >= 58 ) && (code <= 64 )) ||
((code >= 91 ) && (code <= 96 )))
tag = "mo"; //~!@
if (code == 32 ) tag = "mspace";
this.change(this.cursor, "<"+tag+">"+String.fromCharCode(code)+"</"+tag+">" +this.cursor);
this.review();
return;
};
// Инит
this.init = function()
{
this.setCursor();
this.review();
}
// Работа меню элементов
this.toggleList = function(eTarget)
{
eTarget.style.display=="none" ? eTarget.style.display="block" : eTarget.style.display="none";
eTarget.display=="none" ? eTarget.display="block" : eTarget.display="none";
}
this.flashMe = function(eSrc, sColor)
{
eSrc.style.color=sColor;
}
}
//-- Инициализация класса
var mmle;
function launch()
{
mmle = new mmlEditor();
mmle.init();
}
//-- Обработка нажатия клавиши
document.onkeypress = function keyIsDown(event)
{
mmle.keyIsDown(event);
}
mmlEditor.xml
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. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90. 91. 92. 93. 94. 95. 96. 97. 98. 99. 100. 101. 102. 103. 104. 105. 106. 107. 108. 109. 110. 111. 112. 113. 114. 115. 116. 117. 118. 119. 120. 121. 122. 123. 124. 125. 126. 127. 128. 129. 130. 131. 132. 133. 134. 135. 136. 137. 138. 139. 140. 141. 142. 143. 144. 145. 146. 147. 148. 149. 150. 151. 152. 153. 154.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/xsl" href="mmlEditor.xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script src="mmlEditor.js" type="text/javascript"></script>
</head>
<body style="background: #ffffff" onload="launch()">
<dfn>exisises:</dfn>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mfenced open="{" separators=",."><mfrac><mn> 1 </mn><mn> 78 </mn></mfrac><mrow><mo>sin</mo><mi>x</mi></mrow><mi>y</mi></mfenced><mo>×</mo>
<msup><mi mathvariant="fraktur">a</mi><mrow><mn> 2 </mn><mi>x</mi></mrow></msup><mo>+</mo><msub><mn> 2 </mn><mi>j</mi></msub><mi>x</mi><mo>+</mo>
<mfrac><mn> 45 </mn><mfrac><mn> 1 </mn><mn> 78 </mn></mfrac></mfrac><mo>*</mo><mstyle color="blue" background="red" fontsize="24pt"><msubsup><mi>x</mi>
<mn color="green"> 2 </mn><mn> 3 </mn></msubsup></mstyle><mo>=</mo><mstyle color="blue" background="lightblue" fontsize="16pt"><mroot><mfrac><mn> 1 </mn>
<mrow><mn> 23 </mn><mo>+</mo><mn>β</mn></mrow></mfrac><mn> 3 </mn></mroot></mstyle><ms lquote="#" rquote=""">This is my string!
</ms>
</math>
<table border="1" cellspacing="1" cellpadding="2" align="left" bordercolor="#000000" width="85%" height="100%">
<tr><td valign="top" align="left" width="83%" height="302" bgcolor="#CCCCCC">
<table border="0" cellspacing="1" cellpadding="2" align="center" bordercolor="#000000" width="100%" height="100%" style="cursor:text">
<tr><td valign="top" align="left" width="100%" height="300" bgcolor="#FFFFFF">
<!-- -->
<p id='editarea'><math xmlns="http://www.w3.org/1998/Math/MathML"></math></p>
<!-- -->
</td></tr>
</table>
</td>
<td valign="top" align="left" width="83%" height="302" bgcolor="#CCCCCC">
<table border="0" cellspacing="1" cellpadding="2" align="center" bordercolor="#000000" width="150" height="100%">
<tr><td valign="top" align="left" width="150" height="300" bgcolor="#CCCCCC">
<ul id="idList" name="idList">
<li onclick="javascript: mmle.toggleList(idListA)" onmouseover="javascript: mmle.flashMe(this,'red')" onmouseout="javascript: mmle.flashMe(this,'black')" title="Expand list.." style="cursor: hand;">
<dfn>arithmetic</dfn>
<ul id="idListA" name="idListA" style="display:none; cursor:default;">
<table cellpadding="4">
<tr><td>
<li title="×" onclick="mmle.putForm('<mo>×</mo>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mo>×</mo></math></li>
</td><td>
<li title="Divide" onclick="mmle.putForm('<mfrac>░<mrow>░</mrow></mfrac>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mfrac><mi>a</mi><mi>b</mi></mfrac></math></li>
</td><td>
<li title="±" onclick="mmle.putForm('<mo>±</mo>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mo>±</mo></math></li>
</td></tr><tr><td>
<li title="Index" onclick="mmle.putForm('<msup><mrow>░</mrow><mrow>░</mrow></msup>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><msup><mrow><mi>x</mi></mrow><mrow><mn>y</mn></mrow></msup></math></li>
</td><td>
<li title="Sqrt" onclick="mmle.putForm('<mroot><mrow>░</mrow><mrow>░</mrow></mroot>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mroot><mrow><mi>a</mi></mrow><mrow><mi>b</mi></mrow></mroot></math></li>
</td><td>
<li title="Modul" onclick="mmle.putForm('|░|')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mo>|x|</mo></math></li>
</td></tr><tr><td>
<li title="Factorial" onclick="mmle.putForm('░!')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><apply><factorial/><ci>n!</ci></apply></math></li>
</td><td>
<li title="Natural log" onclick="mmle.putForm('<mi>ln</mi>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mi>ln</mi></math></li>
</td><td>
<li title="Logariphm" onclick="mmle.putForm('<mi>log</mi>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mi>log</mi></math></li>
</td></tr><tr><td>
<li title="sin" onclick="mmle.putForm('<mi>sin</mi>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mi>sin</mi></math></li>
</td><td>
<li title="cos" onclick="mmle.putForm('<mi>cos</mi>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mi>cos</mi></math></li>
</td><td>
<li title="tan" onclick="mmle.putForm('<mi>tan</mi>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mi>tan</mi></math></li>
</td></tr>
</table>
</ul>
</li>
<li onclick="mmle.toggleList(idListB)" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')" title="Expand list.." style="cursor: hand;"> <dfn>calculus</dfn>
<ul id="idListB" name="idListB" style="display:none; cursor:default;">
<table cellpadding="4">
<tr><td>
<li title="Diff" onclick="mmle.putForm('<mo>dx</mo>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mo>dx</mo></math></li>
</td><td>
<li title="→" onclick="mmle.putForm('<mo>→</mo>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mover><mo>→</mo><mtext></mtext></mover></math></li>
</td><td>
<li title="∞" onclick="mmle.putForm('<mo>∞</mo>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mo>∞</mo></math></li>
</td></tr><tr><td>
<li title="Integral" onclick="mmle.putForm('<mo>∫</mo>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mover><munder><mo>∫</mo><mn> 0 </mn></munder><mi>∞</mi></mover></math></li>
</td><td>
<li title="∑" onclick="mmle.putForm('<mo>∑</mo>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><munderover><mo>∑</mo><mi>x</mi><mn> 0 </mn></munderover></math></li>
</td><td>
<li title="∏" onclick="mmle.putForm('<mo>∏</mo>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><munderover><mo>∏</mo><mi>x</mi><mn> 0 </mn></munderover></math></li>
</td></tr>
</table>
</ul>
</li>
<li onclick="mmle.toggleList(idListC)" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')" title="Expand list.." style="cursor: hand;"> <dfn>vectors</dfn>
<ul id="idListC" name="idListC" style="display:none; cursor:default;">
<li title="Vectors" onclick="mmle.putForm('<mrow><mo>(</mo><mfrac linethickness=0>░░</mfrac><mo>)</mo></mrow>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mrow><mo>(</mo><mfrac linethickness="0"><mi>a</mi><mi>b</mi></mfrac><mo>)</mo></mrow></math></li>
</ul>
</li>
<li onclick="mmle.toggleList(idListD)" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')" title="Expand list.." style="cursor: hand;"> <dfn>boolean</dfn>
<ul id="idListD" name="idListD" style="display:none; cursor:default;">
<table cellpadding="4">
<tr><td>
<li title="=" onclick="mmle.putForm('<mo>=</mo>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mo>=</mo></math></li>
</td><td>
<li title="<" onclick="mmle.putForm('<mo><</mo>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mo><</mo></math></li>
</td><td>
<li title=">" onclick="mmle.putForm('<mo>></mo>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mo>></mo></math></li>
</td></tr><tr><td>
<li title="≠" onclick="mmle.putForm('<mo>≠</mo>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mo>≠</mo></math></li>
</td><td>
<li title="≤" onclick="mmle.putForm('<mo>≤</mo>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mo>≤</mo></math></li>
</td><td>
<li title="≥" onclick="mmle.putForm('<mo>≥</mo>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mo>≥</mo></math></li>
</td></tr><tr><td>
<li title="˄" onclick="mmle.putForm('<mo>˄</mo>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mo>˄</mo></math></li>
</td><td>
<li title="˅" onclick="mmle.putForm('<mo>˅</mo>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mo>˅</mo></math></li>
</td></tr>
</table>
</ul>
</li>
<li onclick="mmle.toggleList(idListE)" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')" title="Expand list.." style="cursor: hand;"> <dfn>etc</dfn>
<ul id="idListE" name="idListE" style="display:none; cursor:default;">
<li title="MathML string" onclick="mmle.putForm('<ms>░</ms>')" onmouseover="mmle.flashMe(this,'red')" onmouseout="mmle.flashMe(this,'black')"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><ms>MathML string</ms></math></li>
</ul>
</li>
</ul>
</td></tr>
</table>
</td></tr>
</table>
<table border="1" cellspacing="1" cellpadding="2" align="left" bordercolor="#000000" width="85%" height="100%">
<tr><td valign="top" align="left" width="100%" height="150" bgcolor="#CCCCCC">
<dfn>viewcode:</dfn>
<p id='viewcode'></p>
</td></tr>
</table>
</body>
</html>
mmlEditor.xsl
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.
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:mml="http://www.w3.org/1998/Math/MathML"
xmlns:h="http://www.w3.org/1999/xhtml"
xmlns="http://www.w3.org/1999/xhtml"
>
<xsl:template match="h:*">
<xsl:element name="{local-name(.)}">
<xsl:copy-of select="@*"/>
<xsl:apply-templates/>
</xsl:element>
</xsl:template>
<xsl:template match="h:html|html">
<html>
<xsl:copy-of select="@*[not(namespace-uri(.)='http://www.w3.org/2002/Math/preference')]"/>
<xsl:apply-templates/>
</html>
</xsl:template>
<xsl:template match="mml:*">
<xsl:element name="mml:{local-name(.)}">
<xsl:copy-of select="@*"/>
<xsl:apply-templates/>
</xsl:element>
</xsl:template>
</xsl:stylesheet>
пояснение: чтоб закончить ввод какой -либо части нужно нажать enter
|
|