我正在尝试制作一个短代码“插件” – 类似于wordpress与TinyMce一起使用的代码.我希望用户能够通过按钮插入短代码(如或[image id =“9”]),然后显示占位符而不是实际的短代码.一旦我开始工作,我会将所有代码都放到
github上.
当前设置
我有一个按钮,使用insertHtml()将html插入编辑器,如下所示：
// Custom button code CKEDITOR.instances['editor_instance_name'].insertHtml '<div class="media-library-gallery"></div>'
我添加了extraAllowedContent以允许div与我需要的类：
// CKEditor configuration (config.js) config.extraAllowedContent = 'div(media-library-image,media-library-gallery)';
我设法使用以下代码将div.media-library-gallery替换为图像：
(function() {
CKEDITOR.plugins.add('media_gallery',{
init: function(editor) {
CKEDITOR.addCss('.media_gallery{background: #f2f8ff url("/assets/gallery.png") no-repeat scroll center center; border: 1px dashed #888; display: block; width:100%; height: 250px;}');
},afterInit: function( editor ) {
var dataProcessor = editor.dataProcessor;
var dataFilter = dataProcessor && dataProcessor.dataFilter;
dataFilter.addRules({
elements: {
'div': function(element) {
if (element.attributes.class == "media-library-gallery") {
var fakeElement = editor.createFakeParserElement(element,'media_gallery','div',false);
return fakeElement;
}
}
}
})
}
})
})();
问题
目前替换在段落标记内嵌套div：
<p> <div class="media-library-gallery"></div> </p>
我不想从默认的CKEDITOR.ENTER_P更改enterMode,但我想摆脱周围的p.我可以使用insertHtml执行此操作,还是编写一个可以为我执行此操作的规则？欢迎任何其他建议.
我一直在挖掘http://docs.ckeditor.com/左右的解决方案/灵感,但运气不佳.
解决方法
有点晚了,但尝试将div作为元素插入：
var element = CKEDITOR.dom.element.createFromHtml('<div class="media-library-gallery"></div>');
CKEDITOR.instances['editor_instance_name'].insertElement(element);
