1

Estou fazendo um editor de texto em javascript e preciso criar atalhos no teclado para realizar algumas ações. para isso, eu estou usando CDEditorIframe.document.body.setAttribute('onkeypress', 'teste()'); O erro está onde eu tento colocar alguma função (como o teste()) para fazer o tratamento das teclas e todas as estruturas de decisão, onde o console retorna

 Uncaught ReferenceError: teste is not defined
    at HTMLBodyElement.onkeypress (about:blank:1)

function initIframe() {

  CDEditorIframe.document.body.style.wordWrap = 'break-word';
  CDEditorIframe.document.body.style.margin = 0;
  CDEditorIframe.document.designMode = 'on';

  CDEditorIframe.document.body.setAttribute('onkeypress', 'teste()');

}

function executar_comando(command, showWUI, value) {
  CDEditorIframe.document.execCommand(command, showWUI, value);
}

function teste() {
  console.log("união flasco");
}
.cd-editor {
  background-color: #d4d4d4;
  box-sizing: border-box;
  width: 100%;
  min-height: 600px;
  margin: 0;
  padding: 10px;
  border: 0;
  display: block;
  overflow: auto;
  border: 1px solid #999;
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.cores:hover {
  background-color: #d4d4d4;
}
<!DOCTYPE html>
<html>

<head>
  <title>Editor de texto</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="editor.css">

  <script src="https://kit.fontawesome.com/6d286bc5d2.js" crossorigin="anonymous"></script>
  <script src="main.js"></script>
</head>

<body style="background-color:#464642;" onload="initIframe();">

  <div class="wrapper">

    <div class="container-fluid" style="max-width: 75%; margin-top: 5%;padding: 0; background-color: #eaa3a3;">

      <nav class="nav justify-content-center">
        <div class="dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true">Fontes</a>
          <div class="dropdown-menu">
            <a class="dropdown-item cores" href="#" onclick="executar_comando('fontName', 'false', 'Times New Roman')">Padrão</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item cores" href="#" onclick="executar_comando('fontName', 'false', 'Arial')">Arial</a>
            <a class="dropdown-item cores" href="#" onclick="executar_comando('fontName', 'false', 'Calibri')">Calibri</a>
            <a class="dropdown-item cores" href="#" onclick="executar_comando('fontName', 'false', 'Comic Sans MS')">Comic Sans MS</a>
            <a class="dropdown-item cores" href="#" onclick="executar_comando('fontName', 'false', 'Impact')">Impact</a>
            <a class="dropdown-item cores" href="#" onclick="executar_comando('fontName', 'false', 'Trebuchet MS')">Trebuchet MS</a>
          </div>
        </div>

        <div class="dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Tamanho</a>
          <div class="dropdown-menu">
            <a class="dropdown-item cores" href="#" onclick="executar_comando('fontsize', 'false', '1')">1</a>
            <a class="dropdown-item cores" href="#" onclick="executar_comando('fontSize', 'false', '2')">2</a>
            <a class="dropdown-item cores" href="#" onclick="executar_comando('fontSize', 'false', '3')">3</a>
            <a class="dropdown-item cores" href="#" onclick="executar_comando('fontSize', 'false', '4')">4</a>
            <a class="dropdown-item cores" href="#" onclick="executar_comando('fontSize', 'false', '5')">5</a>
            <a class="dropdown-item cores" href="#" onclick="executar_comando('fontSize', 'false', '6')">6</a>
            <a class="dropdown-item cores" href="#" onclick="executar_comando('fontSize', 'false', '7')">7</a>
          </div>
        </div>

        <div class="border border-dark" style="margin-left: 2%; margin-right: 2%;"></div>

        <a class="nav-link" href="#" title="Negrito" onclick="executar_comando('bold', 'false', 'null');"><i class="fas fa-bold"></i></a>
        <a class="nav-link" href="#" title="Itálico" onclick="executar_comando('italic', 'false', 'null');"><i class="fas fa-italic"></i></a>
        <a class="nav-link" href="#" title="Sublinhado" onclick="executar_comando('underline', 'false', 'null');"><i class="fa fa-underline"></i></a>
        <a class="nav-link" href="#" title="Cortado" onclick="executar_comando('strikethrough', 'false', 'null');"><i class="fa fa-strikethrough"></i></a>


        <div class="border border-dark" style="margin-left: 2%; margin-right: 2%;"></div>


        <a class="nav-link" href="#" title="Alinhamento à esquerda" onclick="executar_comando('justifyLeft', 'false', 'null');"><i class="fas fa-align-left"></i></a>
        <a class="nav-link" href="#" title="Alinhamento ao centro" onclick="executar_comando('justifyCenter', 'false', 'null');"><i class="fas fa-align-center"></i></a>
        <a class="nav-link" href="#" title="Alinhamento justificado" onclick="executar_comando('justifyFull', 'false', 'null');"><i class="fas fa-align-justify"></i></a>
        <a class="nav-link" href="#" title="Alinhamento à direita" onclick="executar_comando('justifyRight', 'false', 'null');"><i class="fas fa-align-right"></i></a>

        <div class="border border-dark" style="margin-left: 2%; margin-right: 2%;"></div>


        <div class="dropdown ">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Cor da Fonte</a>
          <div class="dropdown-menu">
            <a class="dropdown-item cores" href="#" onclick="executar_comando('foreColor', 'false', 'black')" style="color: black;">Preto</a>
            <a class="dropdown-item cores" href="#" onclick="executar_comando('foreColor', 'false', 'blue')" style="color: blue;">Azul</a>
            <a class="dropdown-item cores" href="#" onclick="executar_comando('foreColor', 'false', 'red')" style="color: red;">Vermelho</a>
            <a class="dropdown-item cores" href="#" onclick="executar_comando('foreColor', 'false', 'pink')" style="color: pink;">Rosa</a>
            <a class="dropdown-item cores" href="#" onclick="executar_comando('foreColor', 'false', 'purple')" style="color: purple;">Roxo</a>
            <a class="dropdown-item cores" href="#" onclick="executar_comando('foreColor', 'false', 'green')" style="color: green;">Verde</a>
          </div>
        </div>



        <div class="border border-dark" style="margin-left: 2%; margin-right: 2%;"></div>


        <a class="nav-link" href="#" title="Lista" onclick="executar_comando('insertUnorderedList', 'false', 'null');"><i class="fa fa-list"></i></a>
        <a class="nav-link" href="#" title="Lista Ordenada" onclick="executar_comando('insertOrderedList', 'false', 'null');"><i class="fa fa-list-ol"></i></a>
        <a class="nav-link" href="#" title="Identar" onclick="executar_comando('indent', 'false', 'null');"><i class="fa fa-indent"></i></a>
        <a class="nav-link" href="#" title="Tirar Identação" onclick="executar_comando('outdent', 'false', 'null');"><i class="fa fa-outdent"></i></a>

        <div class="border border-dark" style="margin-left: 2%; margin-right: 2%;"></div>

        <a class="nav-link" href="#" title="Lista" onclick="executar_comando('insertImage', 'false', prompt('Insira a URL de uma imagem:', ''))"><i class=" fa fa-file-image-o"></i></a>


      </nav>

      <form>
        <div class="form-group">
          <iframe o class="cd-editor" name="CDEditorIframe" id="CDEditorIframe"></iframe>
        </div>
      </form>

    </div>

  </div>


  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


</body>

</html>

1 Resposta 1

2

A função teste() está no documento principal onde está o iframe, e como você colocou o evento que chama a função no body do iframe, o evento não acha a função, por isso dá esse erro, porque a função teste() não existe dentro no iframe.

Para chamar a função a partir do iframe, você deve usar window.parent, que referencia o documento-pai do iframe:

CDEditorIframe.document.body.setAttribute('onkeypress', 'window.parent.teste()');

Só lembrando que isso só vai funcionar se a função teste() tiver escopo global no documento-pai.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .