Can I save and upload text file to an iframe or openWYSIWYG?

Asked

Viewed 434 times

2

I really liked the code to save and load text on textarea of a post here. But I wonder if you have any similar code to do the same function with a iframe instead of textarea or that works properly in the textarea of openWYSIWYG. If anyone can help me would appreciate immensely.

You can see an example of what I’m trying to do in this link.

I tried to improvise the complete code below in openWYSIWYG which is textarea and also does not work. Does anyone know pq?

function saveTextAsFile() {
  var textToWrite = document.getElementById("inputTextToSave").value;
  ...
  function loadFileAsText() {
  var fileToLoad = document.getElementById("fileToLoad").files[0];
  var fileReader = new FileReader();  ...
javascript html iframe

  • Why do you want to do in an iframe exactly?

  • Please enter the code link you mention. Better yet, enter your own modified code. It’s just [Edit] the question.

  • Because I am trying to create a simple text editor in html and javascript to apply in school and with a textarea I could not make the commands font, size, font color and justify paragraphs work in firefox. I managed to download a code that performs this perfectly but in an iframe. I am kind of layman in the subject you know!!!

  • @Josépaulo If you need help to make this work on Ckeditor, I suggest asking a new question and posting the code you tried, including the HTML snippet.

1 answer

2

Sorry if my answer does not go directly to the requirement of the question, but I believe that the approach is not correct.

openWYSIWYG

I did some research on the openWYSIWYG and it seems that the project has not been maintained for some years. The first sign occurred when I tried to open in my Chrome and a popup came up saying that my browser is not supported. I tried to open in Firefox and images did not load.

I do not recommend using this editor.

iframe

Use a iframe to get formatting is not needed directly. Just use a WYSIWYG editor that works and do the work for you.

Tinymce

There are several editors, but what I have a little more familiarity with is the Tinymce.

See a example:

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>

<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>

To load and save the content being edited you can use the methods respectively getContent and setContent.

Ckeditor

Another popular alternative, but that I never got to use, is the Ckeditor.

A simple example (extracted from the documentation):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>A Simple Page with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="../ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
            <script>
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( 'editor1' );
            </script>
        </form>
    </body>
</html>

Browser other questions tagged javascript html iframe

You are not signed in. Login or sign up in order to post.