مضيفا تحرير النص الغني إلى HTML5 الخاص بك أو تطبيق جافا سكريبت غير قابلة للتنفيذ تماما وأنه ليس من الضروري أن يكلفك عشرة سنتات. هذه المكتبات الخمس تجعل من المكونات واللعب بسيطة لإضافة وظائف معالجة النصوص لتطبيقات الويب الخاص بك.
المحررين نص عادي أن توفر معظم واجهات برمجة التطبيقات على ما يرام بالنسبة لبعض الأغراض. على سبيل المثال، يمكنك استخدام واحد لإضافة ملاحظة سريعة أو طلب خدمة. ومع ذلك، ومعظمنا نتوقع أن التواصل نصية أو رسالة والنوافذ مع الغنية ميزات تحرير النص مثل عريض، مائل، واللون، واستخدام خط معين. إضافة الرسومات، وصلات، ودعم الجدول فقط يجعل الاتصالات أن أفضل بكثير.
إضافة نص الغنية إلى التطبيق الخاص بك يجعل من الممكن للمستخدمين بإضافة التركيز أو فارق بسيط لمعنى كلامهم. الكثير من التواصل الإنساني يحدث تحت السطح بطرق مموهة هذا النص الغامق أو المائل يمكن أن تساعد المستخدم صريحة.
لكن الذي يريد أن إنشاء هذه الوظيفة من الصفر؟
استسمح من الاخوي ليس لدي دراية كافية في اللغة الانجليزية لترجمته وشكرا
widgEditor
Sometimes all you really need is the bare minimum. The widgEditor is meant to be extremely light (only 33.4 KB), simple to use, and efficient. And it is.
Of all the editors in this article, widgEditor is also the simplest to add to your application. You start with a <textarea> like the one shown here:
<textarea id=”widgEditor”>Some Sample Text</textarea>
Notice the class attribute. You must include this attribute or else the widgEditor won’t do anything.
There’s no hosted site for this API, which makes sense because it’s so incredibly small. You download the API to your local drive and add links to the required CSS and script as shown here.
<link rel=”stylesheet” href=”widgEditor/css/widgEditor.css” />
<script src=”widgEditor/scripts/widgEditor.js”></script>
<script src=”widgEditor/scripts/widgEditor.js”></script>
That’s it! This is all you need to use the widgEditor. When you load the page, you see an extremely basic editor like the one shown in Figure 1.
Download: widgEditor 1.0.1
TinyMCE
جميع أن العديد من المستخدمين يريدون حقا هو محرر بسيط يسمح لهم لإضافة بعض الأساسيات، مثل بخط عريض، واستخدام الأساليب، مثل العناوين. يتضمن شريط الأدوات ميزات التحرير الأساسية. لديه مستخدم أيضا الوصول إلى مجموعة من ميزات التحرير إضافية من خلال القائمة.
<textarea id=”TypeHere”>Type some text here.</textarea>
<textarea id=”NoTinyMCE”>This is a text area.</textarea>
<textarea id=”NoTinyMCE”>This is a text area.</textarea>
One of these <textarea> tags is selected as part of the example script, the other isn’t. Adding support for TinyMCE consists of a simple <script> tag in the <head>, much as you would use for any other API. As with most APIs, you can download your own copy of the code or use a hosted version as shown here.
<script src=”http://tinymce.cachefly.net/4.0/tinymce.min.js”></script>
There are all sorts of ways in which you can modify the functionality of TinyMCE, which include the use of plug-ins. However, you can obtain a reasonably nice editor without doing much at all. Here’s the simplest script you can write to make TinyMCE functional.
<script type=”application/x-javascript”>
tinymce.init({selector:’#TypeHere’});
</script>
tinymce.init({selector:’#TypeHere’});
</script>
Download: Tiny MCE 4.0.x
Documentation: Tiny MCE Wiki Documentation
MarkItUp
One of the most popular APIs online is jQuery UI (and the underlying requirement,jQuery). MarkItUp is a jQuery plug-in that provides full text editing capabilities. However, it goes even further than that. You can configure MarkItUp so that it actually acts as a markup editor, so you can create markup and then view the output of that editor. For example, when you enter the tags required to format HTML directly, you can see the result of that markup as output from the editor.
Creating the editor begins with a <textarea> tag. You can add attributes to control the precise number of rows and columns the editor supports like this:
<textarea id=”markItUp” cols=”80″ rows=”20″>
Some Sample Text
</textarea>
Some Sample Text
</textarea>
In order to use this tool, you must download a copy of MarkItUp; there isn’t any hosted site. Then you can reference it and the required jQuery support like this:
<script src=”http://code.jquery.com/jquery-1.8.0.min.js”></script>
<script src=”MarkItUp/markitup/jquery.markitup.js”></script>
<script src=”MarkItUp/markitup/sets/default/set.js”></script>
<script src=”MarkItUp/markitup/jquery.markitup.js”></script>
<script src=”MarkItUp/markitup/sets/default/set.js”></script>
The tool also requires CSS to style parts of the interface. You must specify both a skin (which determines the appearance of the editor) and a set (which determine the editor functionality) like this:
<link rel=”stylesheet” href=”MarkItUp/markitup/skins/simple/style.css” />
<link rel=”stylesheet” href=”MarkItUp/markitup/sets/default/style.css” />
<link rel=”stylesheet” href=”MarkItUp/markitup/sets/default/style.css” />
Anyone who’s used jQuery will recognize the script used to initiate MarkItUp immediately because it looks just like any other jQuery script. The following script shows the simplest way to initialize the editor, but you have considerable flexibility in setting things up.
<script>
$(document).ready(function() {
$(‘#markItUp’).markItUp(mySettings);
});
</script>
$(document).ready(function() {
$(‘#markItUp’).markItUp(mySettings);
});
</script>
The mySettings variable is defined as part of the MarkItUp code. However, you can modify it as needed to create the look you want. The code shown here creates a basic editor for markup that you can use to display formatted output as shown in Figure 3.
Figure 3
MarkItUp is incredibly flexible and light. The downloads page has many add-ons, plug-ins, skins, parsers, and other functionality. However, MarkItUp has a relatively steep learning curve, especially if you decide to use a number of features together to create a unique editor.
Demo: markItUP! in Action
Download: markItUp! Download
Documentation: markItUp! Documentation 1.1
NicEdit
Some developers thrive on complex tools that have serious flexibility and a host of features; others just want to get the job done. NicEdit is for the developers who are in the latter crowd. It helps you get the job done quickly and easily.
As with most of the editors, you can start with one or more <textarea> tags. However, you can add NicEdit to other elements such as a <div> as well.
<textarea id=”NicEdit” cols=”80″ rows=”5″>Some Sample Text</textarea>
<textarea id=”NotNicEdit” cols=”80″ rows=”5″>Some Sample Text</textarea>
<div id=”NicEdit2″>Some Sample Text</div>
<textarea id=”NotNicEdit” cols=”80″ rows=”5″>Some Sample Text</textarea>
<div id=”NicEdit2″>Some Sample Text</div>
You get the best results when you specify a <textarea> size. Otherwise, I found, the controls tend to get cramped. When working with another element type, you don’t have to specify a size, but the editing area tends to be a bit small when you don’t. Use CSS to define the size when working with other elements.
The next step is to create a connection with the online library (or you can download a local copy performance reasons). This API is pretty small, so you won’t see too much of a performance advantage from using a local copy.
<script src=”http://js.nicedit.com/nicEdit-latest.js”></script>
The script required to initialize the editor is quite simple when compared to some of the other offerings. All you need to do is tell the API to add a specific element to the list of editors as shown here.
<script>
bkLib.onDomLoaded(function()
{
new nicEditor().panelInstance(‘NicEdit’);
new nicEditor().panelInstance(‘NicEdit2’);
});
</script>
bkLib.onDomLoaded(function()
{
new nicEditor().panelInstance(‘NicEdit’);
new nicEditor().panelInstance(‘NicEdit2’);
});
</script>
In this case, the script adds an editor to one <textarea>, but not the other. In addition, it adds an editor to the <div> as shown in Figure 4.
Figure 4
The editor has a full range of formatting capabilities including font family, font size, style, and color. You get basic functionality in a small package. In addition, NicEdit works with a range of element types, which gives it flexibility lacking in other APIs. The main disadvantage is that there’s a lack of features. Once you get past the basic editor, you really don’t have much room to grow.
Demo: NicEdit Demos 1-5
Download: NicEdit Components
Documentation: NicEdit Wiki
YUI 2: Rich Text Editor
<textarea id=”RichTextEdit” cols=”100″ rows=”5″>Some Sample Text</textarea>
In order for this API to work, you must set a body style. Otherwise, you’ll see a jumbled mess when you try to display the editor on screen. Here’s a typical style assignment:
<body class=”yui-skin-sam”>
The YUI2 API relies heavily on a number of external links. You begin by adding the CSS links used to format the output.
<link rel=”stylesheet” href=”http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css” />
<link rel=”stylesheet”
href=”http://yui.yahooapis.com/2.9.0/build/editor/assets/skins/sam/simpleeditor.css” />
<link rel=”stylesheet”
href=”http://yui.yahooapis.com/2.9.0/build/editor/assets/skins/sam/simpleeditor.css” />
You need to make a number of API library references. Here’s the minimum configuration required for any application:
<script src=”http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js”>
</script>
<script src=”http://yui.yahooapis.com/2.9.0/build/element/element-min.js”></script>
<script src=”http://yui.yahooapis.com/2.9.0/build/container/container_core-min.js”>
</script>
<script src=”http://yui.yahooapis.com/2.9.0/build/editor/simpleeditor-min.js”></script>
</script>
<script src=”http://yui.yahooapis.com/2.9.0/build/element/element-min.js”></script>
<script src=”http://yui.yahooapis.com/2.9.0/build/container/container_core-min.js”>
</script>
<script src=”http://yui.yahooapis.com/2.9.0/build/editor/simpleeditor-min.js”></script>
The scripts you see in my examples are a little more complex than they need to be to see the editor at work. However, these scripts do show you some of the infrastructure needed to move from example to functional application. I wanted to see how simple I could make the script used to create the editor on screen and came up with this simplified version:
<script>
(function()
{
new YAHOO.widget.SimpleEditor(‘RichTextEdit’).render();
})();
</script>
(function()
{
new YAHOO.widget.SimpleEditor(‘RichTextEdit’).render();
})();
</script>
The resulting editor still has some nice functionality. Figure 5 shows a typical view of the output.
Figure 5
Download: YUI 2.9 zip
Documentation: Yahoo! UI Library