CKEDITOR configureren om inhoud niet in te wikkelen in & lt; P & GT; blokkeren?







< meta http-equiv = "oorsprong-trial" content = "A8FHS1NmdCwGqD9DwOicnHHY + y27kdWfxKa0YHSGDfv0CSpDKRHTQdQmZVPDUdaFWUsxdgVxlwAd6o + dhJykPA0AAACWeyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiQ29udmVyc2lvbk 1lYXN1cmVtZW50IiwiZXhwaXJ5IjoxNjQzMTU1MTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlLCJ1c2FnZSI6InN1YnNldCJ9 ">


Antwoord 1, autoriteit 100%

Ik gebruik ckeditorop mijn website om het voor gebruikers gemakkelijker te maken om HTML in te voeren.

De gegevens die ik terugkrijg van ckeditor zijn echter verpakt in <p></p>blokken. (Wat ik niet wil.)

Is er een configuratie-instelling die de editor dwingt om de tekst nergens in te laten lopen?


Antwoord 2, autoriteit 98%

Voeg het volgende toe aan uw config.js-bestand voor CKEditor:

config.enterMode = CKEDITOR.ENTER_BR;

Voorbeeld:

...
CKEDITOR.editorConfig = function (config)
{
    config.enterMode = CKEDITOR.ENTER_BR;
    ...
};

Details

De configuratie-instelling die dit gedrag regelt, is gebaseerd op wat u wilt dat er gebeurt wanneer de gebruiker op Enterdrukt.

Voor het geval iemand die nieuw is in het werken met HTML dit leest, ik geef een basisuitleg van de betrokken concepten en waarom een ​​tag moet worden ingevoegd wanneer de Enter-toets wordt ingedrukt.

We weten dat als we wat tekst in een HTML-document invoeren en vervolgens extra tekst op een nieuwe regel plaatsen, de browser de tekst niet als twee regels zal weergeven, eventuele regelterugloop zal negeren en meerdere spaties tussen tekens zal verdichten naar een enkele spatie.

De volgende HTML:

qwer
tyui

Wordt weergegeven als:

qwer tyui

De editor moet dus een HTML-tag invoegen om de browser te vertellen dat deze de tweede groep tekst op een nieuwe regel moet weergeven.

De configuratie-instelling die dit regelt is config.enterModeen biedt drie opties:

1 - Alinea invoegen

De standaardinstelling maakt elke keer dat op Enterwordt gedrukt een alinea-element:

config.enterMode = CKEDITOR.ENTER_P; // inserts `<p>...</p>`

2 - 'div' invoegen

Je kunt ervoor kiezen om een ​​div-element te maken in plaats van een alinea:

config.enterMode = CKEDITOR.ENTER_DIV; // inserts `<div></div>`

3 - Voeg pauze in (de instelling die u zoekt)

Als u er de voorkeur aan geeft de tekst nergens in te laten lopen, kunt u ervoor kiezen een regeleinde-tag in te voegen:

config.enterMode = CKEDITOR.ENTER_BR; // inserts `<br />`

De CKEditor-documentatie geeft aan dat het gebruik van de ENTER_BRinstelling wordt niet aanbevolen:

Opmerking: het wordt aanbevolen om de instelling CKEDITOR.ENTER_Pte gebruiken vanwege de semantische waarde en correctheid. De editor is geoptimaliseerd voor deze instelling.

Een andere gerelateerde instelling 'autoParagraph'

Er is een tweede instelling die een vergelijkbare situatie regelt –config.autoParagraph. Hoe het werkt, hangt af van de instelling config.enterModedie hierboven is besproken.

autoParagraphbepaalt of inline-elementen zoals spanworden ingepakt in het blokelement (pof div) gespecificeerd door de instelling enterMode. De standaard is om inline-elementen in te pakken, dus als u een span als dit invoert (als HTML):

<span>asdfg</span>

Het wordt als volgt verpakt in een p- of div-element:

<p><span>asdfg</span></p>

of dit:

<div><span>asdfg</span></div>

Het inline-element wordt niet ingepakt als u dit instelt op falseof als u enterModeinstelt op CKEDITOR.ENTER_BR.

De CKEditor-documentatie bevat deze opmerking over config.autoParagraph:

Opmerking: het wijzigen van de standaardwaarde kan onvoorspelbare bruikbaarheidsproblemen veroorzaken.

Nog meer instellingen

Er zijn nog drie instellingen die enigszins met dit onderwerp te maken hebben:

  • config.fillEmptyBlocks
  • config.forceEnterMode
  • config.ignoreEmptyParagraph

Referentie

Een volledige lijst van de beschikbare configuratie-opties vindt u hier:


Antwoord 3, autoriteit 33%

Ik weet dat ik een beetje laat ben met het spel, maar ik denk dat de optie die de OP zoekt is:

  config.autoParagraph = onwaar;

Antwoord 4, autoriteit 10%

Dit wordt hierboven perfect beantwoord, maar zoals gezegd zou je dit niet echt in de hoofdconfiguratie moeten veranderen.

De juiste manier om dit te doen is per .replace eigenlijk.

d.w.z.

   <form name="title" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>">
    <textarea id="editor2" name="editor2" rows="300"><?php echo $editor2;?></textarea>
    <textarea id="editor1" name="editor1" rows="1" cols="50" onfocus="this.value=''; this.onfocus=null;">Type Tab Title Here:</textarea>
    <input type="submit" value="Submit">
    </form>
<script type="text/javascript">  
    CKEDITOR.replace( 'editor2', { 
    enterMode: CKEDITOR.ENTER_BR, 
    on: {'instanceReady': function (evt) { evt.editor.execCommand('maximize');     }},
    });      
    </script>

Antwoord 5, autoriteit 10%

Een zeer eenvoudige oplossing zonder enige configuratiewijziging is om

. te gebruiken

  1. shift+entervoor een regeleinde <br>, en
  2. gewoon enterzou een nieuwe alinea veroorzaken.

Voordeel is dat u geen configuratiewijzigingen hoeft door te voeren. Bovendien heb je beide.


Antwoord 6, autoriteit 6%

Als u de tag <p>wilt uitsluiten en alleen basisbewerkingstools zoals Bold Italic superscript Subscript enz. in Ckeditor wilt, volgt u deze stappen:

Ik ben hier 100% zeker van, aangezien ik 36 uur continu heb onderzocht 🙂

Stap 1: voeg dit script toe aan uw PHP-webpagina

<script type="text/javascript">  
    CKEDITOR.replace( 'editor1', { 
    enterMode: CKEDITOR.ENTER_BR, 
    on: {'instanceReady': function (evt) { evt.editor.execCommand('');}},
    }); 
</script>

Stap 2: voeg id="editor2"en onfocus="this.value='';"toe aan je tekstgebied als volgt

<textarea id="editor2" name="AsYourWish" onfocus="this.value='';">

Stap 3: Zorg ervoor dat u Class="ckeditor"uit Textarea verwijdert.

Stap 4: Laad uw webpagina opnieuw als dit niet is gebeurd. Verwijder cache/geschiedenis en start pc/laptop opnieuw.

Stap 5: Het is klaar 🙂


Antwoord 7

Voor Django-ckeditorvoeg deze configuratie toe aan je settings.py-bestand:

ENTER_P    = 1 # default
ENTER_BR   = 2
ENTER_DIV  = 3
CKEDITOR_CONFIGS = {
    'default': {
        'enterMode': ENTER_BR,
    },
}

Antwoord 8

Als iemand hier komt met ckeditor 5, zoek dan niet naar deze optie. Ze hebben het verwijderd, ik ben dagenlang bezig geweest om dit uit te zoeken.

Ik ben bang dat je het niet leuk zult vinden, maar ga naar de modus BR is de root
van alle kwaad. Als we konden, hadden we het al lang uit CKEditor 4 verwijderd
geleden en we gaan het zeker niet implementeren in CKEditor 5.

Gerelateerde GitHub probleem

Other episodes