JsRun - Tedjs Library
version : 0.0.3
Guidance Language:
:: Name Space and ID
NameSpace | ID |
---|---|
JsRun | system.aml.jsrun |
.:: Language: English
:: Description:
jsRun is a plugin for Tedjs Framework. it help you to create a code editor (Playground) in your site directly. you can define a file as a library and access to it from ajax with a file name , like a local file. it has JS,HTML and CSS with other external files that you can add to it. each external file can be edited in editor or just be a external library. editor has two color. dark and light. it support your own code parser to pre parse the codes.create your language front-end playground.
:: Element Details
-
General Shape:
<jsrun></jsrun>
the general element TagName is
jsrun
that get 3 attribute and some children elements.to include this library to your project after attaching tedjs to your website , write this function down:
include("system.aml.jsrun"); // OR ainclude("system.aml.jsrun");
or you can download it and use it localy.
-
Attributes:
-
width
:to set the width of whole editor. accepts all css units. the default unit is
px
<jsrun width="50%"></jsrun>
-
height
:to set the height of whole editor. accepts all css units.the default unit is
px
<jsrun height="200px"></jsrun>
-
color
:with this can set the color of your editor.
light
anddark
<jsrun color="dark"></jsrun>
<jsrun color="light"></jsrun>
-
-
Children
Elements
:-
General
Attributes
:each child element has generals attributes.
-
type
Attribute :Requeired
type
attribute will set the type of that element to parse the content. types arehtml
,js
orjavascript
andcss
<element type="html"/> <element type="js"/> <element type="css"/>
-
url
Attribute :if use this attribute , the inner content of element will not parse as a code inside the editor and the content of the url will be fetched.
<element url="/path/file.ext"> <element url="http://doamin.tld/...">
-
preCompile
Attribute :in some cases you want to use
less
instead ofcss
. so you can load less as a library in your site and use the parse function as a pre parser for the codes to load them ascss
.in attribute value must write down the name of parser function. like:
<element preCompile="less.parser">
-
-
lang
Element the elementlang
will let you to insert any type ofcss
,javascrip
andhtml
for one time. if there are more than one element of a same type , the first one will accepted.to define a
lang
element , you must do like this:<lang type="[Types]"></lang>
if you write codes inside the element block , it will parse the code , but if use the
url
attribute it will fetch the url data and parse this data.<lang type="javascript">var a = 2;</lang> // OR <lang type="css" url="http://domain.com/file.css"></lang>
and as on top explained you can use
preCompile
attribute too. -
extfile
Element :this element is an external file that you can load a url or inline code as a editable library in editor or not.
it accept general attributes , also has some special attributes too.
to define the element:
<extfile name="library" path="lib.js" path-in="[Type | Types,...]" ></extfile>
extFile
element attributes :-
name
Attribute :the value of this attribute is used to write in the top menu of editor to can be accessible to edit.
if the name not defined , the name will be selectd automaticly.the name will be
Extend[Number]
likeExtend0
. -
path
Attribute :if use this attribute , the system will show this as an editable library in editor. the value of this attribute is a file name with its extension name like
app.js
.after adding this , you can access to this file via ajax with the defined file name. like it is a local file.
-
path-in
Attribute :with this , you can tell element that the file name should be accessible within which files.
html
,css
orjavascript
or multiple of them.Notice: at this time , because the url is converting to local , it is accessible in javascript
<extfile ... path-in="html"></extfile>
OR
<extfile ... path-in="javascript,css"></extfile>
OR ...
-
-
Notice
to write html code inside lang element , you must encode it first to not be parsed by Browser
Example :
the lang
and extfile
elements are optional. if don't write each one , will not shown on top menu.
<jsrun color="light" width="800px" height="300px">
<lang type="html">
<p> Hello This is a Test </p>
</lang>
<lang type="css">body{
background:black;
color:white;
}</lang>
<lang type="js" preCompile="run">
2
</lang>
<extfile type="js">
var a = 2;
</extfile>
<extfile type="css" path="style.css" name="Style">
body{color:red !important;}
</extfile>
</jsrun>
<script>
function run(data) {
return "alert("+data+")";
}
</script>
.:: Language: پارسی
:: توضیحات :
جی اس ران یک پلاگین برای فریم ورک تد جی اس می باشد. به شما کمک می کند تا یک تدوین گر کد در وبسایت خود به صورت مستقیم ایجاد کنید. می توانید یک فایل را به عنوان کتابخانه تعریف کنید و از طریق در خواست ای جکس به آن دسترسی داشته باشید. مانند یک فایل لوکال . فایل های اچ تی ام ال ، سی اس اس و جاوا اسکریپت و همچنین فایل های خارجی دیگر را می تواند نمایش داده و یا اجرا کند. تدوین گر دارای دو رنگ روشن و تاریک می باشد.
:: جزئیات عنصر
-
شکل کلی:
<jsrun></jsrun>
نام تگ عنصر
jsrun
می باشد که 3 اتریبیوت ب همراه چندین فرضد دریافت می کند.
برای اضافه کردن این کتابخانه به پروژه خود ، می بایست ابتدا فریم ورک تد جی اس را به وبسایت خود الصاق نمایید و سپس از کد زیر برای وارد سازی استفاده نمایید:
include("system.aml.jsrun"); // OR ainclude("system.aml.jsrun");
و یا می توانید پلاگین را دانلود کرده و در وبسایت خود بارگذاری نمایید.
-
اتریبیوت ها:
-
width
:می توان عرض ادیتور را مشخص کرد. تمامی واحد های موجود در سی اس اس را پشتیبانی می کند. درصورت وارد کردن عدد به تنهایی ، واحد پیشفرض ، پیکسل در نظر گرفته خواهد شد.
<jsrun width="50%"></jsrun>
-
height
:می توان ارتفاع ادیتور را مشخص کرد. تمامی واحد های موجود در سی اس اس را پشتیبانی می کند. درصورت وارد کردن عدد به تنهایی ، واحد پیشفرض ، پیکسل در نظر گرفته خواهد شد.
<jsrun height="200px"></jsrun>
-
color
:می توان قالب ادیتور را مشخص نمود.
<jsrun color="dark"></jsrun>
<jsrun color="light"></jsrun>
-
-
عناصر
فرزند :-
اتریبیوت های
عمومی :همه ی عناصر فرزند دارای تعدادی اتریبیوت عمومی هستند:
-
type
:الزمامی
وظیفه این اتریبیوت ، مشخص کردن فرمت کد برای پارس کردن آن می باشد. تایپ های مجاز
html
,js
orjavascript
,css
<element type="html"/> <element type="js"/> <element type="css"/>
-
url
:درصورت استفاده از این اتریبیوت ، محتوای درونی عنصر ، پارس نخواهد شد و در عوض محتوای آدرس داده شده گرفته شده و پارس می شود.
<element url="/path/file.ext"> <element url="http://doamin.tld/...">
-
preCompile
:در برخی موارد برنامه نویس می خواهد به جای استفاده از سی اس اس ، از لِس استفاده کند بنابر این ، کتابخانه لس را الصاق می نماید و نام تابع پارسر آن را در این اتریبیوت می نویسد. سیستم قبل از اجرا کد را به تابع ارسال می کند و مقدار خروجی را نمایش می دهد.
در مقدار اتریبیوت می بایست نام تابع نوشته شود . مانند:
<element preCompile="less.parser">
-
-
lang
عنصراین عنصر اجازه می دهد تا کد های
اچ تی ام ال
،سی اس اس
وجاوا اسکریپت
را برای یک بار وارد نمایید. درصورت ورجود تعداد بیشتر ، اولین درنظر گرفته می شود.برای تعریف می بایست مانند زیر عمل نمایید:
<lang type="[Types]"></lang>
مانند بالا این عنصر دارای اتریبیوت های عمومی می باشد.
-
extfile
عنصر :این عنصر به عنوان یک فایل خارجی عمل می کند که می تواند داده درونش و یا داده آدرس داده شده را به عنوان یکی کتابخانه تدوین پذیر و یا به صورت مستقیم اجرا پذیر اجرا کند.
این عنصر نیز اتریبیوت های عمومی را داراست و نیز دارای اتریبیوت های خاص نیز می باشد.
برای تعریف این عنصر:
<extfile name="library" path="lib.js" path-in="[Type | Types,...]" ></extfile>
extFile
اتریبیوت های عنصر :-
name
:مقدار این اتریبیوت برای نمایش در منوی بالای ادیتور استفاده می شود تا بتوان به کد برای ادیت دسترسی داشت
درصورتی که نام مشخص نشده باشد ، نام به صورت خودکار انتخاب می شود. فرمت نام به صورت زیر می باشد:
Extend[Number]
مانندExtend0
-
path
:درصورت استفاده از این اتریبیوت ، سیستم ، این کتابخانه را در ادیتور نمایش خواهد داد. مقدار این اتریبیوت ، نام فایل همراه با نوع فایل می باشد. مانند:
app.js
پس از اضافه کردن این اتریبیوت می توانید از طریق ای جکس توسط نام فایل تعریف شده به محتوای فایل دسترسی داشته باشید. مانند یک فایل لوکال.
-
path-in
:از طریق این اتریبیوت می توانید به سیستم بگویید که فایل تعریف شده در اتریبیوت قبل در کدام کد ها قابل دسترسی می باشد.مقدار های مجاز هر یک از موارد زیر یا ترکیبی از آن ها می باشد.
html
,css
,javascript
به دلیل اینکه آدرس به صورت لوکال تبدیل می شود فعلا تنها در فایل های جاوا اسکریپت در دسترس می باشد.
<extfile ... path-in="html"></extfile>
یا
<extfile ... path-in="javascript,css"></extfile>
یا ...
-
-
Notice
برای نوشتن کدهای اچ تی ام ال ، به دلیل اینکه توسط مرورگر تجزیه و یا پارس نشود ، به صورت انکد شده بنویسید.
Example :
عناصر
lang
و extfile
عناصر اختیاری می باشند. درصورتی که هرکدام نوشته نشوند در ادیتور نمایش داده نخواهند شد.
<jsrun color="light" width="800px" height="300px">
<lang type="html">
<p> Hello This is a Test </p>
</lang>
<lang type="css">body{
background:black;
}</lang>
<lang type="js" preCompile="run">
32
</lang>
<extfile type="js" path="test.js">
tedApi.http({
url:"/folder/lib.js",
success:function(data){
console.log(data);
}
});
</extfile>
<extfile type="js" path="/folder/lib.js" path-in="js" name="lib.js">
var a = 2;
</extfile>
<extfile type="js" url="https://cdn.tedjs.org/tedjs/1.1.2/js/2ed.min.js"></extfile>
<extfile type="css" path="style.css" name="Style">
body{color:red !important;}
</extfile>
</jsrun>
<script>
function run(data) {
return "alert("+data+")";
}
</script>
ace editor is used.
to highlighting the code ,Author
this is created by poryagrand . Powered by Tedjs