如何在ckeditor中配置简单的链接和图像附加？ [英] How to configure simple links and image attaching in ckeditor?
问题描述
我使用django-ckeditor，我对链接和图片有一些问题。
关于链接：
在此界面中，您可以看到，这是最终用户无法使用的，因为它太复杂，可能导致错误和安全问题，如 Browse Server 字面上允许用户浏览上传的内容。我想要的是非常简单的：只是一个输入文本，自动追加http（如果没有用户键入），并在新窗口中打开链接aka目标 _blank 。
我试图这样做编辑config.js与下面的代码。这已移除上传和高级标签，从信息选项卡，并默认创建目标 _blank 。但是 Target 选项卡仍然存在，用户可以更改它，因为我显然不能删除此选项卡，否则默认目标被忽略我困在这个。因此，如何将目标设置为 _blank 并删除目标标签？有没有办法隐藏此标签，但不删除它？
CKEDITOR.on（'dialogDefinition'，function {
//从事件数据中获取对话框名称及其定义
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
//检查定义是否来自我们的对话框
//感兴趣的（'link'对话框）
if（dialogName =='link'）{
//从链接对话框中删除目标，上传和高级选项卡
// dialogDefinition.removeContents（'target'）;
dialogDefinition.removeContents ;
dialogDefinition.removeContents（'advanced'）;
//获取对链接信息选项卡的引用
var infoTab = dialogDefinition.getContents（'info'） ;
//从链接信息选项卡中删除不必要的小部件。
infoTab.remove（'linkType'）;
infoTab.remove（'protocol'）;
infoTab.remove（'browse'）;
//获取目标选项卡的引用。
var targetTab = dialogDefinition.getContents（'target'）;
//设置URL字段的默认值。
var targetField = targetTab.get（'linkTargetType'）;
targetField ['default'] ='_blank';
}
}）;
关于图片：
有一个非常类似的情况：几个选项卡有太多的选项。我需要的是像在Stackoverflow中附加图像的选项一样简单。 有没有任何免费的插件，可以允许我通过链接添加图片，并使用ckeditor从计算机上载（使用previsualization）
谢谢！
最后，我得到简单的对话框：包括链接，从链接附加图片或从计算机上传以简单的方式包含Youtube视频。为此，我编辑了配置文件 config.js ，它看起来像我的CKeditor 4.1.2版本：
CKEDITOR.editorConfig = function（config）{
//此处定义对默认配置的更改。
//完整引用：
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
//注释下面一行调试模式：
config.removePlugins ='devtools';
//查看最常见的块元素。
config.format_tags ='p; h1; h2; h3; pre';
//使对话框更简单。
config.removeDialogTabs ='image：advanced; image：Link; link：advanced; link：upload';
config.linkShowTargetTab = false;
//在CKEditor 4.1或更高版本中，您需要禁用ACF（高级内容过滤器）
//使Youtube插件工作：
config.allowedContent = true;
};
CKEDITOR.on（'dialogDefinition'，function（ev）{
//从事件数据获取对话框名称及其定义
var dialogName = ev.data。 name;
var dialogDefinition = ev.data.definition;
//检查定义是否来自我们的对话框
//感兴趣的（链接对话框）
if（dialogName =='link'）{
//从链接对话框中删除上传和高级选项卡
// dialogDefinition.removeContents上传'）;
// dialogDefinition.removeContents（'advanced'）;
//获取对链接信息选项卡的引用
var infoTab = dialogDefinition.getContents （'info'）;
//从链接信息选项卡中删除不必要的小部件
infoTab.remove（'linkType'）;
infoTab.remove（'protocol'）;
infoTab.remove（'browse'）;
//获取对Target选项卡的引用并将默认值设置为_blank
var targetTab = dialogDefinition.getContents目标'）;
var targetField = targetTab.get（'linkTargetType'）;
targetField ['default'] ='_blank';
} else if（dialogName =='image'）{
//从图像对话框中删除链接和高级选项卡。
// dialogDefinition.removeContents（'Link'）;
// dialogDefinition.removeContents（'advanced'）;
//获取对图像信息选项卡的引用。
var infoTab = dialogDefinition.getContents（'info'）;
//从图像信息选项卡中删除不必要的小部件/元素。
infoTab.remove（'browse'）;
infoTab.remove（'txtHSpace'）;
infoTab.remove（'txtVSpace'）;
infoTab.remove（'txtBorder'）;
// infoTab.remove（'cmbAlign'）;
}
}）;
为此，我阅读了很多文档，但是最好的页面以下内容：
- http://ckeditor.com/ckeditor_4.1rc/samples/plugins/toolbar/toolbar.html
- http://ckeditor.com/forums/Support/Removing-Tabs-Image-Dialog
- < a href =http://ckeditor.com/forums/CKEditor/Complete-list-of-toolbar-items> http://ckeditor.com/forums/CKEditor/Complete-list-of-toolbar-items a>
- http：//khaledben.wordpress。 com / 2012/04/28 / customize-ckeditor-dialog /
- http://www.question2answer.org/qa/13255/simple-ckeditor-how-to-modify-it-to-be-simple --olution
我希望这能帮助别人解决同样的问题。干杯！
I'm using django-ckeditor and I have some problems with the links and images.
Regarding Links:
In this interface you can see that this is not usable by the end users, as it is too complex and can lead to errors and security issues, as the button Browse Server literally permits the user browse uploaded content. What I want is something really simple: just an input text that automatically appends http (if not typed by user) and that opens the link in a new window aka target _blank.
I've tried to do so editing config.js with the following code. This has removed the Upload and Advanced tabs, removed unnecessary widgets from Info tab and made target _blank by default. But the Target tab is still present and the users can change it, as I apparently can't remove this tab, or else the default target is ignored I'm stuck with this. So, how can I set the target to _blank and remove the Target tab too? Is there a way to hide this tab, but not remove it?
CKEDITOR.on('dialogDefinition', function(ev) {
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested in (the 'link' dialog).
if (dialogName == 'link') {
// Remove the 'Target', 'Upload' and 'Advanced' tabs from the 'Link' dialog.
// dialogDefinition.removeContents('target');
dialogDefinition.removeContents('upload');
dialogDefinition.removeContents('advanced');
// Get a reference to the 'Link Info' tab.
var infoTab = dialogDefinition.getContents('info');
// Remove unnecessary widgets from the 'Link Info' tab.
infoTab.remove('linkType');
infoTab.remove('protocol');
infoTab.remove('browse');
// Get a reference to the "Target" tab.
var targetTab = dialogDefinition.getContents('target');
// Set the default value for the URL field.
var targetField = targetTab.get('linkTargetType');
targetField['default'] = '_blank';
}
});
Regarding images:
There is a very similar situation: several tabs with too much options. What I need is something as easy as the option to attach images in Stackoverflow. Is there any free plugin that could allow me to add images through a link and by uploading them from the computer (with previsualization) using the ckeditor?
Thanks!
Finally I get simple dialogs for: including links, attaching images from a link or uploading from the computer and to include Youtube videos in a simple way. To do this I've edited the configuration file called config.js and it looks like this for my version CKeditor 4.1.2:
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For the complete reference:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// Comment the following line in DEBUG mode:
config.removePlugins = 'devtools';
// See the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Make dialogs simpler.
config.removeDialogTabs = 'image:advanced;image:Link;link:advanced;link:upload';
config.linkShowTargetTab = false;
// In CKEditor 4.1 or higher you need to disable ACF (Advanced Content Filter)
// to make Youtube plugin work:
config.allowedContent = true;
};
CKEDITOR.on('dialogDefinition', function(ev) {
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested in (the 'link' dialog).
if (dialogName == 'link') {
// Remove the 'Upload' and 'Advanced' tabs from the 'Link' dialog.
// dialogDefinition.removeContents('upload');
// dialogDefinition.removeContents('advanced');
// Get a reference to the 'Link Info' tab.
var infoTab = dialogDefinition.getContents('info');
// Remove unnecessary widgets from the 'Link Info' tab.
infoTab.remove('linkType');
infoTab.remove('protocol');
infoTab.remove('browse');
// Get a reference to the "Target" tab and set default to '_blank'
var targetTab = dialogDefinition.getContents('target');
var targetField = targetTab.get('linkTargetType');
targetField['default'] = '_blank';
} else if (dialogName == 'image') {
// Remove the 'Link' and 'Advanced' tabs from the 'Image' dialog.
// dialogDefinition.removeContents('Link');
// dialogDefinition.removeContents('advanced');
// Get a reference to the 'Image Info' tab.
var infoTab = dialogDefinition.getContents('info');
// Remove unnecessary widgets/elements from the 'Image Info' tab.
infoTab.remove('browse');
infoTab.remove('txtHSpace');
infoTab.remove('txtVSpace');
infoTab.remove('txtBorder');
// infoTab.remove('cmbAlign');
}
});
To do this I've read a lot of documentation, but the best pages that have inpired me are the following:
- http://ckeditor.com/ckeditor_4.1rc/samples/plugins/toolbar/toolbar.html
- http://ckeditor.com/forums/Support/Removing-Tabs-Image-Dialog
- http://ckeditor.com/forums/CKEditor/Complete-list-of-toolbar-items
- http://khaledben.wordpress.com/2012/04/28/customize-ckeditor-dialog/
- http://www.question2answer.org/qa/13255/simple-ckeditor-how-to-modify-it-to-be-simple-solution
I hope this helps someone else with the same problem. Cheers!
这篇关于如何在ckeditor中配置简单的链接和图像附加？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
