0

nicEdit を使用しました - http://nicedit.com/

YouTube から動画を挿入する必要があります。たとえば、URLのみを挿入する必要があります。http://www.youtube.com/watch?v=4GuqB1BQVr4

そしてに置き換えます

<iframe width="560" height="315" src="http://www.youtube.com/embed/4GuqB1BQVr4" frameborder="0" allowfullscreen></iframe>

nicEdit を使用して YouTube から動画を挿入するにはどうすればよいですか?

4

3 に答える 3

6

JDandChips コードはうまく機能しますが、動画がコンテンツの一番下に配置されていることがわかりました。カーソル位置に挿入するには

探す

 this.ne.selectedInstance.setContent(this.ne.selectedInstance.getContent() + youTubeCode);
 this.removePane();

への変更

  this.removePane();
  this.ne.nicCommand('insertHTML', youTubeCode);

私にとってはうまくいきます。

ここに完全なプラグインコードがあります

var nicCodeOptions = {
buttons : {
    'xhtml': { name: 'Edit HTML', type: 'nicCodeButton' },
    'youTube' : {name : 'YouTube', type : 'nicYouTubeButton'}
},
iconFiles: {
    'youTube': '/nicedit/youtube.gif'
}
};

var nicYouTubeButton = nicEditorAdvancedButton.extend({
width: '350px',

addPane: function () {
    this.addForm({
        '': { type: 'title', txt: 'YouTube Url' },
        'youTubeUrl': { type: 'text', txt: 'URL', value: 'http://', style: { width: '150px'} },
        'height': { type: 'text', txt: 'Height', value: '560', style: { width: '150px'} },
        'width': { type: 'text', txt: 'Width', value: '315', style: { width: '150px'} }
    });
},

submit: function (e) {
    var code = this.inputs['youTubeUrl'].value;
    var width = this.inputs['height'].value;
    var height = this.inputs['width'].value;

    if (code.indexOf('watch?v=') > 0) {
        code = code.replace('watch?v=','embed/');
    }

    var youTubeCode = '<iframe width="' + width + '" height="' + height + '" src="' + code + '" frameborder="0" allowfullscreen></iframe>';

    this.removePane();
    this.ne.nicCommand('insertHTML', youTubeCode);
}
});
nicEditors.registerPlugin(nicPlugin,nicYouTubeOptions);

カーソル位置に html を挿入する必要がある他のプラグインの html を挿入する nicCommand。

申し訳ありませんが、プラグインがカーソル位置にGO HEREに任意の html を挿入することを意味します。

于 2012-10-13T00:44:21.797 に答える
3

カスタム nicEdit ボタンの追加

ここで説明されているように、カスタム ボタンを追加する必要があります: http://wiki.nicedit.com/w/page/516/Creating%20a%20Plugin

このドキュメントには、最初に読んだときにわかりにくい部分があるため、機能するボタンを追加する方法を順を追って説明します。

開発版の nicEdit.js を持っている場合は、ファイルの一番下に移動すると、「nicCodeButton」というカスタム ボタンが表示されます。

この下に、次のような独自のカスタム ボタンを追加します。

YouTube ボタン コード

var nicYouTubeButton = nicEditorAdvancedButton.extend({
    width: '350px',

    addPane: function () {
        this.addForm({
            '': { type: 'title', txt: 'YouTube Url' },
            'youTubeUrl': { type: 'text', txt: 'URL', value: 'http://', style: { width: '150px'} },
            'height': { type: 'text', txt: 'Height', value: '560', style: { width: '150px'} },
            'width': { type: 'text', txt: 'Width', value: '315', style: { width: '150px'} }
        });
    },

    submit: function (e) {
        var code = this.inputs['youTubeUrl'].value;
        var width = this.inputs['height'].value;
        var height = this.inputs['width'].value;

        if (code.indexOf('watch?v=') > 0) {
            code = code.replace('watch?v=','embed/');
        }

        var youTubeCode = '<iframe width="' + width + '" height="' + height + '" src="' + code + '" frameborder="0" allowfullscreen></iframe>';

        this.ne.selectedInstance.setContent(this.ne.selectedInstance.getContent() + youTubeCode);
        this.removePane();
    }
});

次に、ボタンをカスタム構成に追加し、パネルが使用するアイコン画像をファイルの下部に追加する必要があります。完了すると、次のようになります。

あなたのボタンを構成に追加する

/* START CONFIG */
var nicCodeOptions = {
    buttons : {
        'xhtml': { name: 'Edit HTML', type: 'nicCodeButton' },
        'youTube' : {name : 'YouTube', type : 'nicYouTubeButton'}
    },
    iconFiles: {
        'youTube': 'nicEditorIcons2.gif'
    }
};
/* END CONFIG */

それでおしまい！

(上記のコードは、使用したい場合はテスト済みです)

于 2012-09-13T11:15:56.343 に答える