Rectangle 27 2

I implemented something similar using YUI Rich Text Editor. Considering my requirements, dealing with non-editable elements inside an iFrame was a hassle. What I ended up doing is this: whenever the user inserts a custom item using the toolbar (in my case it was a custom gallery with embeddable videos, etc.), I'd "split" the content of the editor at the cursor and insert a gallery "between" the editors. You end up with 2 actual editors and a gallery:

It required a bit of work to manage and render all of the objects and it had its downsides. But with proper CSS and some JS it could be made to look like and work like it's part of the editor.

javascript - WYSIWYG editor for non-editable embeddable objects - Stac...

javascript tinymce wysiwyg
Rectangle 27 25

There's probably a better way to accomplish what you're going for... but a very simple solution that comes to mind is to just add this to your stylesheets:

.note-group-select-from-files {
  display: none;
}

It works perfectly to leave just the image url input, and accomplishes what you're going for unless someone were to inspect element and discover that the upload element still exists with display none:

Edit : I took a look at the Summernote source code, and it looks like the above solution is actually a good way to go. There's currently no api to disable just the file upload button, let alone do so while leaving the img url input intact. You could always add it and open a pull request, of course.

var body = '<div class="form-group note-group-select-from-files">' +
               '<label>' + lang.image.selectFromFiles + '</label>' +
               '<input class="note-image-input form-control" type="file" name="files" accept="image/*" multiple="multiple" />' +
               imageLimitation +
             '</div>' +
             '<div class="form-group" style="overflow:auto;">' +
               '<label>' + lang.image.url + '</label>' +
               '<input class="note-image-url form-control col-md-12" type="text" />' +
             '</div>';

javascript - Disable image upload in Summernote - Stack Overflow

javascript jquery wysiwyg summernote
Rectangle 27 39

After more research I found the following. The functionality for building a rich-text-editor is already implemented at the browser. IE was the first to create such an API and Firefox replicated it.

The main point is that the javascript object "document" has a property called designMode which can be set to "on". This converts all the page to to a textarea-like component. Imagine that the browser opens the page the same way that MS-Word would: the user can see the formatting but he can also type in the page (normally the browser opens a page as readonly).

window.document.designMode = "On";

Because the above affects all the web page, most editors use iFrames so that the editable area is only the iFrame which has it's own document object.

On top of that, there is an API that allows easy javascript access to styling. This is exposed throw the execCommand() method. For example you can call from Javascript

document.execCommand('bold', false, '');

and the selected text will become bold.

I have found the following:

wysiwyg - javascript Rich Text Editors - Stack Overflow

javascript wysiwyg richtext rte rich-text-editor
Rectangle 27 10

If you want to roll your own, look at Midas. It's available in FF3+, IE, Safari, Opera, Chrome.

Basically, you use contentEditable and execCommand to turn the browser into an RTE.

html - How does one go about writing a simple WYSIWYG editor in JavaSc...

javascript html editor wysiwyg
Rectangle 27 4

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script> 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css"> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script> 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
$(document).ready(function() {
  $('#summernote').summernote();
});

Yep, that was it! Forgot to include those precious sources. Thank you!

javascript - Summernote WYSIWYG - Stack Overflow

javascript css html5 summernote
Rectangle 27 8

No one mentioned contentEditable? Just make a contentEditable div and use javascript to style it. I reccommend you to look into the Dojo Toolkit's. It has a Editor widget.

btw, I found that contentEditable is not compatible with FF2. fail! :(

Are you sure? It seems pretty strange to me. The dojo editor widget works on FF 2 as well.

richtextbox - Javascript - Change font color of certain text in textar...

javascript richtextbox textarea wysiwyg contenteditable
Rectangle 27 5

document.getElementById('edit').contentDocument.designMode = "on";

html - How does one go about writing a simple WYSIWYG editor in JavaSc...

javascript html editor wysiwyg
Rectangle 27 4

You have to ask yourself one question, do you feel lucky^H^H^H^H^H^H^H^H do you want to maintain said WYSIWYG editor?

Two years ago I thought this would be a good idea. I took the editor used here on stackoverflow. Threw away all the UI code and re-wrote the whole thing from the ground up, only saving the markdown parsing piece. And let me tell you, markdown is a whole lot simpler than HTML/WYSIWYG. The final javascript, UI only, is 1600+ lines of code and took about 2 weeks to write the first pass of full functionality.

I implemented it into the web app I was working on a the time and learned something real quick: I was now spending 50% of my time maintaining an editor and the other 50% of my time delivering code for the actual domain-specific part of the web app I was working on. That basically means I was spending half of my time not delivering anything that really contributed to the bottom line of the web app.

So how about you -- Is this WYSIWYG editor such a core, critical part of your app so much so that you'd be willing to now spend half of your time supporting it -OR- is the other bits that your web app is doing far exceed the importance of this one piece of your UI so much so that you could "farm it out" to TinyMCE?

Also, there are a lot more options out there besides TinyMCE which you could use as a starting point.

I try to repeat this over and over again, but people likes to reinvent the wheel. CKEditor and TinyMCE are great pieces of software, of course they aren't perfect but they have so many hours of work done there that it isn't wise to just ignore them. It's much better to find out which one fits better your coding pattern, take a look at the code, the features/bugs and then try to create patches for it so you can use the code but leaving the core of the work to a dedicated team.

javascript - Building a simple WYSIWYG Editor - Stack Overflow

javascript jquery wysiwyg
Rectangle 27 6

No straight-forward solution available, but I think the question deserves a better answer than the one above.

In TinyMCE before version 3.4b3, media that was embedded as an iframe would play in the WYSIWYG mode. Yes, a WYSIWYG editor can do this (as opposed to what is claimed in the answer above).

In version 3.4b3 the media plugin was changed to match a change in YouTube's embed code.

From 3.4b3 and onward, the media plugin replaces the iframe with a yellow box having the same size of the media it's representing. The original iframe attributes are encapsulated as JSON and preserved in a special tag during editing. Later When the text is saved out, the attributes are restored into the original iframe.

Searching on this or similar topics returns several suggestions to use valid_elements or extended_valid_elements. Those settings will affect how HTML elements are treated. They cannot be used to enable media preview in the WYSIWYG mode.

This seems to be by design, as is indicated by how the TinyMCE CTO reasons about media vs placeholders here. And he also demonstrates the acceptable operation of the media plugin in this screencast where no preview is displayed after switching to the preview mode.

I'm still looking for a good solution for this using the standard product. As an alternative, a custom version of the media plugin could be written with domain white-listing added to tell it to leave iframes from those domains untouched so they will display also in WYSIWYG.

javascript - How to get preview of video in TinyMCE - Stack Overflow

javascript youtube tinymce wysiwyg preview
Rectangle 27 9

Create the Button at the Editor

this is what I do to integrate elFinder file manager with Summernote.

(function (factory) {
  /* global define */
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
  } else {
    // Browser globals: jQuery
    factory(window.jQuery);
  }
}(function ($){
  // template, editor
  var tmpl = $.summernote.renderer.getTemplate();
  // add plugin
  $.summernote.addPlugin({
    name: 'genixcms', // name of plugin
    buttons: { // buttons
      readmore: function () {
        return tmpl.iconButton('fa fa-long-arrow-right', {
          event: 'readmore',
          title: 'Read more',
          hide: false
        });
      },
      elfinder: function () {
        return tmpl.iconButton('fa fa-list-alt', {
          event: 'elfinder',
          title: 'File Manager',
          hide: false
        });
      },
    },

    events: { // events
      readmore: function (event, editor, layoutInfo) {
        layoutInfo.holder().summernote("insertText", "[[--readmore--]]");
      },
      elfinder: function (event, editor, layoutInfo) {
        elfinderDialog();
      },

    }
  });
}));

There are two button i made for my cms. see the elfinder button for the file manager. The elfinder event run the elfinderDialog() function and we had to make the function after that.

after that, add the button at summernote config.

$('.editor').summernote({
    height: 300,
    toolbar: [
            ['style', ['style']],
            ['style', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video', 'hr', 'readmore']],
            ['genixcms', ['elfinder']],
            ['view', ['fullscreen', 'codeview']],
            ['help', ['help']]
        ],
    onImageUpload: function(files, editor, welEditable) {
            sendFile(files[0],editor,welEditable);
        }
});

See this tag ['genixcms', ['elfinder']] it will show the button separately from the others as it had it own division. There is default image upload at the summernote image button. And it can upload to the server. I had it work and running well. The problem is some times we need to make modifications and we need the file manager.

After all summernote requirements is ready for loading the button. We need to create the function which will be executed when the button was clicked. See the code below.

function elfinderDialog(){
    var fm = $('<div/>').dialogelfinder({
        url : 'http://localhost/genixcms/inc/lib/Vendor/studio-42/elfinder/php/connector.minimal.php',
        lang : 'en',
        width : 840,
        height: 450,
        destroyOnClose : true,
        getFileCallback : function(files, fm) {
            console.log(files);
            $('.editor').summernote('editor.insertImage',files.url);
        },
       commandsOptions : {
            getfile : {
                oncomplete : 'close',
                folders : false
            }
        }

    }).dialogelfinder('instance');
}

To insert the image is easy, Just double click the image and the image will inserted at the editor.

I hope this little snippet can help anyone who need file manager and want to use elFinder as the file manager.

javascript - How to add image manager in Summernote WYSIWYG editor? - ...

javascript summernote
Rectangle 27 9

Create the Button at the Editor

this is what I do to integrate elFinder file manager with Summernote.

(function (factory) {
  /* global define */
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
  } else {
    // Browser globals: jQuery
    factory(window.jQuery);
  }
}(function ($){
  // template, editor
  var tmpl = $.summernote.renderer.getTemplate();
  // add plugin
  $.summernote.addPlugin({
    name: 'genixcms', // name of plugin
    buttons: { // buttons
      readmore: function () {
        return tmpl.iconButton('fa fa-long-arrow-right', {
          event: 'readmore',
          title: 'Read more',
          hide: false
        });
      },
      elfinder: function () {
        return tmpl.iconButton('fa fa-list-alt', {
          event: 'elfinder',
          title: 'File Manager',
          hide: false
        });
      },
    },

    events: { // events
      readmore: function (event, editor, layoutInfo) {
        layoutInfo.holder().summernote("insertText", "[[--readmore--]]");
      },
      elfinder: function (event, editor, layoutInfo) {
        elfinderDialog();
      },

    }
  });
}));

There are two button i made for my cms. see the elfinder button for the file manager. The elfinder event run the elfinderDialog() function and we had to make the function after that.

after that, add the button at summernote config.

$('.editor').summernote({
    height: 300,
    toolbar: [
            ['style', ['style']],
            ['style', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video', 'hr', 'readmore']],
            ['genixcms', ['elfinder']],
            ['view', ['fullscreen', 'codeview']],
            ['help', ['help']]
        ],
    onImageUpload: function(files, editor, welEditable) {
            sendFile(files[0],editor,welEditable);
        }
});

See this tag ['genixcms', ['elfinder']] it will show the button separately from the others as it had it own division. There is default image upload at the summernote image button. And it can upload to the server. I had it work and running well. The problem is some times we need to make modifications and we need the file manager.

After all summernote requirements is ready for loading the button. We need to create the function which will be executed when the button was clicked. See the code below.

function elfinderDialog(){
    var fm = $('<div/>').dialogelfinder({
        url : 'http://localhost/genixcms/inc/lib/Vendor/studio-42/elfinder/php/connector.minimal.php',
        lang : 'en',
        width : 840,
        height: 450,
        destroyOnClose : true,
        getFileCallback : function(files, fm) {
            console.log(files);
            $('.editor').summernote('editor.insertImage',files.url);
        },
       commandsOptions : {
            getfile : {
                oncomplete : 'close',
                folders : false
            }
        }

    }).dialogelfinder('instance');
}

To insert the image is easy, Just double click the image and the image will inserted at the editor.

I hope this little snippet can help anyone who need file manager and want to use elFinder as the file manager.

javascript - How to add image manager in Summernote WYSIWYG editor? - ...

javascript summernote
Rectangle 27 8

There is another plugin for tiny mce which is free and open source. You can use this http://justboil.me/tinymce-images-plugin/

with this plugin I can upload an image to the server?? I also want the uploaded images to apperar within text

I am confused whether I should start with it, because of plenty of not positive comments

php - tinyMCE - how to handle image uploads - Stack Overflow

php javascript jquery wysiwyg text-editor
Rectangle 27 3

The fontsize option has indeed been separated into a plugin. There is a file summernote-ext-fontstyle.js in the plugins folder of the Summernote download.

After that you just have to do the toolbar as in the examples given:

$('.summernote').summernote({
  toolbar: [
    //[groupname, [button list]]
    ['fontsize', ['fontsize']],
    ['etc', ['etc']],
  ]
});

javascript - How do you get fontsize toolbar on summernote v0.6.0 - St...

javascript wysiwyg summernote
Rectangle 27 3

WYMeditor, available via the WYSIWYG API, is not the fanciest editor, but it does produce XHTML markup.

BUEditor integrated via the BUEditor module, is an easily extensible system that allows you to easily define buttons and associated markup. It is a favorite of a markup-obsessed colleague of mine, so I imagine it does a good job.

javascript - Which wysiwyg editor in Drupal will give me most control ...

javascript drupal wysiwyg
Rectangle 27 3

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - What minimal, clean, and "event-able" WYSIWYG editor woul...

javascript jquery editor wysiwyg
Rectangle 27 7

Which is a free open-source file manager and image manager made with the jQuery library, CSS3, PHP and HTML5 that offers a nice and elegant way to upload and insert files, images and videos.

  • Upload files with a simple drag & drop.
  • Use as stand-alone file manager, as TinyMCE, CKEditor or CLEditor plugin or as crossdomain.
  • Many customisation parameters such as Automatic resizing of uploaded images, Optional limiting of image dimensions, Files allowed lists.
  • Full preview of uploaded images, videos and audios.
  • Automatic creation of thumbnails and Automatic realignment of thumbnails after external changes

and ...

php - tinyMCE - how to handle image uploads - Stack Overflow

php javascript jquery wysiwyg text-editor
Rectangle 27 4

A textarea cannot parse HTML -- period. (Anyone can feel free to correct me on this)

The WYSIWYG editors that you see are not in a textarea, at least not in the same way. I suggest using a prebuilt editor such as TinyMCE or FCK Editor.

Interestingly, textareas can sort of 'unparse' html. Anything you put inside them (besides </textarea>, of course) will be treated as literal contents of the textarea, not html. This includes even cdata sections and html comments.

jquery - Basic javascript wysiwyg editor - Stack Overflow

javascript jquery wysiwyg
Rectangle 27 4

Look into the contenteditable attribute. It's supported in many modern browsers. Just add it to an element and edit away...

document.getElementById('something').contentEditable = true;

Of course it doesn't work on textareas. You'd need to swap the textarea out with a div and make that editable. You'd also need to make sure the textarea has the contents (e.g. innerHTML) of the div as its value when the form is submitted.

jquery - Basic javascript wysiwyg editor - Stack Overflow

javascript jquery wysiwyg
Rectangle 27 4

A textarea cannot parse HTML -- period. (Anyone can feel free to correct me on this)

The WYSIWYG editors that you see are not in a textarea, at least not in the same way. I suggest using a prebuilt editor such as TinyMCE or FCK Editor.

Interestingly, textareas can sort of 'unparse' html. Anything you put inside them (besides </textarea>, of course) will be treated as literal contents of the textarea, not html. This includes even cdata sections and html comments.

jquery - Basic javascript wysiwyg editor - Stack Overflow

javascript jquery wysiwyg
Rectangle 27 4

Look into the contenteditable attribute. It's supported in many modern browsers. Just add it to an element and edit away...

document.getElementById('something').contentEditable = true;

Of course it doesn't work on textareas. You'd need to swap the textarea out with a div and make that editable. You'd also need to make sure the textarea has the contents (e.g. innerHTML) of the div as its value when the form is submitted.

jquery - Basic javascript wysiwyg editor - Stack Overflow

javascript jquery wysiwyg