Mercurial
comparison .cms/lib/codemirror/demo/bidi.html @ 0:78edf6b517a0 draft
24.10
author | Coffee CMS <info@coffee-cms.ru> |
---|---|
date | Fri, 11 Oct 2024 22:40:23 +0000 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:78edf6b517a0 |
---|---|
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> |