Редактор математических формул для форума phpBB
Помогите доделать редактор для ввода математических формул (LaTeX) для форума на phpBB_3.
Делаю по аналогии со смайлами в phpbb_3, то есть при нажатии на картинку с формулой в форму ответа вставляется её LaTeX-код. Например, неопределённый интеграл
<a href="#" onclick="insert_text('\\int', true); return false;"
style="display:block; width: 30px; height: 70px; cursor: pointer;">
<img src="/indefinite_integral.png" title="Неопределённый интеграл" />
</a>
Но для матриц разумно сделать форму ввода, что-то типа такого _______________________________________________ Выберите тип скобок и введите число строк и колонок __(A)__|A|__[A]__ǁAǁ___Строки_ n __Колонки_ k __ _______________________________________________ Например, если пользователь выберет (A) и введёт n=3 и k=4, то в форму ответа вставится LaTeX-код Код:
\begin{pmatrix}Скобки имеют вид: - круглые \begin{pmatrix}\end{pmatrix} - прямые \begin{vmatrix}\end{vmatrix} - квадратные \begin{bmatrix}\end{bmatrix} - двойные прямые \begin{Vmatrix}\end{Vmatrix} |
Вы просите готовый скрипт с нуля.
Это работа, и за нее обычно платят деньги. Для таких сообщений предназначен раздел форума "Работа". Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела. |
Сколько это будет примерно стоить?
Вообще, нужна только форма для ввода матриц, остальную часть редактора сделал и оформил. |
50WMZ
|
Почитал учебничек на этом сайте и, вроде бы, получилось :-? сделать основную часть js-кода. Не догнал, как сделать выбор типа скобок для матрицы.
Как отменить удаление ранее набранного текста в <textarea> при вводе (нажатии Вставить)? Вот код:
<html>
<head>
<style>
form {padding-left: 100px;}
caption {margin-bottom: 10px; font: bold 18px Calibri;}
td {width: 125px; padding: 0px; vertical-align: middle; background-color: #f3f3f3;
font: 14px Arial; height: 38px;}
input.rows, input.cols {width: 20px; color: blue;}
textarea {padding:10px; width:380px; height:150px;}
</style>
<script language="JavaScript">
<!--
function LatexMatrix(r,c,output)
{
var i,j;
if (r.value == "" || c.value == "" ) {r.value = 2; c.value = 2;}
output.value = "\\begin\{pmatrix\}\n";
for (i=1; i<=r.value-1; i++)
{for (j=1; j<=c.value-1; j++) {output.value += "\ 1\ \&";} output.value += "\ 1\ \\\\\n";}
for (j=1; j<=c.value-1; j++) {output.value += "\ 1\ \&";}
output.value += "\ 1\ \n\\end\{pmatrix\}\n\n\[Замените\ 1\ нужными\ значениями\]";
}
// -->
</script>
</head>
<body>
<form name="matrix">
<table>
<caption>Введите числа строк и столбцов матрицы</caption>
<tr>
<td> Строки <b>i =</b> <input name="cols1" maxlength="1" type="text" class="rows"></td>
<td> Столбцы <b>j =</b> <input name="rows1" maxlength="1" type="text" class="cols"></td>
<td align="center">
<input value="Вставить" onclick="LatexMatrix(cols1,rows1,matrix)" name="button" type="button"
style="cursor: pointer;">
</td>
</tr>
</table>
<textarea name="matrix" placeholder="Здесь появится LaTeX-код матрицы"></textarea>
</form>
</body>
</html>
P.S. Сильно не ругайте: первый раз js-код с нуля пишу. |
Цитата:
Цитата:
|
Цитата:
|
[HTML run]
<html>
<head>
<style>
form {padding-left: 100px;}
caption {margin-bottom: 10px; font: bold 18px Calibri;}
td {width: 125px; padding: 0px; vertical-align: middle; background-color: #f3f3f3;
font: 14px Arial; height: 38px;}
input.rows, input.cols {width: 20px; color: blue;}
textarea {padding:10px; width:380px; height:150px;}
</style>
<script language="JavaScript">
<!--
function LatexMatrix(r,c,output)
{
var i,j;
if (r.value == "" || c.value == "" ) {r.value = 2; c.value = 2;}
var a = ''; if(output.value!='') a = '\n';
output.value += a + "\\begin\{pmatrix\}\n";
for (i=1; i<=r.value-1; i++)
{for (j=1; j<=c.value-1; j++) {output.value += "\ 1\ \&";} output.value += "\ 1\ \\\\\n";}
for (j=1; j<=c.value-1; j++) {output.value += "\ 1\ \&";}
output.value += "\ 1\ \n\\end\{pmatrix\}\n\n\[Замените\ 1\ нужными\ значениями\]";
}
// -->
</script>
</head>
<body>
<form name="matrix">
<table>
<caption>Введите числа строк и столбцов матрицы</caption>
<tr>
<td> Строки <b>i =</b> <input name="cols1" maxlength="1" type="text" class="rows"></td>
<td> Столбцы <b>j =</b> <input name="rows1" maxlength="1" type="text" class="cols"></td>
<td align="center">
<input value="Вставить" onclick="LatexMatrix(cols1,rows1,matrix)" name="button" type="button"
style="cursor: pointer;">
</td>
</tr>
</table>
<textarea name="matrix" placeholder="Здесь появится LaTeX-код матрицы"></textarea>
</form>
</body>
</html>
|
Спасибо за реальную помощь! :thanks:
Если возможно, подскажите, пожалуйста, что ещё "прикрутить", чтобы матрица вставлялась в текущее положение курсора? То есть чтобы текст, идущий после матрицы, переносился вместе с ней. |
Demath,
Хм - ну ежели разберетесь ... то вот стандартный девайс на phpBB форумах http://javascript.ru/forum/css-html-...tml#post185398 пост 2 в спойлере |
Цитата:
- круглые \begin{pmatrix}\end{pmatrix} - прямые \begin{vmatrix}\end{vmatrix} - квадратные \begin{bmatrix}\end{bmatrix} - двойные прямые \begin{Vmatrix}\end{Vmatrix} - фигурные \begin{Bmatrix}\end{Bmatrix} - без скобок \begin{matrix}\end{matrix} Пытаюсь добавить переменную со значениями: 'p', 'v', 'b', 'V', 'B', ' ', в output.value += a + "\\begin\{pmatrix\}\n" и output.value += "\ 1\ \n\\end\{pmatrix\}..., но безрезультатно :( Вот эскиз
<html>
<head>
<style>
form {padding-left: 100px;}
caption {margin-bottom: 10px; font: bold 16px Calibri; line-height: 1;}
td {width: 125px; padding: 0px; text-align: center; background-color: #f3f3f3;
font: 14px Arial; height: 30px;}
td.mbrackets {padding-left: 16px;}
.mbrackets input {display: block; float: left; margin: 4px 19px 0px 5px;}
.mbrackets img {display: block; float: left;}
input.rows, input.cols {width: 20px; height: 22px; color: blue;}
textarea {padding: 10px; width: 380px; height: 150px;}
</style>
<script language="JavaScript">
<!--
function LatexMatrix(r,c,output)
{
var i,j;
if (r.value == "" || c.value == "" ) {r.value = 2; c.value = 2;}
var a = ''; if(output.value!='') a = '\n';
output.value += a + "\\begin\{pmatrix\}\n";
for (i=1; i<=r.value-1; i++)
{for (j=1; j<=c.value-1; j++) {output.value += "\ 1\ \&";} output.value += "\ 1\ \\\\\n";}
for (j=1; j<=c.value-1; j++) {output.value += "\ 1\ \&";}
output.value += "\ 1\ \n\\end\{pmatrix\}\n\n\[Замените\ 1\ нужными\ значениями\]";
}
// -->
</script>
</head>
<body>
<form name="matrix">
<table>
<caption>Выберите тип скобок и введите числа<br />строк и столбцов матрицы</caption>
<tr>
<td colspan="3" class="mbrackets">
<img title="Круглые скобки" src="http://i018.radikal.ru/1207/4f/21fe23691c4f.jpg" />
<input type="radio" name="mbrackets" checked value="" />
<img title="Прямые скобки (для определителей)" src="http://s55.radikal.ru/i150/1207/fd/cd7e314d6f0a.jpg" />
<input type="radio" name="mbrackets" value="" />
<img title="Квадратные скобки" src="http://s017.radikal.ru/i400/1207/fd/e45e839d64e2.jpg" />
<input type="radio" name="mbrackets" value="" />
<img title="Двойные прямые скобки (норма матрицы)" src="http://s57.radikal.ru/i157/1207/88/fe9f51030bce.jpg" />
<input type="radio" name="mbrackets" value="" />
<img title="Фигурные скобки" src="http://s54.radikal.ru/i146/1207/f6/a968aa91e75d.jpg" />
<input type="radio" name="mbrackets" value="" />
<img title="Без скобок" style="margin-top: 3px;" src="http://s011.radikal.ru/i317/1207/93/60bb22394691.jpg" />
<input type="radio" name="mbrackets" value="" />
</td>
</tr>
<tr>
<td> Строки <b>n =</b> <input name="rows1" maxlength="1" type="text" class="rows" /></td>
<td> Столбцы <b>k =</b> <input name="cols1" maxlength="1" type="text" class="cols" /></td>
<td><input value="Вставить" onclick="LatexMatrix(rows1,cols1,matrix)" name="button" type="button"
title="Нажмите один раз" style="cursor: pointer;" />
</td>
</tr>
</table>
<textarea name="matrix" placeholder="Здесь появится LaTeX-код матрицы"></textarea>
</form>
</body>
</html>
|
Цитата:
Ничо не понял - изобразите скриншот - как это выглядит в итоговом виде в поле textarea |
Сейчас в <textarea> вставляется матрица с круглыми скобками :
Код:
\begin{pmatrix}- с прямыми скобками Код:
\begin{vmatrix}Код:
\begin{bmatrix}Код:
\begin{Vmatrix}Код:
\begin{Bmatrix}Код:
\begin{matrix} |
Demath,
:blink: Я Вижу абсолютно одинаковые 6 матриц в посте Поэтому тупо не могу понять в чем фокус Как должно выглядить в реале и в чем отличие одного от другого - Воть! |
Цитата:
Вот подсветил зелёным эти буквы (в без скобочном варианте буква не ставится): - матрица с круглыми скобками \begin{pmatrix} ... \end{pmatrix} - прямые \begin{vmatrix} ... \end{vmatrix} - квадратные \begin{bmatrix} ... \end{bmatrix} - двойные прямые \begin{Vmatrix} ... \end{Vmatrix} - фигурные \begin{Bmatrix} ... \end{Bmatrix} - без скобок \begin{matrix} ... \end{matrix} В последней выложенной мною версии скрипта только иллюзия выбора типа скобок (<input ... type="radio"> к скрипту не "прикручены"), т.е. матрица вставляется только с круглыми скобками. |
Demath,
Ясно |
<html>
<head>
<style>
form {padding-left: 100px;}
caption {margin-bottom: 10px; font: bold 16px Calibri; line-height: 1;}
td {width: 125px; padding: 0px; text-align: center; background-color: #f3f3f3;
font: 14px Arial; height: 30px;}
td.mbrackets {padding-left: 16px;}
.mbrackets input {display: block; float: left; margin: 4px 19px 0px 5px;}
.mbrackets img {display: block; float: left;}
input.rows, input.cols {width: 20px; height: 22px; color: blue;}
textarea {padding: 10px; width: 380px; height: 150px;}
</style>
<script language="JavaScript">
var bracket='p'; //Preset - First checked input;
function brackets (obj)
{ obj=obj.parentNode.getElementsByTagName('input')[0];
obj.checked=true;
bracket=obj.value;
}
function LatexMatrix(r,c,output)
{
var i,j;
if (r.value == "" || c.value == "" ) {r.value = 2; c.value = 2;}
var a = ''; if(output.value!='') a = '\n';
output.value += a + "\\begin\{"+bracket+"matrix\}\n";
for (i=1; i<=r.value-1; i++)
{for (j=1; j<=c.value-1; j++) {output.value += "\ 1\ \&";} output.value += "\ 1\ \\\\\n";}
for (j=1; j<=c.value-1; j++) {output.value += "\ 1\ \&";}
output.value += "\ 1\ \n\\end\{"+bracket+"matrix\}\n\n\[Замените\ 1\ нужными\ значениями\]";
}
</script>
</head>
<body>
<form name="matrix">
<table>
<caption>Выберите тип скобок и введите числа<br />строк и столбцов матрицы</caption>
<tr>
<td colspan="3" class="mbrackets">
<span>
<img title="Круглые скобки" src="http://i018.radikal.ru/1207/4f/21fe23691c4f.jpg" onclick="brackets(this)"/>
<input type="radio" name="mbrackets" checked value="p" onclick="brackets(this)"/>
</span>
<span>
<img title="Прямые скобки (для определителей)" src="http://s55.radikal.ru/i150/1207/fd/cd7e314d6f0a.jpg" onclick="brackets(this)"/>
<input type="radio" name="mbrackets" value="v" onclick="brackets(this)"/>
</span>
<span>
<img title="Квадратные скобки" src="http://s017.radikal.ru/i400/1207/fd/e45e839d64e2.jpg" onclick="brackets(this)"/>
<input type="radio" name="mbrackets" value="b" onclick="brackets(this)"/>
</span>
<span>
<img title="Двойные прямые скобки (норма матрицы)" src="http://s57.radikal.ru/i157/1207/88/fe9f51030bce.jpg" onclick="brackets(this)"/>
<input type="radio" name="mbrackets" value="V" onclick="brackets(this)"/>
</span>
<span>
<img title="Фигурные скобки" src="http://s54.radikal.ru/i146/1207/f6/a968aa91e75d.jpg" onclick="brackets(this)"/>
<input type="radio" name="mbrackets" value="B" onclick="brackets(this)"/>
</span>
<span>
<img title="Без скобок" style="margin-top: 3px;" src="http://s011.radikal.ru/i317/1207/93/60bb22394691.jpg" onclick="brackets(this)"/>
<input type="radio" name="mbrackets" value="" onclick="brackets(this)"/>
</span>
</td>
</tr>
<tr>
<td> Строки <b>n =</b> <input name="rows1" maxlength="1" type="text" class="rows" /></td>
<td> Столбцы <b>k =</b> <input name="cols1" maxlength="1" type="text" class="cols" /></td>
<td><input value="Вставить" onclick="LatexMatrix(rows1,cols1,matrix)" name="button" type="button"
title="Нажмите один раз" style="cursor: pointer;" />
</td>
</tr>
</table>
<textarea name="matrix" placeholder="Здесь появится LaTeX-код матрицы"></textarea>
</form>
</body>
</html>
|
Deff, огромное спасибо! Всё работает как нужно.
Вот "прикрутил" ещё пару фич: 1) добавление вертикальной линии после заданного столбца и/или 2) добавление горизонтальной линии после заданной строки. Например, вертикальная линия добавляется перед последним столбцом в расширенной матрице коэффициентов СЛАУ. Посмотрите, пожалуйста, не чрезмерной ли функция LatexMatrix(...) получилась?
<html>
<head>
<style>
form {padding-left: 100px;}
caption {margin-bottom: 10px; font: bold 16px Calibri; line-height: 1;}
td {width: 125px; padding: 0px; text-align: center; background-color: #f3f3f3;
font: 14px Arial; height: 30px;}
td.mbrackets {width: 375px;}
.mbrackets input {display: block; float: left; margin: 4px 20px 0px 4px;}
.mbrackets img {display: block; float: left;}
div.brackets {display: inline-block;}
td.lines {width: 375px; height: 19px; font: 16px Calibri; text-align: left; text-indent: 10px; line-height: 1;}
td.vline, td.hline {height: 25px; font-size: 13px;}
input.rows, input.cols, td.vline input, td.hline input {width: 20px; height: 22px; color: blue;}
td.vline input, td.hline input {width: 20px; height: 20px; color: blue;}
textarea {padding: 10px; width: 378px; height: 180px;}
</style>
<script language="JavaScript">
var bracket='p'; //Preset - First checked input;
function brackets (obj)
{ obj=obj.parentNode.getElementsByTagName('input')[0];
obj.checked=true;
bracket=obj.value;
}
function LatexMatrix(r,c,vl,hl,output)
{
var i,j;
if (r.value == "" || c.value == "" || vl.value == "" || hl.value == "" )
{r.value = 2; c.value = 2; vl.value = 0; hl.value = 0;}
var a = ''; if(output.value!='') a = '\n';
output.value += a + "\\begin\{"+bracket+"matrix\}";
if (hl.value>0 & hl.value<r.value)
{for (i=1; i<=hl.value; i++)
{output.value += "\n";
if (vl.value>0 & vl.value<c.value) {for (j=1; j<=vl.value; j++) {output.value += "\ 1\ \&";}
output.value += "\\\!\\\!\\vline\\\!\\\!\&";
for (j=1; j<=c.value-vl.value-1; j++) {output.value += "\ 1\ \&";}}
else {for (j=1; j<=c.value-1; j++) {output.value += "\ 1\ \&";}}
output.value += "\ 1\ \\\\";
}
output.value += "\\hline\ ";
for (i=1; i<=r.value-hl.value-1; i++)
{output.value += "\n";
if (vl.value>0 & vl.value<c.value)
{for (j=1; j<=vl.value; j++) {output.value += "\ 1\ \&";}
output.value += "\\\!\\\!\\vline\\\!\\\!\&";
for (j=1; j<=c.value-vl.value-1; j++) {output.value += "\ 1\ \&";}
}
else {for (j=1; j<=c.value-1; j++) {output.value += "\ 1\ \&";}}
output.value += "\ 1\ \\\\";
}
}
else
{for (i=1; i<=r.value-1; i++)
{output.value += "\n";
if (vl.value>0 & vl.value<c.value)
{for (j=1; j<=vl.value; j++) {output.value += "\ 1\ \&";}
output.value += "\\\!\\\!\\vline\\\!\\\!\&";
for (j=1; j<=c.value-vl.value-1; j++) {output.value += "\ 1\ \&";}
}
else {for (j=1; j<=c.value-1; j++) {output.value += "\ 1\ \&";}}
output.value += "\ 1\ \\\\";
}
}
if (vl.value>0 & vl.value<c.value)
{output.value += "\n";
for (j=1; j<=vl.value; j++) {output.value += "\ 1\ \&";}
output.value += "\\\!\\\!\\vline\\\!\\\!\&";
for (j=1; j<=c.value-vl.value-1; j++) {output.value += "\ 1\ \&";}
}
else {output.value += "\n"; for (j=1; j<=c.value-1; j++) {output.value += "\ 1\ \&";}}
output.value += "\ 1\ \n\\end\{"+bracket+"matrix\}\n\n\[Замените\ 1\ нужными\ значениями\]";
}
</script>
</head>
<body>
<form name="matrix">
<table>
<caption>Выберите тип скобок и введите числа<br />строк и столбцов матрицы</caption>
<tr>
<td colspan="3" class="mbrackets">
<div class="brackets">
<img title="Круглые скобки" src="http://i018.radikal.ru/1207/4f/21fe23691c4f.jpg" onclick="brackets(this)" />
<input type="radio" name="mbrackets" checked value="p" onclick="brackets(this)" />
<img title="Прямые скобки (для определителей)" src="http://s55.radikal.ru/i150/1207/fd/cd7e314d6f0a.jpg" onclick="brackets(this)" />
<input type="radio" name="mbrackets" value="v" onclick="brackets(this)" />
<img title="Квадратные скобки" src="http://s017.radikal.ru/i400/1207/fd/e45e839d64e2.jpg" onclick="brackets(this)" />
<input type="radio" name="mbrackets" value="b" onclick="brackets(this)" />
<img title="Двойные прямые скобки (норма матрицы)" src="http://s57.radikal.ru/i157/1207/88/fe9f51030bce.jpg" onclick="brackets(this)" />
<input type="radio" name="mbrackets" value="V" onclick="brackets(this)" />
<img title="Фигурные скобки" src="http://s54.radikal.ru/i146/1207/f6/a968aa91e75d.jpg" onclick="brackets(this)" />
<input type="radio" name="mbrackets" value="B" onclick="brackets(this)" />
<img title="Без скобок" style="margin-top: 3px;" src="http://s011.radikal.ru/i317/1207/93/60bb22394691.jpg" onclick="brackets(this)" />
<input type="radio" name="mbrackets" value="" onclick="brackets(this)" style="margin-right: 8px" />
</div>
</td>
</tr>
<tr>
<td> Строки <b>n =</b> <input name="rows1" maxlength="1" type="text" class="rows" /></td>
<td> Столбцы <b>k =</b> <input name="cols1" maxlength="1" type="text" class="cols" /></td>
<td><input value="Вставить" onclick="LatexMatrix(rows1,cols1,vline1,hline1,matrix)" name="button" type="button"
title="Нажмите один раз" style="cursor: pointer;" />
</td>
</tr>
<tr><td colspan="3" class="lines">Необязательные параметры</td></tr>
<tr>
<td colspan="3" class="vline">
Добавить вертикальную линию после <input name="vline1" maxlength="1" type="text" />-го столбца
</td>
</tr>
<tr>
<td colspan="3" class="hline">
Добавить горизонтальную линию после <input name="hline1" maxlength="1" type="text" />-й строки
</td>
</tr>
</table>
<textarea name="matrix" placeholder="Здесь появится LaTeX-код матрицы"></textarea>
</form>
</body>
</html>
|
| Часовой пояс GMT +3, время: 11:46. |