Свртете го копчето Додај издавач (WYSIWYG | CKEditor)

Еве еден брз да ви помогне да се интегрираат CKEditor со нивните веб апликации во само три чекори.

презентација

претворете го вашиот тагови Полето за текст на веб уредник веќе не е комплицирана задача. Меѓу многуте уредници кои може да се најдат на интернет, да се види или направи употреба CKEditor. Види уредник во акција на оваа ДЕМО.

инсталација

Преземете ја CKEditor во http://ckeditor.com/download. Верзијата употребени во овој пост беше 3.6.4, на 17 јули 2012. Отпакувајте ја датотеката ckeditor_3.6.4.zip со вашата апликација. папка ckeditor ќе биде создадена. наскоро, Сега само се направи повик во рамките на вашиот изворен код!

интеграција

На CKEditor е примена JavaScript. За да ја прочитате, само да се направи едноставна повик до него во тагови Раководител на вашиот изворен код. направи тоа, API CKEditor JavaScript веќе е подготвен за употреба. Не заборавајте да се прилагоди на пат кон датотека ckeditor.js во директориумот каде што се отпакува.

чекор 1Faça a chamada ao CKEditor
1
2
3
  <head>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
  </head>
чекор 2Crie um campo TEXTAREA
1
2
3
  <body>
    <textarea id="editor1" name="editor1">&lt;p&gt;Valor inicial.&lt;/p&gt;</textarea>
  </body>
чекор 3Diga qual TEXTAREA (id) será substituído pelo CKEditor
1
2
3
4
5
6
7
  <head>
    <script type="text/javascript">
      window.onload = функција()  {
        CKEDITOR.replace( 'editor1' );
      };
    </script>    
  </head>

наскоро, já funciona! Não acredita? Salve, dê lá oF5no navegador e veja você mesmoo código completo fica assim:

целосна код

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
  <head>
    <title>CKEditor</title>
    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <script type="text/javascript">
      window.onload = функција()  {
        CKEDITOR.replace( 'editor1' );
     };
    </script>
  </head>
  <body>
    <form action="request.php" method="post">
      <textarea id="editor1" name="editor1">&lt;p&gt;Valor inicial.&lt;/p&gt;</textarea>
      <input type="submit" value="Submit" />
    </форма>  
  </body>
</html>

јасно, agora você precisa fazer os ajustes conforme sua aplicação, a começar definindo o action do seu FORM, што укажува на страница, која ќе се добие и процесот на поднесени преку POST податоци.

Во написот завршува тука, но јас ќе го оставам уште неколку бисери за љубопитни:

совети

(1) Sem evento вчитан, com class =”ckeditor”

Ако му ја додели класа “ckeditor” на вашиот полето за текст, автоматски ќе се конвертира во CKEditor, без да се користи на скрипта наречена по настан “onload”, и едноставно:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
  <head>
    <title>CKEditor</title>
    <мета содржина="text/html; charset=utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
  </head>
  <body>
    <форма акција="request.php" метод="post">
      <textarea класа="ckeditor" id="editor1" name="editor1">&lt;p&gt;Valor inicial.&lt;/p&gt;</textarea>
      <Вид на влез="submit" вредност="Submit" />
    </форма>  
  </body>
</html>

(2) Размена на линија пауза <p> од <br />

Јас забележав два начина да се промени од страна на P BR кога teclamos ENTER. првиот, Тоа е да се постави на параметарот enterMode со вредност 2, од 1 = P, 2 = Br и 3 = ДИВ.

1
2
3
4
5
6
7
  <head>  
    <script type="text/javascript">
      window.onload = функција() {
        CKEDITOR.replace( 'editor1', {enterMode: број(2)} );
      };
    </script>
  </head>

или, отворање на датотеката config.js и да ги дефинира нешто како:

1
2
3
CKEDITOR.editorConfig = функција( config ) {
  config.enterMode = CKEDITOR.ENTER_BR;
};

во овој случај, да напишеш ENTER, Имаме опции:
CKEDITOR.ENTER_P - нов став P е создадена;
CKEDITOR.ENTER_BR - прелом со BR;
CKEDITOR.ENTER_DIV - нов блок е создадена со ДИВ.

Јас препорачувам блиски и отворете го пребарувачот да го види резултатот

оваа промена, затоа што може да се кеширани! Ако сè уште не функционира, исчистете го кешот на прелистувачот.

(3) Промена на боја на позадината на алатникот CKEditor

Како што забележав, Ние може да направи промени во нашата CKEditor доделување параметри директно ckeditor објект или преку датотека config.js. затоа,, Јас ќе се покаже само еден од начините:

1
2
3
4
5
6
7
  <head>  
    <script type="text/javascript">
      window.onload = функција() {
        CKEDITOR.replace( 'editor1', {Nordwestlicher: '# Ff0000 "} );
      };
    </script>
  </head>

(4) Комбинирање на параметрите за конфигурација CKEditor

конфигурација параметри CKEditor може да се комбинираат. Да се ​​знае за можностите, ги погледнеме API Config. пример:

1
2
3
4
5
6
7
8
9
10
11
12
  <head>  
    <script type="text/javascript">
      window.onload = функција() {
        CKEDITOR.replace( 'editor1', {  Nordwestlicher: "CCC",
                                        enterMode: CKEDITOR.ENTER_P,
                                        customConfig : 'Ckeditor / outroConfig.js',
                                        јазик: 'Pt-Br'        
                                      } 
                        );
      };
    </script>
  </head>

(5) Јазици поддржан од CKEditor

O CKEditor подржува 58 јазици, инклузивно или “pt-BR”. Види повеќе во Кориснички интерфејс јазици. Примерот погоре покажува неговата употреба.

(6) Приспособување на лентата

– основните

Вие не може да сакаат да им обезбеди на сите карактеристики на CKEditor. тогаш, зошто да не се оптимизира алатникот колку што е потребно? Еден пример оставајќи добра ОСНОВНИ уредник.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <head>  
    <script type="text/javascript">
      window.onload = функција() {
        CKEDITOR.replace( 'editor1', {
                           лентата со алатки:
                           [
                             { name: 'Basicstyles', предмети : [ "Задебелување",'Italic' ] },
                             { name: "Став", предмети : [ 'NumberedList','BulletedList' ] },
                             { name: "Алатки", предмети : [ 'Го зголеми',"-","За" ] }
                           ]}         
                         );
      };
    </script>
  </head>

– целосно

Подолу е поцелосен пример. Отстранете ги копчињата кои не сакате.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <head>  
    <script type="text/javascript">
      window.onload = функција() {
        CKEDITOR.replace( 'editor1', {
                           лентата со алатки: [
                             { name: "Документ", предмети : [ "Извор","-","Зачувај",'NewPage',"DocProps",'Преглед',"Печати","-","Шаблони" ] },
                             { name: "Таблата со исечоци", предмети : [ "Сече","Копирај",'Залепи',"Минатото текст",'PasteFromWord',"-",'Поништи','Повтори' ] },
                             { name: "Уредување", предмети : [ "Најди","Замени","-",'Селектирај се',"-","Проверка на правопис", 'Scayt' ] },
                             { name: "Форми", предмети : [ 'Форма', "Поле за чекирање", 'Radio', 'TextField', "Полето за текст ', 'Избери', 'Копче', 'ImageButton', 'HiddenField' ] },
                             '/',
                             { name: 'Basicstyles', предмети : [ "Задебелување",'Italic','Подвлечено',"Штрајк",'Индекс е',"На степен ',"-",'RemoveFormat' ] },
                             { name: "Став", предмети : [ 'NumberedList','BulletedList',"-",'Outdent',"Вовлекување ',"-",'Blockquote','CreateDiv', "-",'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock',"-",'BidiLtr','BidiRtl' ] },
                             { name: "Врски", предмети : [ "Врската",'Отспои',"Сидро" ] },
                             { name: "Внесете", предмети : [ "Image","Флеш","Маса",'HorizontalRule','Смешковците','SpecialChar','PageBreak','Iframe' ] },
                             '/',
                             { name: "Стилови", предмети : [ "Стилови ','Формат',"Фонт",'Големина на фонтот' ] },
                             { name: Боите, предмети : [ 'TextColor',"Bgcolor ' ] },
                             { name: "Алатки", предмети : [ 'Го зголеми', 'ShowBlocks',"-","За" ] }                            
                           ]}         
                         );
      }; 
    </script>
  </head>

– умерено

Ова е уште еден пример умерена, со бар само алатка, но со клучните карактеристики. Имајте на ум дека, инклузивно, тоа е можно да се комбинираат и да се утврди висината и ширината на уредникот.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<head>  
  <script type="text/javascript">
    window.onload = функција() {       
        CKEDITOR.replace( 'editor1', {
                           лентата со алатки:
                           [
                             { name: 'Basicstyles', предмети : [ "Задебелување",'Italic','Подвлечено' ] },
                             { name: "Став", предмети : [ 'NumberedList','BulletedList' ] },
                             { name: "Став", предмети : [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
                             { name: "Стилови", предмети : [ "Фонт",'Големина на фонтот' ] },
                             { name: Боите, предмети : [ 'TextColor',"Bgcolor ' ] },
                             { name: "Таблата со исечоци", предмети : [ "Сече","Копирај",'Залепи','PasteFromWord',"-",'Поништи','Повтори' ] },                             
                             { name: "Алатки", предмети : [ 'Го зголеми',"-","За" ] }
                           ],
                           ширина: "740px",
                           височина: "200px"}
                         );
    };
  </script>
</head>

(7) полето за текст (CKEditor) подложување на празни, за да се формира

Ако вашиот полето за текст / CKeditor појави бела (празна) при поднесување на формуларот, можете да го користите “трик” Јас создаде подолу, која всушност служи за да го привлечат вниманието на содржината на CKEditor и да игра на соодветните полето за текст. Ова е направено со повик на функција setCKEditorToTextarea() кога ќе кликнете на копчето за испраќање (достават копчето ou), onclick настан не нормално() копче.

1
2
3
4
5
6
<script type="text/javascript">
      функција setCKEditorToTextarea() {
        за(беше instanceName во CKEDITOR.случаи)
          CKEDITOR.случаи[instanceName].updateElement();            
      }
</script>

зборови инвеститорот

CKEditor е уредувач за текст да се користат во веб-страниците. Тоа е уредник WYSIWYG, што значи дека текстот се уредува од страна на корисникот ќе биде што е можно поблиску до објавено. Тој носи до веб заеднички карактеристики за уредување, наоѓаат на десктоп апликации за уредување, o como Microsoft Word е ОпенОфис. Откако CKEditor се лиценцирани под лиценцата “Отворен извор” и комерцијални, вие сте во можност да го користат во било која апликација. Ова е идеална уредник за програмери, создаден за да обезбеди лесно и моќни решенија за своите корисници.

други уредници

извори

За почеток тоа е! Види страницата на инвеститорот за повеќе детали.

Вкупен број на прегледи: 64675

29 осврти “Свртете го копчето Додај издавач (WYSIWYG | CKEditor)

  1. Многу кул пост, од страна на која што сакате ultilizar се однесува на темата 6, со оглед дека CKEditor зачувани во HTML вашата содржина е опишано во полето за текст мора да ги достави текст преку e-mail со HTML формат сепак треба salver во BD во txt формат истата. Имате било какви предлози можам да ultilizar? :)

  2. Роналдо рече:

    начин, Јас сум во развој на проектот и форма има две полиња полето за текст.
    Јас сум со користење CKEditor во двете.

    рекорд – лево

    CKEDITOR.replace( "expedienteEsq’ );
    CKEDITOR.add

    рекорд – право

    CKEDITOR.replace( "expedienteDir’ );
    CKEDITOR.add

    Уредникот се применува правилно. Но, кога процесот формира php фајл таа добива само првиот податоци од терен, а вториот ќе се испразни.

    Тоа е проблем со CKEditor? бидејќи јас не го користат за да се добијат податоци од две полиња обично
    .
    Се користи за структурата предложени од страна на многу CKeditor сајт.

    • Ола Роналдо, Го направив тест тука и немаше проблем. Направете го следново, се го кодот подолу, стави во датотека “teste.php” во рамките на вашиот сервер, но изолирано од своите апликација која е давање на проблемот. Ве молиме имајте предвид дека со поднесување на формуларот со два полето за текст (CKEditor), податоците нормално ќе бидат испратени.

      test.php датотека (Две симултани TextAreas)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      
      <html>
        <head>
          <title>CKEditor</title>
          <meta content="text/html; charset=utf-8" http-equiv="content-type" />
          <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
          <script type="text/javascript">
            window.onload = function()  {
              CKEDITOR.replace( 'editor1' );
              CKEDITOR.replace( 'Editor2' );
           };
          </script>
        </head>
        <body>
          <form action="teste.php" method="post">
            <textarea id="editor1" name="editor1">Почетна вредност 1</textarea>
            <textarea id="editor2" name="editor2">Почетна вредност од 2</textarea>
            <input type="submit" value="Submit" />
          </форма>  
        </body>
      </html>
      <?php ехо "Уредувач 1 ---> '.@$_REQUEST['editor1'].'<br />'; ?>
      <?php ехо "Уредувач 2 ---> '.@$_REQUEST['Editor2'].'<br />'; ?>
  3. Роналдо рече:

    Се обидов да го помине код, но мислам дека тоа не е објавена. Но, да се разбере она правото проблем? CKEditor употреба само еден од полето за текст испраќа податоци до друг е празна.

    • Добро, Мислам дека се разбере. Како што е прикажано погоре, Јас не го имаат истиот проблем. затоа,, скенира вашиот код, види дали може да има не повеќе од едно поле (влез) со исто име (name). прегратки!

      • Роналдо рече:

        Решив со своите врвот…. (6) полето за текст (CKEditor) подложување на празни, за да се формира

        Тоа беше доволно да се стави во функција постои и е во ред :) Оваа форма q VC се пренесува со користење на PHP право? Дури и на страниците кои се распоредени во PHP уредник користење на javascript.
        Ви благодариме за совети

        искористувајќи ја предноста на знаејќи q не е тема на пост, Јас програма долго време со Java и .NET и PHP помалку време and'm подигање датум стринг конверзија. Тоа не мора директна функција, како и за низа на податоци (strtotime) ниту? Јас q u знаат многу php q јас. Ако знаете ова апсење испраќа на мојот е-мејл ronaldodantas2@gmai.com

        Нема потреба да ја објави оваа коментар. Ви благодариме за совети.

  4. Ола Тејлор неговиот многу добар пост.

    Веќе инсталиран и сум со користење на работи добро. Имам сомнеж, на пример, во вашиот блог ќе влезе во кутии со жолта боја со скрипти. Како што тоа го правеше? А карактеристика на ckeditor?

    ви благодарам

  5. Фернандо рече:

    Како да се направи посебен карактер им овозможи на(ПРВА 1) e ª(ВТОР 2) БЕЗ НАС кликнете на алатката Вметнување посебен знак? Ми се допаѓа да го направите тоа за да влезат во сопствен ТАСТАТУРА НЕ отворен прозорец.

    • начин, Јас тестирани овде и само го направи конвенционален начин што работи, со други зборови,, држете го копчето Alt и тип на секвенца на броеви кои одговараат на саканиот симбол. пример: ALT + 166 = ª e ALT + 167 = º. зборуваше!

  6. Џејмс рече:

    добро утро, многу добро момче вашиот пост, Јас сум почнуваат да работат со javascript сега, и треба да се создаде текст едитор, Мислев на користење ckeditor, но да е тешко да се справи со тоа, напишете само сакаат сте имале , спаси, нови, вратите, римејк, ѓердан, копија, и избор на јазик кутија, само наместо да биде форма на пишување, ќе биде програмски јазици, а потоа ќе мора да се справи со добиените податоци, вид на како нормален изворниот код едитор, само на интернет, ако може да ми помогне.

  7. пријатели, Јас инсталирав добра, малку проблем, но она што јас сум се соочува е дека тоа што се преобразува специјални карактери во HTML кодови е од типот А А А и сакав да биде како што во мојата база на податоци, Таа има како?

    • Опа, дека може да има нешто со уредник кој го користите да се напише код. Обидете се со користење на еден блок на заеднички белешки и внесете го кодот на пример, со полно HTML, и да видиме дали проблемот останува.

      Обидете се, исто така, во собата политики кои му кажете на вашиот страница која charset собата да се користи (ISO-8859-1 ou UTF-8).

      1
      2
      3
      4
      5
      
      <body>
        <head>
            <мета charset="UTF-8">
        </head> 
      ...

      Ако користите PHP, charset постави на почетокот на кодот, пред се ':

      1
      
        <?php глава("Content-Type: text / html;  charset = ISO-8859-1",вистински) ?>

      или, обидете се да се третираат на содржината на барањата со помош на точни charset:

      1
      
        htmlentities( utf8_decode($_POST["Променлива"]) );

      Факт е дека проблемот што ги спомна не чини да се биде CKEditor, зошто јас го користат во различни апликации и немаат проблем со посебни знаци. исто така се тестираат на демо на веб-страницата на инвеститорот, и јас не гледам проблем. види тука: http://ckeditor.com/demo

  8. Marcio рече:

    Добар ден, јас се обидувам да го добиете текстот во полето за текст напишан преку javascript за да се испрати до базата на податоци, но не можам, Таа има некои метод за да добие текстот?
    ви благодарам

  9. добар ден.
    Јас план за користење на овој уред на лекарски рецепт – нешто sooo дури и едноставни.
    – Сакав да знам како да го поставите бар високо (каде што е функционалност) да се скрие (како мало копче што прави да исчезне по уредување на текст)
    – Исто така, како можам да одат далеку со долната лента (кој се појавува “body” и други ознаки) ?
    – Како можам да се направи текст кутија со на “височина” автоматски: тип, ако јас пропишува 10 Лекови кутија ќе продолжување додека јас сум пишување… Ако јас само напишете 1 кутија лек е во времето на тип I…

    • Здраво, жал, имаше некои намалувања (неуспеси) во вашиот код, така што само отстранување.

      Во овој поглед треба, тоа е сосема можно, но јас предлагам во потрага по професионалец кој ја разбира JavaScript за да ви помогнат.

      Јас само ќе кажам јажиња:

      – Скриј алатник (лентата со алатки):

      1
      2
      3
      
      беше уредник = CKEDITOR.во линија( 'editor1', {
          removePlugins: "Лента со алатки"
      } );

      – Сокриј подножјето (elementspath):
      http://ckeditor.com/forums/CKEditor-3.x/Disabling-Elements-Path-Display

      – Се зголеми висина автоматски (autogrow):
      http://sdk.ckeditor.com/samples/autogrow.html
      http://ckeditor.com/demo#auto-grow (демонстрација)

      пример:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      
      <html>
        <head>
          <title>CKEditor</title>
          <мета содржина="text/html; charset=utf-8" http-equiv="content-type" />
          <скрипта src="http:////cdn.ckeditor.com/4.5.3/basic/ckeditor.js"></script>
          <скрипта src="plugin.js"></script>  <!-- добие приклучок.js em http://ckeditor.com/addon/autogrow ->  
          <script type="text/javascript">
           window.onload = функција()  {
              CKEDITOR.replace( 'editor1', {             
                  removePlugins: 'Elementspath', 
                  removePlugins: "Лента со алатки",
                  extraPlugins: 'Autogrow',
                  autoGrow_minHeight: 70,
                  височина: '70px'
              });
           };
          </script>
        </head>
        <body>
          <форма акција="request.php" метод="post">
            <textarea id="editor1" name="editor1">првичниот текст.</textarea>
            <Вид на влез="submit" вредност="Submit" />
          </форма>  
        </body>
      </html>
  10. odilon рече:

    Јас не може да внесувате текст во базата на податоци правилно, бидејќи сè е чудно

    ex:
    <p>&aacute; &eacute; &iacute;asd</p>
    ќе се

  11. Клаудио рече:

    здраво Тејлор, Алал да му е на многу добро објаснето пост. Сакам да се користи овој уредувач со примена на PHP и сакате да знаете како да се создаде комбо (или копчето) на лентата со алатки за да се донесе на податоци BD да се вметне во текстот? со други зборови,, со кликнување на копчето ќе се отвори дијалог со резултат од пребарување во базата на податоци за да изберете рекорд.
    можете да?

  12. Glaydison Силва рече:

    Здраво, голем пост. Јас би можеле да укажуваат на нов пост? Ми треба помош за спроведување на копчето за да испратите слики, DEMO еднаков до каде може да оди до серверот и како. Не можам на сите.

  13. Ромул рече:

    Овој пост ми помогна многу, но сакав да знам дали треба да се земе ставот дека тој автоматски создава кога полето е пополнето.

    до.
    Ромул

Оставете Одговор

Вашата е-маил адреса нема да бидат објавени. Задолжителни полиња се означени со *