Søg
Avatar billede mads1987 Nybegynder
27. marts 2004 - 11:59 Der er 11 kommentarer og
1 løsning

<p> til <br>

Jeg leger med mit eget ille redigerings værktøj. I kan se det her: http://www.larsolesen.dk/htmleditor/editor.php , det er dog ikke min side og jeg har fjernet en del funktioner.

Problemet er at når man trykker "enter" så hopper den 2 linier ned (skriver <p>) Jeg ville gerne have den til kun at springe en enkelt (altså <br>)

Hvordan kan det lade sig gøre?

Her er min kode:

<script type="text/javascript">
  var viewMode = 1; // WYSIWYG
  function Init()
  {
    iView.document.designMode = 'On';
  }
 
  function selOn(ctrl)
  {
    ctrl.style.borderColor = '#000000';
    ctrl.style.backgroundColor = '#B5BED6';
    ctrl.style.cursor = 'hand';   
  }
 
  function selOff(ctrl)
  {
    ctrl.style.borderColor = '#D6D3CE'; 
    ctrl.style.backgroundColor = '#D6D3CE';
  }
 
  function selDown(ctrl)
  {
    ctrl.style.backgroundColor = '#8492B5';
  }
 
  function selUp(ctrl)
  {
    ctrl.style.backgroundColor = '#B5BED6';
  }
   
  function doBold()
  {
    iView.document.execCommand('bold', false, null);
  }

  function doItalic()
  {
    iView.document.execCommand('italic', false, null);
  }

  function doUnderline()
  {
    iView.document.execCommand('underline', false, null);
  }
 
  function doOrdList()
  {
    iView.document.execCommand('insertorderedlist', false, null);
  }

  function doBulList()
  {
    iView.document.execCommand('insertunorderedlist', false, null);
  }
 

  function doLink()
  {
    iView.document.execCommand('createlink');
  }
 

function ProcessNews() {
// Assign the HTML code to a hidden form variable
var htmlCode = iView.document.body.innerHTML;
document.frmNews.newsPost.value = htmlCode;

if(document.frmNews.newsPost.value == '')
{
alert('Please enter some content for this news post.');
iView.focus();
return false;
}
return true;
}



</script>
<style>

  .butClass
  {   
    border: 1px solid;
    border-color: #D6D3CE;
  }
 
  .tdClass
  {
    padding-left: 3px;
    padding-top:3px;
  }

</style>

<body onLoad="Init()">

    <table id="tblCtrls" width="415px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">   
    <tr>
       
    <td class="tdClass"> <p><img alt="Bold" class="butClass" src="bold.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBold()">
        <img alt="Italic" class="butClass" src="italic.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doItalic()">
        <img alt="Underline" class="butClass" src="underline.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doUnderline()">
        <img alt="Ordered List" class="butClass" src="ordlist.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doOrdList()">
        <img alt="Bulleted List" class="butClass" src="bullist.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBulList()">
        <img alt="Hyperlink" class="butClass" src="link.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doLink()">
      </p>
      </td>
    </tr>
    </table>

    <iframe id="iView" style="width: 415px; height:205px" ></iframe>
   
<form onSubmit="return ProcessNews()" name="frmNews" action="editor.php" method="post">

<input type="hidden" name="action" value="addNews">
<input type="hidden" name="newsPost" value="">
  <input type="submit" name="Submit" value="Submit">
</form>
Avatar billede olebole Juniormester
27. marts 2004 - 13:48 #1
<ole>

Søg på 'HTML Editor', 'Editor' o.lign. i E's søgefunktion. Der ligger i bunkevis af eksempler på, hvad du kan gøre.
En ting, du skal huske på: Hvis du skal have lister (f.eks: <ul></ul>), skal du bruge <p></p> - så det er ikke altid smart at fjerne dem 'on-the-fly', mens der skrives.
I stedet kan du sætte styles for <p></p> i det dokument, du editerer og så først skifte <p></p> ud med <br>, når du gemmer editeringen.

/mvh
</bole>
Avatar billede mads1987 Nybegynder
27. marts 2004 - 17:27 #2
Kan nogen evt. give mig et eksempel på en simpelt (dette er meegt vigtigt) editor. Med samme muligheder som denne, hvor den ikke laver samme trick med hensyn til <p> og <br>
Avatar billede olebole Juniormester
27. marts 2004 - 17:42 #3
Det er en indbygget ting i MS' DHTML-Editor, som man selv skal fiddle sig rundt om. Det samme gør sig gældende de steder (standalone applikationer), hvor MS selv bruger den - Word, f.eks.
Man kan som bruger anvende 'Shift+Enter', men det er jo ikke så spændende  :o|

Har du prøvet en søgning à la:
  http://www.eksperten.dk/spm/Programmering/DHTML/?sort=&order=DESC&status_1=on&status_2=on&status_3=on&spm_creator=&spm_part=&spm_answer=&find=wysiwyg&engine=exp

eller:
  http://www.eksperten.dk/spm/Programmering/DHTML/?sort=&order=DESC&status_1=on&status_2=on&status_3=on&spm_creator=&spm_part=&spm_answer=&find=DHTML+editor&engine=exp

så vile du finde oceaner af viden ... f.eks. diskuteres netop dit problem her (det tog ca. 25 sekunder at finde):
  http://www.eksperten.dk/spm/341700
Avatar billede cautoo Nybegynder
27. marts 2004 - 21:09 #4
Måske mads1987 har lyst at læse min artikkel, om hvordan man får svar på sit spg., sparer point, og dermed slipper på andre folks kommentarer om, "Det to ca. 10 sek at ..."
http://www.eksperten.dk/artikler/112 ...
Avatar billede mads1987 Nybegynder
27. marts 2004 - 21:46 #5
Tak for din kommentar cautoo.

Jeg har lige præcis søgt en masse omkring HTML editore, fandt blandt andet den editor jeg bruger her: http://www.eksperten.dk/spm/354198.

Men synes ikke rigtig nogen steder at få svar på mit spørgsmål.

Og jeg må jo bare konkludere at det nok er smartes at lade det blive som det er.
Jeg er stadig villig til at give mine 100 point, hvis der er en der kan give mig en henvisning til en simpel men pæn editor.
Avatar billede olebole Juniormester
27. marts 2004 - 23:39 #6
At rode med MS' HTML-Editor uden JavaScript-kendskab er ikke synderlig realistisk, så får du ikke et tilstrækkeligt svar i http://www.eksperten.dk/spm/341700 bliver det nok lidt svært.
I det spm. bliver løsningen skåret temmelig klart ud i flere versioner - alt efter, hvad du selv ønsker.
Avatar billede mads1987 Nybegynder
28. marts 2004 - 23:29 #7
Ja det lykkedes jo ikke helt, men jeg er villig til at give dig nogle point, vil du være sød at ligge et svar olebole.
Avatar billede mads1987 Nybegynder
04. april 2004 - 18:40 #8
Olebole?
Avatar billede olebole Juniormester
04. april 2004 - 23:10 #9
Hvis du bruger editoren ovenfor, ændrer du iframe'en til:
  <iframe name="iView" id="iView" onreadystatechange="initLoadedDoc(this)" style="width: 415px; height:205px"></iframe>

onreadystatechange-event'en fyrer af flere gange under side-load. En iframe loader 'about:blank' ved 'fødslen' og dette trigger event'en. Laver du senere en funktion, der kan loade filer til editering, fyrer den også af ved side-load.

I toppen af dit script erklærer du en ekstra global variabel og sætter den til 'true' lige efter, designMode er aktiveret (den handling fyrer nemlig også onreadystatechange-event'en af - og det ønsker vi ikke at reagere på):
  var viewMode = 1; // WYSIWYG
  var inEditMode = false;
  function Init()
  {
    iView.document.designMode = 'On';
    inEditMode = true;
  }

Funktionen, der kaldes på onreadystatechange, checker for, om dokumentet er færdig-loaded og opretter et derefter en reference til en css-fil i dokumentet i iframe'en. Den tilføjer du dit script:
function initLoadedDoc(fr) {
    if ( inEditMode && fr.readyState=="complete" ) {
        iView.document.createStyleSheet( "edit.css" );
    }
}

I 'edit.css' står der kort og godt:
p {
    margin: 0px;
}

På serveren kan du så skrive noget à la:
$np = preg_replace( "/<p[^>]*>/i", "<br>", $_POST["newsPost"] );
$np = preg_replace( "/<\/p>/i", "" , $np );

/mvh
Avatar billede olebole Juniormester
04. april 2004 - 23:10 #10
:)
Avatar billede olebole Juniormester
04. april 2004 - 23:15 #11
... måske nok hellere:

$np = preg_replace( "/<\/p>/i", "<br>", $_POST["newsPost"] );
$np = preg_replace( "/<p[^>]*>/i", "" , $np );
Avatar billede mads1987 Nybegynder
10. april 2004 - 13:51 #12
Tak.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 11:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
I går 10:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
12/0818:26 Hvilken type mus Af mort1 i PC
11/0813:21 ms Forms Af leahcim i Andet software
White papers
Flere white papers »