ckeditor - 无法编辑插入的链接
ckeditor - can not edit inserted links
我在我的网络应用程序中使用 ckeditor。
当我尝试使用上下文菜单或双击编辑插入的 link 时，URL 输入字段显示为空。
我插入的 link 看起来像这样：
<a data-cke-saved-href="www.google.de" href="www.google.de">www.google.de</a>
它应该如何工作 - 看看这里：
ckeditor demo - edit inserted links
感谢您的帮助
更新
ckeditor config.js
/**
* @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
// The following value defines which File Browser connector and Quick Upload
// "uploader" to use. It is valid for the default implementaion and it is here
// just to make this configuration file cleaner.
// It is not possible to change this value using an external file or even
// inline when creating the editor instance. In that cases you must set the
// values of LinkBrowserURL, ImageBrowserURL and so on.
// Custom implementations should just ignore it.
var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php
// Don't care about the following two lines. It just calculates the correct connector
// extension to use for the default File Browser (Perl uses "cgi").
var _FileBrowserExtension = _FileBrowserLanguage == 'perl' ? 'cgi' : _FileBrowserLanguage ;
var _QuickUploadExtension = _QuickUploadLanguage == 'perl' ? 'cgi' : _QuickUploadLanguage ;
CKEDITOR.editorConfig = function( config ) {
config.contentsCss = CKEDITOR.basePath + 'css/editorarea.css' ;
config.defaultLanguage = 'de' ;
config.contentsLangDirection = 'ltr';
config.toolbarGroups = [
{ name: 'basicstyles', groups: [ 'Bold', 'Italic', 'Underline'] },
{ name: 'paragraph', groups: [ 'list', 'indent' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'tools', groups: [ 'Maximize' ] },
{ name: 'insert', groups: [ 'insert' ] },
{ name: 'document', groups: [ 'mode', 'doctools', 'document' ] }
];
config.filebrowserBrowseUrl = 'mycustombrowser-url';
config.removeButtons = 'Iframe,Anchor,Save,NewPage,Preview,Print,Templates,Form,Checkbox,TextField,Textarea,Select,Button,ImageButton,HiddenField,Radio,Strike,Language,BidiRtl,BidiLtr,Image,Flash,Smiley,SpecialChar,PageBreak,Styles,Format,Font,FontSize,TextColor,BGColor,ShowBlocks,About,Blockquote,CreateDiv,Indent,Outdent,Subscript,Superscript,RemoveFormat,Find,Replace,SelectAll';
config.smiley_path = CKEDITOR.basePath + 'images/smiley/msn/' ;
config.smiley_images = ['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif','embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif'] ;
config.smiley_columns = 8;
config.filebrowserWindowHeight = CKEDITOR.config.height * 0.7 ; // 70%
config.filebrowserWindowWidth = CKEDITOR.config.width * 0.7 ; // 70%;
};
CKEDITOR.on( 'dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
var dialog = CKEDITOR.dialog.getCurrent();
if(dialogName == 'link') {
dialogDefinition.onLoad = function ( ) {
//var dialog = CKEDITOR.dialog.getCurrent();
//elem = dialog.getContentElement('info','protocol');
//elem.default = '<andere>';
};
dialogDefinition.onShow = function () {
dialog = CKEDITOR.dialog.getCurrent();
//dialog.hidePage( 'target' ); // via config
//dialog.hidePage( 'advanced' ); // via config
elem = dialog.getContentElement('info','anchorOptions');
elem.getElement().hide();
elem = dialog.getContentElement('info','emailOptions');
elem.getElement().hide();
};
}
});
实施：
<textarea type="text" name="ArticleTextPart_text" style="height:200px;">{=ArticleTextPart_text}</textarea>
替换-JS-函数：
function replaceTextAreasByWYSIWYGEditor() {
var firstCK = null;
var allTextAreas = document.getElementsByTagName("textarea");
for (var i=0; i < allTextAreas.length; i++) {
var cssClasses = allTextAreas[i].className;
if (cssClasses && cssClasses.indexOf("nowysiwyg") >= 0) {
continue;
}
var name = allTextAreas[i].id;
// alert (name);
if (!name) {
name = allTextAreas[i].name;
}
var height = allTextAreas[i].style.height;
var width = allTextAreas[i].style.width;
var tabix = allTextAreas[i].getAttribute("tabindex");
editor = CKEDITOR.instances[name];
if (editor) { editor.destroy(true); }
CKEDITOR.replace( name,
{
basePath : pathprefix + "/pathTo/ckeditor/",
height : ((!height) ? 100 : height),
width : ((!width) ? 607 : width),
toolbar : ((fckmode != null && fckmode == 'expert') ? "Default" : "Basic"),
toolbarStartupExpanded : true,
resize_enabled : false,
removePlugins : 'elementspath'
});
editor = CKEDITOR.instances[name];
if (tabix == 1) {
firstCK = editor;
}
}
if (firstCK != null) {
firstCK.Focus();
}
}
Web 检查器
ckeditor - "edit link" 上下文菜单 link:
<a id="cke_133" class="cke_menubutton cke_menubutton__link cke_menubutton_off cke_menubutton__link" href="javascript:void('Link bearbeiten')" title="Edit link" tabindex="-1" _cke_focus="1" hidefocus="true" role="menuitem" aria-haspopup="false" aria-disabled="false" onmouseover="CKEDITOR.tools.callFunction(109,3);" onmouseout="CKEDITOR.tools.callFunction(110,3);" onclick="CKEDITOR.tools.callFunction(111,3); return false;"><span class="cke_menubutton_inner"><span class="cke_menubutton_icon"><span class="cke_button_icon cke_button__link_icon" style="background-image:url('http://www.mywww.com/icons.png?t=FACH');background-position:0 -1248px;background-size:auto;"></span></span><span class="cke_menubutton_label">Edit link</span></span></a>
我明白了，将 ckeditor 更新到版本 4.5.10（最新版本）解决了这个问题。
我在我的网络应用程序中使用 ckeditor。
当我尝试使用上下文菜单或双击编辑插入的 link 时，URL 输入字段显示为空。
我插入的 link 看起来像这样：
<a data-cke-saved-href="www.google.de" href="www.google.de">www.google.de</a>
它应该如何工作 - 看看这里： ckeditor demo - edit inserted links
感谢您的帮助
更新
ckeditor config.js
/**
* @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
// The following value defines which File Browser connector and Quick Upload
// "uploader" to use. It is valid for the default implementaion and it is here
// just to make this configuration file cleaner.
// It is not possible to change this value using an external file or even
// inline when creating the editor instance. In that cases you must set the
// values of LinkBrowserURL, ImageBrowserURL and so on.
// Custom implementations should just ignore it.
var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php
// Don't care about the following two lines. It just calculates the correct connector
// extension to use for the default File Browser (Perl uses "cgi").
var _FileBrowserExtension = _FileBrowserLanguage == 'perl' ? 'cgi' : _FileBrowserLanguage ;
var _QuickUploadExtension = _QuickUploadLanguage == 'perl' ? 'cgi' : _QuickUploadLanguage ;
CKEDITOR.editorConfig = function( config ) {
config.contentsCss = CKEDITOR.basePath + 'css/editorarea.css' ;
config.defaultLanguage = 'de' ;
config.contentsLangDirection = 'ltr';
config.toolbarGroups = [
{ name: 'basicstyles', groups: [ 'Bold', 'Italic', 'Underline'] },
{ name: 'paragraph', groups: [ 'list', 'indent' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'tools', groups: [ 'Maximize' ] },
{ name: 'insert', groups: [ 'insert' ] },
{ name: 'document', groups: [ 'mode', 'doctools', 'document' ] }
];
config.filebrowserBrowseUrl = 'mycustombrowser-url';
config.removeButtons = 'Iframe,Anchor,Save,NewPage,Preview,Print,Templates,Form,Checkbox,TextField,Textarea,Select,Button,ImageButton,HiddenField,Radio,Strike,Language,BidiRtl,BidiLtr,Image,Flash,Smiley,SpecialChar,PageBreak,Styles,Format,Font,FontSize,TextColor,BGColor,ShowBlocks,About,Blockquote,CreateDiv,Indent,Outdent,Subscript,Superscript,RemoveFormat,Find,Replace,SelectAll';
config.smiley_path = CKEDITOR.basePath + 'images/smiley/msn/' ;
config.smiley_images = ['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif','embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif'] ;
config.smiley_columns = 8;
config.filebrowserWindowHeight = CKEDITOR.config.height * 0.7 ; // 70%
config.filebrowserWindowWidth = CKEDITOR.config.width * 0.7 ; // 70%;
};
CKEDITOR.on( 'dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
var dialog = CKEDITOR.dialog.getCurrent();
if(dialogName == 'link') {
dialogDefinition.onLoad = function ( ) {
//var dialog = CKEDITOR.dialog.getCurrent();
//elem = dialog.getContentElement('info','protocol');
//elem.default = '<andere>';
};
dialogDefinition.onShow = function () {
dialog = CKEDITOR.dialog.getCurrent();
//dialog.hidePage( 'target' ); // via config
//dialog.hidePage( 'advanced' ); // via config
elem = dialog.getContentElement('info','anchorOptions');
elem.getElement().hide();
elem = dialog.getContentElement('info','emailOptions');
elem.getElement().hide();
};
}
});
实施：
<textarea type="text" name="ArticleTextPart_text" style="height:200px;">{=ArticleTextPart_text}</textarea>
替换-JS-函数：
function replaceTextAreasByWYSIWYGEditor() {
var firstCK = null;
var allTextAreas = document.getElementsByTagName("textarea");
for (var i=0; i < allTextAreas.length; i++) {
var cssClasses = allTextAreas[i].className;
if (cssClasses && cssClasses.indexOf("nowysiwyg") >= 0) {
continue;
}
var name = allTextAreas[i].id;
// alert (name);
if (!name) {
name = allTextAreas[i].name;
}
var height = allTextAreas[i].style.height;
var width = allTextAreas[i].style.width;
var tabix = allTextAreas[i].getAttribute("tabindex");
editor = CKEDITOR.instances[name];
if (editor) { editor.destroy(true); }
CKEDITOR.replace( name,
{
basePath : pathprefix + "/pathTo/ckeditor/",
height : ((!height) ? 100 : height),
width : ((!width) ? 607 : width),
toolbar : ((fckmode != null && fckmode == 'expert') ? "Default" : "Basic"),
toolbarStartupExpanded : true,
resize_enabled : false,
removePlugins : 'elementspath'
});
editor = CKEDITOR.instances[name];
if (tabix == 1) {
firstCK = editor;
}
}
if (firstCK != null) {
firstCK.Focus();
}
}
Web 检查器
ckeditor - "edit link" 上下文菜单 link:
<a id="cke_133" class="cke_menubutton cke_menubutton__link cke_menubutton_off cke_menubutton__link" href="javascript:void('Link bearbeiten')" title="Edit link" tabindex="-1" _cke_focus="1" hidefocus="true" role="menuitem" aria-haspopup="false" aria-disabled="false" onmouseover="CKEDITOR.tools.callFunction(109,3);" onmouseout="CKEDITOR.tools.callFunction(110,3);" onclick="CKEDITOR.tools.callFunction(111,3); return false;"><span class="cke_menubutton_inner"><span class="cke_menubutton_icon"><span class="cke_button_icon cke_button__link_icon" style="background-image:url('http://www.mywww.com/icons.png?t=FACH');background-position:0 -1248px;background-size:auto;"></span></span><span class="cke_menubutton_label">Edit link</span></span></a>
我明白了，将 ckeditor 更新到版本 4.5.10（最新版本）解决了这个问题。