Member Avatar for davy_yg

Hello,

I am looking for ckeditor that's able to upload image from computer directly without url - unfortunately there is license on it. What about tinymce also works the same way.

I do not know how to make ckeditor my own version that's able to upload file directly from computer. Is there any? Or is anyone sells ckeditor (or something like that that's able to upload image directly) that I can use freely for all of my websites?

(I do not want the one that I have to pay license for each website that I install).

Regards,
Davy

  • 3 Contributors
  • 9 Replies
  • 303 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by davy_yg
Member Avatar for DaveAmour

Hi

I use TinyMCE and its great and easy to use.

Not sure what you mean by "able to upload image from computer directly without url"?

Can you clarify that point please?

Member Avatar for davy_yg

Normally if you want to insert image into the article (by using the free version), you have to type the image url.

I would like to be able to insert image just by pressing the browse button, then select the image from the computer.

Is there any free version for that? If, the paid version - I prefer one time purchase I can use for all websites.

Is there any?

Member Avatar for diafol

CKEditor image uplaod works by uploading a local file to your server. You specify the upload directory in the settings. The url is then passed back to the image url tab - all ready to be pasted into your article. Can't see what the problem is - it does all the work for you. Here's a walkthrough...

Go to Upload tab after pressing image icon on editor:

ckeditor-imagebox.PNG

Upload the image of your choice and click Send To Server. You will then be redirected to the first tab, where you'll get a preview. Change the html properties/attributes to your liking and click the green OK button:

ckeditor-imagebox2.PNG

You should now see your image in the editor, thus:

ckeditor-imagebox3.PNG

Member Avatar for diafol

But, I notice you're mentioning licences. Well, if in doubt contact them. If you're making money on the back of somebody else's software, then it's not unreasonable to pay for a licence. Their licences are very flexible though, but the paid-for ones are very pricey I agree.

There are new alternativs to the big 2 (CK and Tiny):

https://editor.froala.com/pricing

$79 for unlimited sites. Not bad if you're a webdev making a lot of use from wysiwyg html editors.

Edited by diafol
Member Avatar for davy_yg

Looks like I am almost getting the solution. still experimenting with the free version.

Edited by davy_yg
Member Avatar for davy_yg

Looks like I am almost getting the solution. still experimenting with the free version.

It's seems all good, except that it uploads the image to it's own server. Therefore I must keep my computer online in order to see the image.

Member Avatar for davy_yg

input_berita_static.php

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <meta charset="UTF-8" />
    <title>Portal Admin Dashboard | Dashboard </title>
     <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
     <!--[if IE]>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <![endif]-->
    <!-- GLOBAL STYLES -->
    <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="assets/css/main.css" />
    <link rel="stylesheet" href="assets/css/theme.css" />
    <link rel="stylesheet" href="assets/css/MoneAdmin.css" />
    <link rel="stylesheet" href="assets/plugins/Font-Awesome/css/font-awesome.css" />
    <!--END GLOBAL STYLES -->
    <!-- INSERT FROALA -->
    <link href="../css2/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="../css2/froala_editor.min.css" rel="stylesheet" type="text/css">
    <link href="../css2/froala_style.min.css" rel="stylesheet" type="text/css">
    <link href="../css2/themes/gray.css" rel="stylesheet" type="text/css">

    <!-- PAGE LEVEL STYLES -->
    <link href="assets/css/layout2.css" rel="stylesheet" />
       <link href="assets/plugins/flot/examples/examples.css" rel="stylesheet" />
       <link rel="stylesheet" href="assets/plugins/timeline/timeline.css" />
    <!-- END PAGE LEVEL  STYLES -->
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <script src="../ckeditor/ckeditor.js"></script>
<script>
  $(function() {
    $('.selector')
      .editable({
        // Set the image upload parameter.
        imageUploadParam: 'file',

        // Set the image upload URL.
        imageUploadURL: '/upload_image',

        // Additional upload params.
        imageUploadParams: {id: 'my_editor'}
      })
      .on('editable.imageError', function (e, editor, error) {
        // Custom error message returned from the server.
        if (error.code == 0) { ... }

        // Bad link.
        else if (error.code == 1) { ... }

        // No link in upload response.
        else if (error.code == 2) { ... }

        // Error during image upload.
        else if (error.code == 3) { ... }

        // Parsing response failed.
        else if (error.code == 4) { ... }

        // Image too large.
        else if (error.code == 5) { ... }

        // Invalid image type.
        else if (error.code == 6) { ... }

        // Image can be uploaded only to same domain in IE 8 and IE 9.
        else if (error.code == 7) { ... }
      });
  });
</script>
</head>

    <!-- END HEAD -->

    <!-- BEGIN BODY -->
<body class="padTop53 " >

    <!-- MAIN WRAPPER -->
    <div id="wrap" >


        <!-- HEADER SECTION -->
        <div id="top">

            <nav class="navbar navbar-inverse navbar-fixed-top " style="padding-top: 10px;">
                <a data-original-title="Show/Hide Menu" data-placement="bottom" data-tooltip="tooltip" class="accordion-toggle btn btn-primary btn-sm visible-xs" data-toggle="collapse" href="#menu" id="menu-toggle">
                    <i class="icon-align-justify"></i>
                </a>
                <!-- LOGO SECTION -->
                <header class="navbar-header">

                    <a href="index.html" class="navbar-brand">
                    <img src="assets/img/logo.png" alt="" />

                        </a>
                </header>
                <!-- END LOGO SECTION -->
                <ul class="nav navbar-top-links navbar-right">






                </ul>

            </nav>

        </div>
        <!-- END HEADER SECTION -->



        <!-- MENU SECTION -->
       <div id="left" >
            <div class="media user-media well-small"> <!--
                <a class="user-link" href="#">
                    <img class="media-object img-thumbnail user-img" alt="User Picture" src="assets/img/user.gif" />
                </a>
                <br />
                <!--<div class="media-body">
                    <h5 class="media-heading"> Joe Romlin</h5>
                    <ul class="list-unstyled user-info">

                        <li>
                             <a class="btn btn-success btn-xs btn-circle" style="width: 10px;height: 12px;"></a> Online

                        </li>

                    </ul>
                </div> -->
                <br />
            </div>

            <ul id="menu" class="collapse">


                <li class="panel active">
                    <a href="index.php" >
                        <i class="icon-table"></i> Dashboard


                    </a>                   
                </li>



                <li class="panel ">
                    <a href="#" data-parent="#menu" data-toggle="collapse" class="accordion-toggle" data-target="#component-nav">



                <?php include("adminnav.php"); ?>

            </ul>

        </div>
        <!--END MENU SECTION -->



        <!--PAGE CONTENT -->
        <div id="content">

            <div class="inner" style="min-height: 700px;">
                <div class="row"> 
                    <div class="col-lg-12">
                        <h1> Manage Content </h1>
                    </div>
                </div>
                  <hr />

                <!-- Insert New -->

<!-- Insert New -->

<div id="menu">

  <center>

<?php

    echo "<br><br><br>";

    include('../includes/koneksi.php');

    $post_id = isset($_POST['post_id']) ? $_POST['post_id'] : '';  
    $confirmation = isset($_POST['confirmation']) ? $_POST['confirmation'] : '';  
    $kategori = isset($_POST['kategori']) ? $_POST['kategori'] : ''; 
    $news = isset($_POST['news']) ? $_POST['news'] : '';
    $judul = isset($_POST['judul']) ? $_POST['judul'] : ''; 
    $page = isset($_POST['page']) ? $_POST['page'] : '';

    //Simpan berita 
    if (isset($_POST['ok'])){

        if (empty($_GET['post_id']))
            {
            $sqlstr = "INSERT INTO static_page(page, judul, isi_berita) VALUES('".$page."','".$judul."','".$news."')";
            }
        else
            {
            $sqlstr = "UPDATE static_page SET page='".$page."', judul='".$judul."', isi_berita='".$news."' WHERE post_id=".$_GET['post_id'];
            }
        $result = mysql_query($sqlstr) or die(mysql_error());

        //Jika mode edit, maka tidak akan dikirimkan konfirmasi kepada subscriber
        //if (empty($_REQUEST['id']))   kirimEmail($idKategori, $judul, $news);
        $confirmation = ($result) ? "Data has been saved." : "Fail to save data.";  
    }

    //Load berita (I place this under save so that it doesn't place the old data to save)
    if (!empty($_GET['post_id'])){
        $result = mysql_query("SELECT * FROM static_page WHERE post_id =".$_GET['post_id']) or die(mysql_error());
        $data = mysql_fetch_array($result);
        $post_id = $data['post_id'];
        $page = $data['page'];
        $judul = $data['judul'];
        $news = $data['isi_berita'];

    }
    else {
    //echo "unable to select data".'<br>';
    //echo "post_id is empty";
    }
    ?>
    <div align="center"><br><br>
        <div style="width:800px;text-align:left;">
        <?php echo $confirmation;?>
        <form method="post" action="<?php echo $_SERVER['PHP_SELF'] .'?post_id='. $post_id; ?>">
                 <!--<input type="hidden" name="id" value="<?php// echo $post_id; ?>"/>-->
            <table>
                <tr>
                    <td>Page <font color="red">*</font></td>                
                    <td><input type="text" size="50px" name="page" value="<?php echo $page; ?>" readonly></td>
                </tr>
                <tr>
                    <td>Title</td>
                    <td><input type="text" size="50px" name="judul" value="<?php echo $judul; ?>"/></td>
                </tr>
                <tr>
                    <td valign="top">Content&nbsp;&nbsp;</td>             
                    <td>

                        <textarea cols="60" rows="10" id="edit" name="news"><?php echo $news;?></textarea>

                    </td>
                </tr>
                <tr>             
                    <td></td>
                    <td><br><input type="submit" name="ok" value="Save" class="abutton"/></td>
              </tr>

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

                <!-- End Insert -->      

            </div>

        </div>
        <!--END PAGE CONTENT -->


    </div>

    <!--END MAIN WRAPPER -->

    <!-- FOOTER -->
    <div id="footer">
        <p>&copy;  binarytheme &nbsp;2014 &nbsp;</p>
    </div>
    <!--END FOOTER -->


    <!-- GLOBAL SCRIPTS -->
    <script src="assets/plugins/jquery-2.0.3.min.js"></script>
     <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/plugins/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    <!-- END GLOBAL SCRIPTS -->

    <!-- PAGE LEVEL SCRIPTS -->
    <script src="assets/plugins/flot/jquery.flot.js"></script>
    <script src="assets/plugins/flot/jquery.flot.resize.js"></script>
    <script src="assets/plugins/flot/jquery.flot.time.js"></script>
     <script  src="assets/plugins/flot/jquery.flot.stack.js"></script>
    <script src="assets/js/for_index.js"></script>

    <!-- END PAGE LEVEL SCRIPTS -->
  <script src="../js2/libs/jquery-1.11.1.min.js"></script>
  <script src="../js2/froala_editor.min.js"></script>
  <!--[if lt IE 9]>
    <script src="../js/froala_editor_ie8.min.js"></script>
  <![endif]-->
  <script src="../js2/plugins/tables.min.js"></script>
  <script src="../js2/plugins/urls.min.js"></script>
  <script src="../js2/plugins/lists.min.js"></script>
  <script src="../js2/plugins/colors.min.js"></script>
  <script src="../js2/plugins/font_family.min.js"></script>
  <script src="../js2/plugins/font_size.min.js"></script>
  <script src="../js2/plugins/block_styles.min.js"></script>
  <script src="../js2/plugins/video.min.js"></script>


<script>
      $(function(){
          $('#edit').editable({inlineMode: false, theme: 'gray'})
      });
  </script>

</body>

    <!-- END BODY -->
</html>

Someone mentions:

https://editor.froala.com/concepts/image-upload
https://editor.froala.com/server-integrations/php-image-upload

I trying to make the server able to store image on the file folder, any clue how?

Member Avatar for diafol

Just dumping 300-odd lines of mixed markup and php and js is just not right. We've mentioned this before davy. Please. Cut out all the flannel and just post the RELEVANT code. Others may look at the code you've dumped, I certainly won't.

But a quick scan tells me it's loading a million different assets. Dog knows how many http calls you're making.

The links you supply provide all the info you need to get this working. I don't know what you want from us - to type it out again?

Edited by diafol
Member Avatar for davy_yg

Sorry, I did this on purpose. To show the froala tech support the code, who knows they might help me with this.

Well, it seems like I have to purchase the product. May be you can help how to utilize the js script above so that I can store the image file in my server?

This is the text area that have WYSIWYG:

<script>
    $(function() {
    $('.selector')
    .editable({
    // Set the image upload parameter.
    imageUploadParam: 'file',
    // Set the image upload URL.
    imageUploadURL: '/upload_image',
    // Additional upload params.
    imageUploadParams: {id: 'my_editor'}
    })
    .on('editable.imageError', function (e, editor, error) {
    // Custom error message returned from the server.
    if (error.code == 0) { ... }
    // Bad link.
    else if (error.code == 1) { ... }
    // No link in upload response.
    else if (error.code == 2) { ... }
    // Error during image upload.
    else if (error.code == 3) { ... }
    // Parsing response failed.
    else if (error.code == 4) { ... }
    // Image too large.
    else if (error.code == 5) { ... }
    // Invalid image type.
    else if (error.code == 6) { ... }
    // Image can be uploaded only to same domain in IE 8 and IE 9.
    else if (error.code == 7) { ... }
    });
    });
    </script>

// scroll down...

 <tr>
<td valign="top">Content&nbsp;&nbsp;</td>
<td>
<textarea cols="60" rows="10" id="edit" name="news"><?php echo $news;?></textarea>
</td>
</tr>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.