|
0
|
1 <!doctype html>
|
|
|
2
|
|
|
3 <title>CodeMirror: Bi-directional Text Demo</title>
|
|
|
4 <meta charset="utf-8"/>
|
|
|
5 <link rel=stylesheet href="../doc/docs.css">
|
|
|
6
|
|
|
7 <link rel="stylesheet" href="../lib/codemirror.css">
|
|
|
8 <script src="../lib/codemirror.js"></script>
|
|
|
9 <script src="../mode/xml/xml.js"></script>
|
|
|
10 <style>
|
|
|
11 .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
|
|
|
12 fieldset {border: none}
|
|
|
13 </style>
|
|
|
14 <div id=nav>
|
|
|
15 <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
|
|
|
16
|
|
|
17 <ul>
|
|
|
18 <li><a href="../index.html">Home</a>
|
|
|
19 <li><a href="../doc/manual.html">Manual</a>
|
|
|
20 <li><a href="https://github.com/codemirror/codemirror5">Code</a>
|
|
|
21 </ul>
|
|
|
22 <ul>
|
|
|
23 <li><a class=active href="#">Bi-directional Text</a>
|
|
|
24 </ul>
|
|
|
25 </div>
|
|
|
26
|
|
|
27 <article>
|
|
|
28 <h2>Bi-directional Text Demo</h2>
|
|
|
29 <form><textarea id="code" name="code"><!-- Piece of the CodeMirror manual, 'translated' into Arabic by Google Translate -->
|
|
|
30 <!-- قطعة من دليل CodeMirror، "ترجم" إلى العربية بواسطة جوجل ترجمة -->
|
|
|
31
|
|
|
32 <dl>
|
|
|
33 <dt id=option_value><code>value (string or Doc)</code></dt>
|
|
|
34 <dd>قيمة البداية المحرر. يمكن أن تكون سلسلة، أو. كائن مستند.</dd>
|
|
|
35 <dt id=option_mode><code>mode (string or object)</code></dt>
|
|
|
36 <dd>وضع الاستخدام. عندما لا تعطى، وهذا الافتراضي إلى الطريقة الاولى
|
|
|
37 التي تم تحميلها. قد يكون من سلسلة، والتي إما أسماء أو ببساطة هو وضع
|
|
|
38 MIME نوع المرتبطة اسطة. بدلا من ذلك، قد يكون من كائن يحتوي على
|
|
|
39 خيارات التكوين لواسطة، مع <code>name</code> الخاصية التي وضع أسماء
|
|
|
40 (على سبيل المثال <code>{name: "javascript", json: true}</code>).
|
|
|
41 صفحات التجريبي لكل وضع تحتوي على معلومات حول ما معلمات تكوين وضع
|
|
|
42 يدعمها. يمكنك أن تطلب CodeMirror التي تم تعريفها طرق وأنواع MIME
|
|
|
43 الكشف على <code>CodeMirror.modes</code>
|
|
|
44 و <code>CodeMirror.mimeModes</code> الكائنات. وضع خرائط الأسماء
|
|
|
45 الأولى لمنشئات الخاصة بهم، وخرائط لأنواع MIME 2 المواصفات
|
|
|
46 واسطة.</dd>
|
|
|
47 <dt id=option_theme><code>theme (string)</code></dt>
|
|
|
48 <dd>موضوع لنمط المحرر مع. يجب عليك التأكد من الملف CSS تحديد
|
|
|
49 المقابلة <code>.cm-s-[name]</code> يتم تحميل أنماط (انظر
|
|
|
50 <a href="../theme/"><code>theme</code></a> الدليل في التوزيع).
|
|
|
51 الافتراضي هو <code>"default"</code> ، والتي تم تضمينها في
|
|
|
52 الألوان <code>codemirror.css</code>. فمن الممكن استخدام فئات متعددة
|
|
|
53 في تطبيق السمات مرة واحدة على سبيل المثال <code>"foo bar"</code>
|
|
|
54 سيتم تعيين كل من <code>cm-s-foo</code> و <code>cm-s-bar</code>
|
|
|
55 الطبقات إلى المحرر.</dd>
|
|
|
56 </dl>
|
|
|
57 </textarea>
|
|
|
58 <fieldset>
|
|
|
59 Editor default direction:
|
|
|
60 <input type="radio" id="ltr" name="direction"/><label for="ltr">LTR</label>
|
|
|
61 <input type="radio" id="rtl" name="direction"/><label for="rtl">RTL</label>
|
|
|
62 </fieldset>
|
|
|
63 <fieldset>
|
|
|
64 HTML document direction:
|
|
|
65 <input type="radio" id="htmlltr" name="htmldirection"/><label for="htmlltr">LTR</label>
|
|
|
66 <input type="radio" id="htmlrtl" name="htmldirection"/><label for="htmlrtl">RTL</label>
|
|
|
67 </fieldset>
|
|
|
68 <fieldset>
|
|
|
69 <input type="checkbox" id="rtlMoveVisually"/><label for="rtlMoveVisually">Use visual order for arrow key movement.</label>
|
|
|
70 </fieldset>
|
|
|
71 </form>
|
|
|
72
|
|
|
73 <script>
|
|
|
74 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
|
|
|
75 mode: "text/html",
|
|
|
76 lineNumbers: true,
|
|
|
77 lineWrapping: true,
|
|
|
78 direction: "rtl"
|
|
|
79 });
|
|
|
80
|
|
|
81 var dirRadios = {ltr: document.getElementById("ltr"),
|
|
|
82 rtl: document.getElementById("rtl")};
|
|
|
83 dirRadios[editor.getOption("direction")].checked = true;
|
|
|
84 dirRadios["rtl"].onchange = dirRadios["ltr"].onchange = function() {
|
|
|
85 editor.setOption("direction", dirRadios["rtl"].checked ? "rtl" : "ltr");
|
|
|
86 };
|
|
|
87
|
|
|
88 var HtmlDirRadios = {ltr: document.getElementById("htmlltr"),
|
|
|
89 rtl: document.getElementById("htmlrtl")};
|
|
|
90 HtmlDirRadios["ltr"].checked = true;
|
|
|
91 HtmlDirRadios["rtl"].onchange = HtmlDirRadios["ltr"].onchange = function() {
|
|
|
92 document.dir = (HtmlDirRadios["rtl"].checked ? "rtl" : "ltr");
|
|
|
93 };
|
|
|
94
|
|
|
95 var moveCheckbox = document.getElementById("rtlMoveVisually");
|
|
|
96 moveCheckbox.checked = editor.getOption("rtlMoveVisually");
|
|
|
97 moveCheckbox.onchange = function() {
|
|
|
98 editor.setOption("rtlMoveVisually", moveCheckbox.checked);
|
|
|
99 };
|
|
|
100 </script>
|
|
|
101
|
|
|
102 <p>Demonstration of bi-directional text support. See
|
|
|
103 the <a href="http://marijnhaverbeke.nl/blog/cursor-in-bidi-text.html">related
|
|
|
104 blog post</a> for more background.</p>
|
|
|
105
|
|
|
106 </article>
|
