TinyMCE zu verhindern, ändern der Bildgröße

Ich bin ein Bild hinzufügen, um einen TinyMCE-editor verwenden:

var params = {
             src: filename,
             title: "Attached image: " + filename,
             width: 500
             };

ed.execCommand("mceInsertContent", false, ed.dom.createHTML("img", params));

Diese fügen Sie das Bild korrekt in den editor. Allerdings, wenn der Benutzer auf das Bild klickt, hat er die Möglichkeit der Größenänderung.

Ich würde gerne wissen, ob es eine Möglichkeit gibt:

  1. Verhindern, dass der Benutzer, um die Größe nur in eine Richtung (d.h. wie halte ich ein festes Seitenverhältnis für das Bild)
  2. Ganz verhindern, dass die Benutzer, um die Größe des Bildes
InformationsquelleAutor nico | 2012-08-15
  1. 8

    Fand ich eine (Teil -) Antwort, so dass ich dachte, ich Teile es hier.

    Hinzufügen

    'object_resizing' : false

    In der editor-config verhindert, dass die Größenänderung.
    Beachten Sie, dass dies ein feature von Mozilla (wie Google Chrome ermöglicht es Ihnen nicht um die Größe des Bildes).

    Ich bin noch auf der Suche nach einem Weg zu halten aspect ratio im real time, aber ich weiß nicht, ob das wirklich möglich ist.

    InformationsquelleAutor nico
  2. 4

    Können Sie fügen Sie einfach dieses kleine plugin zu tinyMCE, ich habe es und es funktioniert sehr gut!
    Hier ist die Dokumentation: Link

    InformationsquelleAutor TrizZz
  3. 3

    Würden Sie implementieren müssen, um ein resize-handler (z.B. ein jQuery-handler).
    Es könnte hilfreich sein, um Attribute hinzufügen, um Ihre Bilder zu speichern deren Abmessungen oder eine einzige Einstellung halten Sie das Seitenverhältnis. Für diese passen Sie die tinymce Konfiguration Einstellung valid_elements erlauben diese Attribute für Bilder - sonst tinymce würde, Entferne Sie aus.

    Beim resize wird ausgelöst greifen die neuen Maße und passen Sie die Abmessungen entsprechend dem Seitenverhältnis - entweder passen Sie über die neue Breite oder neue Höhe ein (die anderen Wert erhalten muss korrigiert).

    Beispiel: Bilder haben ein Attribut aspectratio halten Sie das Seitenverhältnis

    Fügen Sie diesen code in thetinymce setup-Konfiguration parameter

       setup : function(ed) {
      ed.onInit.add(function(ed) {
        $(ed.getBody()).find('img').resize( function(event){

          $(event.target).css('width', parseInt ( event.target.width * this.aspectratio)  );

        });
      });
   }

    Update:

    Habe ich erstellt ein tinymce-fiddle zeigen ein Beispiel zur Verwendung mit IE.

    • Vielen Dank für die Zeit nehmen, dies zu tun. Jedoch, zumindest in FF und Chrome (sorry, mit Linux, kann nicht testen mit dem IE), ich habe nicht die Möglichkeit, die Bildgröße zu ändern. Wenn ich wieder auf object_resizing resize-Ereignisse werden NICHT genannt... gibt es etwas, was ich bin fehlt?
    • es gibt einen tinymce-bug-report für die Griffe unter webkit (safari/chrome): tinymce.com/develop/bugtracker_view.php?id=2495
    • gut, das ist nicht das problem, object_resizing=FALSE schaltet die Griffe in Firefox (weiß nicht, über IE). Die Tatsache, dass Webkit nicht zeigen, Sie ist einfach, weil es nicht implementiert-Objekt Größenänderung in iframes. Mein Punkt ist, dass die resize-Ereignisse sind nicht aufgerufen, auch in Firefox. Ich nehme an, dies ist aufgrund der Tatsache, dass das Ereignis nicht im gleichen Fenster. Also meine Frage ist: in IE 1) sehen Sie die Griffe mit object_resizing=false? 2) sind auf resize-Ereignisse aufgerufen, wenn Sie das Bild verkleinern?
    • 1) ich sehe Griffe im IE. 2) ja auf resize-Ereignisse sind als (leider) zu viele sind firedm, die eine Besondere Behandlung erforderlich ist hier (siehe fiddle)). aber object_resizing:true führt zu keine Griffe in firefox
    InformationsquelleAutor Thariama
Schreibe einen Kommentar