Question

我为Django创建了一个自定义的WYSIWIG编辑器。我的表单可以在所有其他字段上使用，但是我不太清楚如何将相关字段连接到表单。我正在获取必填字段，但我似乎无法弄清楚如何将该字段与WYSIWIG编辑器关联。这是我的代码：

HTML

<!DOCTYPE html>
{% extends "base1.html" %}
<title>{% block title %} Create Information {% endblock %}</title>
{% block body_block %}
<form method="POST" enctype="multipart/form-data" autocomplete=off>
{% csrf_token %}   
  <style>
   div#textEditor{ margin: 0 auto; width: 750px; height: 300px; }
   div#theRibbon{ border-bottom: none; padding: 10px; background-color: rgb(40,110,89); color: white; border-radius: 8px 8px 0px 0px; }
   div#richTextArea{ border: 2px solid rgb(40,110,89); height: 100%; width: 746px; background-color: white; }
   iframe#theWYSIWYG{ height: 100%; width: 100%; }
   div#theRibbon > button { color: white; border: none; outline: none; background-color: transparent; cursor: pointer; }
   div#theRibbon > button:hover{ background-color: rgb(20,90,70); transition: all 0.3s linear 0s; }
   input[type="color"]{ border: none; outline: none; background-color: transparent; }
   </style>

   <script> window.addEventListener("load",function(){ var editor = theWYSIWYG.document; editor.designMode = "on"; boldButton.addEventListener("click", function(){ editor.execCommand("Bold", false, null); },false);
   italicButton.addEventListener("click", function(){ editor.execCommand("Italic", false, null); },false);
   supButton.addEventListener("click", function(){ editor.execCommand("Superscript", false, null); },false);
   subButton.addEventListener("click", function(){ editor.execCommand("Subscript", false, null); },false);
   strikeButton.addEventListener("click", function(){ editor.execCommand("Strikethrough", false, null); },false);
   orderedListButton.addEventListener("click", function(){ editor.execCommand("InsertOrderedList", false, "newOL" + Math.round(Math.random() * 1000)); },false);
   unorderedListButton.addEventListener("click", function(){ editor.execCommand("InsertUnorderedList", false, "newOL" + Math.round(Math.random() * 1000)); },false);
   fontColorButton.addEventListener("change", function(event){ editor.execCommand("ForeColor", false, event.target.value); },false);
   highlightButton.addEventListener("change", function(event){ editor.execCommand("BackColor", false, event.target.value); },false);
   fontChanger.addEventListener("change", function(event){ editor.execCommand("FontName", false, event.target.value); },false);
   fontSizeChanger.addEventListener("change",function(event){ editor.execCommand("FontSize",false,event.target.value); },false);
   linkButton.addEventListener("click", function(){ var url = prompt("Enter a URL", "http://"); editor.execCommand("CreateLink", false, url); }, false);
   unLinkButton.addEventListener("click",function(){ editor.execCommand("UnLink",false,null); },false);
   undoButton.addEventListener("click",function(){ editor.execCommand("undo",false,null); },false);
   redoButton.addEventListener("click",function(){ editor.execCommand("redo",false,null); },false);
   submitButton.addEventListener("click",function(){ richText.value = theWYSIWYG.document.body.innerHTML; theForm.submit(); },false); },false);
 </script>

<div class="box3">

  <h2 class="title">Create New Information</h2>

    <label class="label6">New Information</label>

    <div id="textEditor">
      <div id="theRibbon">
        <button id="boldButton" title="Bold"><b>B</b></button>
        <button id="italicButton" title="Italic"><em>I</em></button>
        <button id="supButton" title="Superscript">X<sup>2</sup></button>
        <button id="subButton" title="Subscript">X<sub>2</sub></button>
        <button id="strikeButton" title="Strikethrough"><s>abc</s></button>
        <button id="orderedListButton" title="Numbered list">(i)</button>
        <button id="unorderedListButton" title="Bulleted list"">&bull;</button>
         <input type="color" id="fontColorButton" title="Change Font Color">
         <input type="color" id="highlightButton" title="Highlight Text">
         <select id="fontChanger">
           <option value="Times New Roman">Times New Roman</option>
           <option value="Consolas">Consolas</option>
           <option value="Tahoma">Tahoma</option>
           <option value="monospace">Monospace</option>
           <option value="cursive">Cursive</option>
           <option value="sans-serif">Sans-Serif</option>
           <option value="Calibri">Calibri</option>
         </select>
         <select id="fontSizeChanger">
           <script> for(var i = 1; i < 10; i++){ document.write("<option value='"+i+"'>"+i+"</option>"); }
           </script>
         </select>
         <script> var fonts = document.querySelectorAll("select#fontChanger > option"); for(var i = 0; i < fonts.length; i++){ fonts[i].style.fontFamily = fonts[i].value; }
         </script>         

         <button id="linkButton" title="Create Link">Link</button>
         <button id="unLinkButton" title="Remove Link">Unlink</button>
         <button id="undoButton" title="Undo the previous action">&larr;</button>
         <button id="redoButton" title="Redo">&rarr;</button>
       </div>

       <div id="richTextArea">
           <iframe id="theWYSIWYG" name="theWYSIWYG" frameborder="0">   </iframe>
           <textarea name="newinformation"style="display: none;">{{ form.newinformation }}</textarea>

        </div>
      </div>
</form>

我在我的文本区域中包含了{{form.newinformation}}变量，但是它似乎没有正确地连接到我的表单，因为即使在WYSIWIG中输入数据后，我仍然会收到一条需要新信息的错误消息。编辑。预先感谢您的任何想法。

无法将Django连接到自定义WYSIWIG编辑器

0 个答案: