4

CKeditor で画像を右クリックすると、4 つのメニュー項目が表示されます。

cut
copy
paste
image properties

メニューをあと2つ追加したいのですが、

test1
test2 -> subtest2
         subtest3

test1 には 1 つのメニューがあり、test2 には 2 つのサブメニューがあります。

また、この新しいメニュー項目にアクションを追加するにはどうすればよいですか? たとえば、test1 をクリックすると、右側に境界線が描画されます。subtest2 をクリックすると、画像の影などが追加されます。

それに加えて。div と table を右クリックしたときにも同様のことをしたいと思います。

コンテキスト メニュー プラグインを見つけましたが、これをどのように使用できるかを知る必要があります。

4

3 に答える 3

9

私もこの問題に遭遇しました。CKEditor の不適切なドキュメントのおかげで、私は最終的に午後全体でさまざまな方法を試して作成しました。このコードは、私のサイト (Drupal 6 & CKEditor 4) でうまく機能します。

// Assume I already Have 3 commands
// insertTick, insertTickxxx, and insertTickxxxandxxx

if (editor.addMenuItems) {
  // 1st, add a Menu Group
  // tip: name it the same as your plugin. (I'm not sure about this)
  editor.addMenuGroup('tick', 3);

  // 2nd, use addMenuItems to add items
  editor.addMenuItems({
      // 2.1 add the group again, and give it getItems, return all the child items
      tick :
      {
        label : 'Insert Tick',
        group : 'tick',
        order : 21,
        getItems : function() {
          return {
            tick_insertTick : CKEDITOR.TRISTATE_OFF,
            tick_insertQuestionMark : CKEDITOR.TRISTATE_OFF,
            tick_insertTickandQuestion : CKEDITOR.TRISTATE_OFF
          };
        }
      },

      // 2.2 Now add the child items to the group.
      tick_insertTick :
      {
        label : 'Insert a tick',
        group : 'tick',
        command : 'insertTick',
        order : 22
      },

      tick_insertQuestionMark :
      {
        label : 'Insert Question Mark',
        group : 'tick',
        command : 'insertQuestionMark',
        order : 23
      },

      tick_insertTickandQuestion :
      {
        label : 'insert Tick and Question',
        group : 'tick',
        command : 'insertTickandQuestion',
        order : 24
      }
  });
}

// 3rd, add Listener, and return the Menu Group
if (editor.contextMenu) {
  editor.contextMenu.addListener(function(element, selection) {
    return {
      tick : CKEDITOR.TRISTATE_OFF
    };
  });
}

これは次のように表示されます

ティックの挿入 -> ティックの挿入

-------------- 疑問符を挿入する

-------------- 目盛りと疑問符を挿入

于 2013-06-28T01:16:13.367 に答える
0

私も同じことを試しています.最終的に私は1つの解決策を得ました.ここで私はそれを共有します.それは他の人を助けるかもしれません.

      <script type="text/javascript">
   // Menu code
 var config = {
  toolbar: [],
removePlugins : 'pastetext,clipboard'   
 };

var editor = CKEDITOR.appendTo('ckeditor', config);



editor.on( 'instanceReady', function(e) { 
 var e = e.editor;

  // Commands
e.addCommand("cv_claimant_Birthdate", {
    exec: function(e) {
        e.insertText("\{\!claimant.Birthdate\}");
    }
});
e.addCommand("cv_claimant_Name", {
    exec: function(e) {
        e.insertText("\{\!claimant.Name\}");
    }
});
e.addCommand("cv_claim_Name", {
    exec: function(e) {
        e.insertText("\{\!claim.Name\}");
    }
});
e.addCommand("cv_claim_CreatedDate", {
    exec: function(e) {
        e.insertText("\{\!claim.CreatedDate\}");
    }
});

// Listener
e.contextMenu.addListener(function(element, selection) {
    return {
        cv: CKEDITOR.TRISTATE_ON
    };
});

// Menu Groups; different numbers needed for the group separator to show
e.addMenuGroup("cv", 500);
e.addMenuGroup("cv_people", 100);
e.addMenuGroup("cv_claim", 200);

// Menus (nested)
e.addMenuItems({
    // Top level
    cv: {
        label: "Insert Merge Field",
        group: "cv",
        getItems: function() {
            return {
                cv_claimant: CKEDITOR.TRISTATE_OFF,
                cv_claim: CKEDITOR.TRISTATE_OFF,
            };
        }
    },
    // One sub-menu
    cv_claimant: {
        label: "Claimant Person (claimant)",
        group: "cv_people",
        getItems: function() {
            return {
                cv_claimant_Birthdate: CKEDITOR.TRISTATE_OFF,
                cv_claimant_Name: CKEDITOR.TRISTATE_OFF,
            };
        }
    },
    // These run commands
    cv_claimant_Birthdate: {
        label: "Birthdate (Birthdate: date)",
        group: "cv_people",
        command: "cv_claimant_Birthdate"
    },
    cv_claimant_Name: {
        label: "Full Name (Name: string)",
        group: "cv_people",
        command: "cv_claimant_Name"
    },
    // Another sub-menu
    cv_claim: {
        label: "Claim (claim)",
        group: "cv_claim",
        getItems: function() {
            return {
                cv_claim_CreatedDate: CKEDITOR.TRISTATE_OFF,
                cv_claim_Name: CKEDITOR.TRISTATE_OFF,
            };
        }
    },
    // These run commands
    cv_claim_Name: {
        label: "Claim Number (Name: string)",
        group: "cv_claim",
        command: "cv_claim_Name"
    },
    cv_claim_CreatedDate: {
        label: "Created Date (CreatedDate: datetime)",
        group: "cv_claim",
        command: "cv_claim_CreatedDate"
    },
});
 });   






</script>
于 2016-12-22T10:13:52.307 に答える