Как активировать функцию повышения виджета CKEditor после рендеринга DOM?

инициализирую CKEditor в React компонента, как это:Как активировать функцию повышения виджета CKEditor после рендеринга DOM?

render:() -> 
    <div ref="editable" dangerouslySetInnerHTML={{__html: @props.html}} /> 

componentDidMount:() -> 
    @editor = AlloyEditor.editable(@refs.editable, {extraPlugins: AlloyEditor.Core.ATTRS.extraPlugins.value + 'plugins go here'}) 
    @editor.get('nativeEditor').on('blur', (event) => 
    @props.handleChange()) 
    //At this point the @props.html changes and the component is re-rendered

Я определяю виджеты после этой tutorial. Соответствующие элементы html должным образом распознаются как виджеты, и все работает нормально до тех пор, пока не будет запущено событие «размытия». После того, как компонент перерисовывается, функции upcast виджетов снова не вызываются, и элементы html больше не становятся виджетами.

Я думал, что я мог бы использовать такие методы, как checkWidgets и initOnAll в методе componentDidUpdate, но они работают только для кандидатов виджетов с .cke_widget_new класса. Насколько я понимаю, повышение происходит на этапе обработки данных (html), и похоже, что редактор не обрабатывает html снова после повторной визуализации DOM. Что я могу сделать по этому поводу? Благодаря!

Обновление: В конце концов решение oleq сработало для меня. Я добавил:

componentDidUpdate:() -> 
    data = @editor.get('nativeEditor').getData() 
    @editor.get('nativeEditor').setData(data)

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

источник

2016-01-18 Anastasia

Я не отреагирую, но насколько я понимаю, он собирает необработанный редактор HTML 'editor.editable(). GetHtml()' (который не является данным!), А затем после повторной инициализации он просто ставит он обратно, но все внутренние ссылки редактора на элементы (также виджеты) сломаны, потому что это в основном новое дерево. Не могли бы вы как-то настроить React, чтобы он использовал 'editor.getData()' для сбора HTML, а затем 'editor.setData (data)' для повторной рендеринга? Затем все виджеты будут инициализироваться автоматически. – oleq

Спасибо большое! Это почти работает. Единственная проблема заключается в том, что теперь виджеты вставлены в самый верх редактируемого элемента (а вставка второго виджета вызывает ошибку). Я попытаюсь понять, почему это происходит. «Данные», возвращаемые 'editor.getData()', уже имеют вид будущего виджетов над остальной частью html. – Anastasia

Вы можете использовать editor.widgets.checkWidgets() как описано здесь:

https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_plugins_widget_repository.html

Основная идея заключается в том, что он проверяет все виджеты в документе и обновляет те, которые не были сделаны виджеты еще ,

Если вы хотите только создать один виджет, на который вы ссылаетесь, сделайте это с помощью initOn(), зарегистрированного на той же странице.

источник

2018-02-26 15:47:11 Halcyon

Как активировать функцию повышения виджета CKEditor после рендеринга DOM?

ответ

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