web-dev-qa-db-fra.com

Comment peut-on manipuler tinyMCE dom (l'API officielle ne semble pas fonctionner)?

Est-ce possible avec un plugin tinymce? Je pense que d'autres moyens d'accéder à l'iframe ne fonctionnent pas ou ne sont pas recommandés.

J'ai trouvé ceci et essayé cela dans le plugin d'impression mce à l'intérieur du plugin TinyMCE Advanced mais cela ne fonctionne pas .

var $ = tinymce.dom.DomQuery;
$('p').attr('attr', 'value').addClass('class');

J'ai installé le plugin tinymce advanced et essayé d'ajouter ces lignes au plugin print. Le plugin est exécuté, la boîte de dialogue d’impression s’ouvre mais elle n’a rien à faire avec le dom. Est-ce que WP a la version complète de tinymce?

/**
 * plugin.js
 *
 * Released under LGPL License.
 * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
 *
 * License: http://www.tinymce.com/license
 * Contributing: http://www.tinymce.com/contributing
 */

/*global tinymce:true */


var mce_dom = tinymce.dom.DomQuery;
mce_dom('p').attr('id', 'arve').addClass('arve-html-class');
mce_dom('html').attr('id', 'arve').addClass('arve-html-class');

tinymce.PluginManager.add('print', function(editor) {

    var mce_dom = tinymce.dom.DomQuery;
    mce_dom('p').attr('id', 'arve').addClass('arve-html-class');
    mce_dom('html').attr('id', 'arve').addClass('arve-html-class');

    editor.addCommand('mcePrint', function() {
        editor.getWin().print();
    });

    editor.addButton('print', {
        title: 'Print',
        cmd: 'mcePrint'
    });

    editor.addShortcut('Meta+P', '', 'mcePrint');

    editor.addMenuItem('print', {
        text: 'Print',
        cmd: 'mcePrint',
        icon: 'print',
        shortcut: 'Meta+P',
        context: 'file'
    });
});
plugin-developmenttinymceplugin-tinymce
2
NextGenThemes

J'espère que vous pouvez utiliser jachère

// Sets class attribute on all paragraphs in the active editor
tinymce.activeEditor.dom.setAttrib(tinymce.activeEditor.dom.select('p'), 'class', 'myclass');

// Sets class attribute on a specific element in the current page
tinymce.dom.setAttrib('mydiv', 'class', 'myclass');

ou Vous pouvez ajouter Id par jQuery comme ceci

$('div').find('p').attr('id', 'myid');

1
Abhishek Pandey

(réponse basée sur la discussion dans les commentaires à la question) La lutte avec d'autres plugins pour la domination sur une portée globale est une bataille inutile, en particulier dans le contexte de CSS, que vous ne pouvez tout simplement pas gagner. Ce n’est pas parce que vous avez un id="me" sur le corps que vous empêchez un plugin d’identifier plus précisément un élément et de "gagner" sur votre. Par exemple, #me p perdra toujours à #myplugin .content p.

La solution consiste à utiliser des noms de classe uniques et à être aussi précis que possible dans vos règles de style.

Une approche différente consiste à s’appuyer sur le personnaliseur pour permettre à l’utilisateur d’avoir une (presque) vraie expérience frontale lorsqu’il modifie des codes/paramètres courts. Évidemment, cela n’est pas aussi efficace que d’appliquer un style lors de l’édition, mais il n’ya que beaucoup de choses qui peuvent être faites tant que wordpress n’a pas une véritable expérience de l’édition front-end.

(l'exemple "de rupture" a été édité en raison de la discussion dans les commentaires)

Et enfin et surtout, cette approche n’a aucune incidence, car, étant donné qu’il ne peut y avoir qu’une valeur pour l’ID des éléments html et body, un seul plugin peut adopter cette approche et s’il y aurait deux les plugins faisant que le résultat sera le chaos.

0
Mark Kaplun