ckeditor插件dcfile开发实例

1. //https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_dialog_definition.html
   
2. CKEDITOR.plugins.add('dcfile', {
   
3.     init: function (editor) {
   
4.         var pluginName = 'dcfile';
   
5.         
   
6.         editor.ui.addButton(pluginName,{
   
7.             label: '附件积分',
   
8.             command: pluginName,
   
9.             icon: this.path + 'images/video.png'
   
10.         });
    
11.         
    
12.         editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
    
13.         
    
14.         CKEDITOR.dialog.add(pluginName, function(editor) {
    
15.             return {
    
16.                 title: "附件上传",
    
17.                 resizable: CKEDITOR.DIALOG_RESIZE_NONE,
    
18.                 minWidth: 300,
    
19.                 minHeight: 80,
    
20.                 buttons: [{
    
21.                     id: 'dcfile-button',
    
22.                     type: 'button',
    
23.                     label: '上传'
    
24.                 },
    
25.                 CKEDITOR.dialog.okButton,
    
26.                 CKEDITOR.dialog.cancelButton],
    
27.                 contents: [{
    
28.                     id: "dcfile-tab",
    
29.                     label: 'dcfile-label',
    
30.                     title: "dcfile-title",
    
31.                     elements: [{
    
32.                         id: 'score',
    
33.                         type: "text",
    
34.                         label: '所需积分',
    
35.                         className: 'form-control mx-auto w-75',
    
36.                         //style: 'width: 50%;',
    
37.                         default: "0",
    
38.                         required: true,
    
39.                         //回调函数
    
40.                         setup: function(editor) {
    
41.                             //this.setupContent(editor);
    
42.                             //alert(this.getElement().getId());
    
43.                                                 },
    
44.                         //回调函数
    
45.                                                 commit: function(editor) {
    
46.                             //this.commitContent(editor);
    
47.                                                 }
    
48.                     }]
    
49.                 }],
    
50.                 onLoad: function(){
    
51.                     //this.setupContent(editor);
    
52.                     var $this = this;
    
53.                     var $id = '#'+this.getButton('dcfile-button').getElement().getId();
    
54.                     //this.getContentElement("dcfile-tab","abc").getElement().getHtml()
    
55.                     daicuo.upload.ajaxLoad(function(){
    
56.                         daicuo.upload.start({
    
57.                             element: $($id),
    
58.                             multiple: true,
    
59.                             mimeTypes: 'image/*',
    
60.                             multipart_params: {
    
61.                                 score: 0,
    
62.                             },
    
63.                             onInit: function(up){
    
64.                                 $(document).on('change', $($this.getElement()), function(){
    
65.                                     up.setOption("multipart_params", {
    
66.                                       score : $this.getValueOf("dcfile-tab","score")
    
67.                                     })
    
68.                                 });
    
69.                             },
    
70.                             onSuccess: function(up, file, xhr){
    
71.                                 //文件名
    
72.                                 if(file.responseTp.data.score){
    
73.                                     var fileName = file.responseTp.data.old_name + '（需要'+file.responseTp.data.score+'个积分）';
    
74.                                 }else{
    
75.                                     var fileName = file.responseTp.data.old_name;
    
76.                                 }
    
77.                                 //插入编辑器
    
78.                                 if(file.responseTp.data.urlId){
    
79.                                     editor.insertHtml('<a class="dc-file" href="'+file.responseTp.data.urlId+'">'+fileName+'</a><br />');
    
80.                                 }else{
    
81.                                     editor.insertHtml('<a class="dc-file" href="'+file.responseTp.data.url+'">'+fileName+'</a><br />');
    
82.                                 }
    
83.                                 //隐藏dialog
    
84.                                 $this.hide();
    
85.                             }
    
86.                         });
    
87.                     });
    
88.                 },
    
89.                 onShow: function(){
    
90.                     //this.setupContent(editor);
    
91.                 },
    
92.                 onOk: function() {
    
93.                     //this.getContentElement( 'tabId', 'elementId' ).setValue( 'Example' );
    
94.                     //this.commitContent(editor);
    
95.                     var imgsrc = CKEDITOR.plugins.getPath("dcfile") + "images/play.png";
    
96.                     editor.insertHtml('<a href="#" data-url="'+this.getValueOf("video","url")+'" class="dc-player"><img src="' + imgsrc + '" alt="点击播放"/></a>');
    
97.                 }
    
98.             };
    
99.         });
    
100.     }
     
101. });

复制代码