download.bg
 Вход Списание  Новини  Програми  Статии  Форум  Чат   Абонамент  Топ95   Архив 

Прост JavaScript wiswyg редактор за сайт

Автор
Съобщение
phrozencrew
Съб, 30.03.13, 19:53
Много ме изнервят ограниченията в тия редактори на текст. Textarea редакторите, като този на DBG, са добри, но са за потребители с по-advanced възможности. Та реших да разбера какво им е сложното на тия редактори, които ти позволяват бързо форматиране на текст за статия (примерно). Свалих си няколко, набързо ги разгледах и разбрах, че всички ползват тага iFrame. Особеното е, че този таг може да се използва директно с текст, без непременно да се зарежда външна страница в него. А другото е, че позволява RTF редактиране на текста.
Написах базов редактор, който да може да се украсява при нужда, според изискванията на сайта, в който ще се намести:

Към сорс кода добавих и някои ескейпващи команди, които обработват текста, преди да се вкара в базата данни.
Публикувал съм малко подробности в блога ми.

ДЕМО за тест на редактора.

Ако забележите проблеми, или имате идеи, моля да ги споделите, за което предварително благодаря!

programings
Нед, 31.03.13, 11:35
Доста добре си се справил, поздравления.
На пръв поглед няма нищо трудно в сорса.

Може да добавиш бутонче за ембедване на видео от YouTube и Vbox7.

dreven
Нед, 07.04.13, 23:26
Може ли да се добави един бутон, чрез който да се избере даден текстов файл и текста директно да се появи в textarea или DIV, но на кирилица. В мрежата срещнах подобни глезотии, но те работят само на латиница. Ето резултата:

Ето сорса:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
  #byte_content {
    margin: 50px 0;
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #byte_range { margin-top: 5px; }
</style>
  
</HEAD>
 
 
<BODY>
 
 
 
 
<input type="file" id="files" name="file" /> Read bytes: 
<span class="readBytesButtons">
  <button data-startbyte="0" data-endbyte="4">1-5</button>
  <button data-startbyte="5" data-endbyte="14">6-15</button>
  <button data-startbyte="6" data-endbyte="7">7-8</button>
  <button>entire file</button>
 
</span>
<div id="byte_range"></div>
<div id="byte_content2"  STYLE="font-family: Arial Black; font-size: 24px; color: black"></div>
 
 
 
 
<script>
 
  function readBlob(opt_startByte, opt_stopByte) {
 
    var files = document.getElementById('files').files;
    if (!files.length) {
      alert('Please select a file!');
      return;
    }
 
    var file = files[0];
    var start = parseInt(opt_startByte) || 0;
    var stop = parseInt(opt_stopByte) || file.size - 1;
 
    var reader = new FileReader();
 
    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
 var aaa="";
aaa=evt.target.result;
//alert (aaa);
//aaa=aaa.overrideMimeType('text/html; charset=iso-8859-15')
       
document.getElementById('byte_content2').textContent = aaa;  
 
//evt.target.result;
GetCharSet (); 
 
        document.getElementById('byte_range').textContent = 
            ['Read bytes: ', start + 1, ' - ', stop + 1,
             ' of ', file.size, ' byte file'].join('');
      }
    };
 
    var blob = file.slice(start, stop + 1);
    reader.readAsBinaryString(blob);
  }
  
  document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
    if (evt.target.tagName.toLowerCase() == 'button') {
      var startByte = evt.target.getAttribute('data-startbyte');
      var endByte = evt.target.getAttribute('data-endbyte');
      readBlob(startByte, endByte);
    }
  }, false);
 
 
 
 
</script>
 
 
</BODY>
</HTML>

Ето самия пример:
ReadTextFile.html

Как се решава проблема с тези гарги?
Дали трябва да се добави конвертираща функция преди да се подаде към DIV?
Пробвах с функцията Replace да заместя гаргите с букви, но нищо не се получи.

редактиран от dreven на 07.04.13 23:29
insecteater
Пон, 08.04.13, 15:49
По принцип когато се чете двоично се появяват проблеми с кодировките.

Ако си сигурен, че работиш само с текст, тогава вместо
reader.readAsBinaryString(blob)

по-добре ползвай нещо от сорта:
reader.readAsText(file, 'CP1251');

като или ти трябва самичък да се усещаш каква точно е кодировката (щото може да е utf например) или да предоставиш на потребителя опцията сам да я задава.

Ако при ANSI кодировка може и да имаш някакъв успех с побайтово четене от съдържанието на файла при строго определени специфични условия, то при UTF-а със сигурност ще има фалове, поради различния брой байтове, с които може да се кодира един единствен печатаем символ. А да си прави сам човек engine за побайтово четене на UTF кодирани файлове е колкото трудоемко, толкова и безсмислено.

dreven
Пон, 08.04.13, 18:45

RE: Прост JavaScript wiswyg редактор за сайт

” По принцип когато се чете двоично се появяват проблеми с кодировките.

Ако си сигурен, че работиш само с текст, тогава вместо
reader.readAsBinaryString(blob)

по-добре ползвай нещо от сорта:
reader.readAsText(file, 'CP1251');

Драсни три реда за пример, ако не те затруднява.

insecteater
Вто, 09.04.13, 08:17
Ето. В сорса на няколко места има коментар на променените неща
ReadTextFile.6464.html

При UTF кодирането например не можем да си позволим да режем директно байтове, както е видно, ако се направи експеримент. По принцип символите които са с ASCII код над 127 при UTF кодиране използват два или повече байта.

insecteater
Вто, 09.04.13, 08:19

RE: Прост JavaScript wiswyg редактор за сайт

” ... или имате идеи, моля да ги споделите, за което предварително благодаря! „

Ами от прост го направи сложен, че да можем да го ползваме наготово . Например бутоните може да се заменят със съответните иконки като на word и да им се добавят tooltip-чета, за да стане редактора като за полупроводници .

Всъщност може ли да го ползваме наготово и да си го надстройваме?

dreven
Вто, 09.04.13, 16:42

RE: Прост JavaScript wiswyg редактор за сайт

” Ето. В сорса на няколко места има коментар на променените неща
ReadTextFile.6464.html

При UTF кодирането например не можем да си позволим да режем директно байтове, както е видно, ако се направи експеримент. По принцип символите които са с ASCII код над 127 при UTF кодиране използват два или повече байта. „

Прекрасна работа!
БЛАГОДАРЯ от мое име и от всички, които ще ползват сорса!

Сега възниква естествения въпрос, как да запишем ( downoad ) текст от Textarea в прост текстов файл. Отново говорим за Crome.

Аз попаднах на следния сорс, но той отново работи само за латиница:
<html>
<head>
<title>dl text demo</title>
</head>
<body>
 
put text here:<br />
<textarea rows='10' cols='80' id='t1' ></textarea> 
 
<br /><br /> 
 
then click here: <br />
<input value='download' type='button' 
onclick='doDL(document.getElementById("t1").value)' /> 
 
 
<script type='text/javascript'>
 
function doDL(s){
function dataUrl(data) {return "data:x-application/text," + 
escape(data.replace(/r?n/g,"rn"));}
 
window.open(dataUrl(s));
}
</script>
</body>
</html>

Ето и примерчето:
ToFILE2.html

Въпроса ми е може ли да се направи да работи на кирилица?

insecteater
Вто, 09.04.13, 17:04
Бих заложил на преминаването през server side скрипт, за да е платформено независим такъв download.
phrozencrew
Вто, 09.04.13, 18:44

RE: RE: Прост JavaScript wiswyg редактор за сайт

” Ами от прост го направи сложен, че да можем да го ползваме наготово . Например бутоните може да се заменят със съответните иконки като на word и да им се добавят tooltip-чета, за да стане редактора като за полупроводници .

Всъщност може ли да го ползваме наготово и да си го надстройваме? „

Естествено, че може! Не съм слагал стилове, за да не се налага да ги променям прия всеки дизайн, в който реша да го интегрирам.
Иначе ми хрумна една идея, която ми се струва хитра. Вместо да се слагат бутони или картинки, може да се използват символи от шрифтове, като тези:
http://webdesignledger.com/freebies/10-super-useful-free-icon-font-sets
dreven
Сря, 10.04.13, 05:25

RE: Прост JavaScript wiswyg редактор за сайт

” Бих заложил на преминаването през server side скрипт, за да е платформено независим такъв download. „

Не те разбирам. Какво имаш предвид, да го пратя на сървъра и от там да го върна на клиентската машина или нещо друго. Цялата ундурма се върти около идеята една страница да може да комуникира с допълнителни програми работещи на клиентската машина, но без да се ползва Clipboarda. Иначе, чрез АПИ функция мога да взема фокуса на прозореца и чрез изпращане на клавишна комбинация Ctrl+C да копирам съдържанието на textarea-та и да ползвам информацията от Clipboarda. Но това ангажира Clipborda и прави нещата дървени. Ето защо ми иска да реша проблема, чрез Javascript заложен в самата страница.

insecteater
Сря, 10.04.13, 09:37

RE: RE: Прост JavaScript wiswyg редактор за сайт

” Не те разбирам. Какво имаш предвид, да го пратя на сървъра и от там да го върна на клиентската машина или нещо друго., ... „
Да, съдържанието на формата да се прати на скрипт на сървъра, който да върне готовия файл за download, с необходимите хедъри за download и коректното съдържание.

Само чрез JavaScript ако се предават данните, неминуемо символите с ASCII код над 127 се кодират. И това става автоматично от браузъра, СЛЕД като данните бъдат изпратени. Което пък означава, че чрез JavaScript нямаме контрол над това, какво се случва с данните. А за различните браузъри, това може да бъдат различни неща, но обикновено по стандарт данните ще бъдат енкоднати.
Поне на мен не ми е известен начин само чрез JavaScript да може да се прихванат ПОЛУЧЕНИТЕ чрез този метод данни.

dreven
Сря, 10.04.13, 16:22

RE: RE: RE: Прост JavaScript wiswyg редактор за сайт

” Да, съдържанието на формата да се прати на скрипт на сървъра, който да върне готовия файл за download, с необходимите хедъри за download и коректното съдържание.

Само чрез JavaScript ако се предават данните, неминуемо символите с ASCII код над 127 се кодират. И това става автоматично от браузъра, СЛЕД като данните бъдат изпратени. Което пък означава, че чрез JavaScript нямаме контрол над това, какво се случва с данните. А за различните браузъри, това може да бъдат различни неща, но обикновено по стандарт данните ще бъдат енкоднати.
Поне на мен не ми е известен начин само чрез JavaScript да може да се прихванат ПОЛУЧЕНИТЕ чрез този метод данни. „

Ясно !

anonymous
Пет, 06.09.13, 15:42
Може да се измисли и с BBcode .... http://malinichev.ru/lesson/class-bbcode-php.html
редактиран от anonymous на 06.09.13 16:49

Коментар

за нас | за разработчици | за реклама | станете автори | in english  © 1998-2024   Experta Ltd.