2015-11-20 6 views
9

В настоящее время я работаю над портом CKEditor в конкретный5. Как часть этого, конкретный5 имеет возможность создавать «фрагменты», которые могут быть вставлены через редактор. Разработчики имеют возможность определить, какие HTML вывода этих виджеты производят, но в то время как в режиме редактирования, он просто показывает держатель места со следующей HTML:CKEditor Вставка не редактируемого HTML в стиле

'<span 
    class="ccm-content-editor-snippet" 
    contenteditable="false" 
    data-scsHandle="' + selectedSnippet.scsHandle + '" 
>' + selectedSnippet.scsName +'</span>' 

Я смотрел в CKEditor виджеты, но не обязательно захотите загромождать мою панель инструментов потенциально большим количеством кнопок для активации такой функциональности. Мне любопытно, можно ли добавить что-то в раскрывающийся список stylescombo (или аналогичный раскрывающийся список), который затем вставляет фрагмент, подобный приведенному выше.

В настоящее время я должен попробовать и это можно найти на https://github.com/ExchangeCore/Concrete5-CKEditor/blob/feature/magicstyles/assets/concrete5styles/plugin.js#L17-L30 Это не совсем работает, потому что у меня нет способа вставить selectedSnippet.scsName во внутренний стиль HTTML. Есть ли способ сделать это или какой-либо другой более очевидный способ использовать такие функции вставки в CKEditor, не делая тонны кнопок панели инструментов?

Кроме того, содержимое этого диапазона должно быть удалено, но не доступно для редактирования.

ответ

3

С помощью этого плагина вы можете создать выпадающее меню для вставки любого HTML-блок, который вы хотите: http://ckeditor.com/addon/htmlbuttons

Если она не соответствует вашим потребностям, посмотрите на исходный код и выберите те части, которые вы пропали без вести.

+0

Я закончил тем, что отдернул некоторый код отсюда. Он работал очень хорошо, но мне пришлось быть осторожным с порядком загрузки, я обнаружил, что если бы я попытался добавить кнопку после того, как все уже было инициализировано, оно не будет отображаться (например, в запросе ajax) –

 Смежные вопросы

  • Нет связанных вопросов^_^