0

Пытаюсь вставить canvas в contenteditable при помощи следующей функции

    $('div[contenteditable=true]').keydown(function(e) {
            var insert = 
                  '<div class="row">'+
                  '<div class="col-md-12">'+
                  '<canvas class="sig-canvas" width="620" height="160"></canvas></div></div>';
            if (e.keyCode == 13) {
                   document.execCommand('insertHTML', false, insert);
                   return false;
            }
    });

Но проблема в том что canvas вставляется и не работает. Как встроить canvas в contenteditable?

Ошибка: Uncaught TypeError: Cannot read property 'getContext' of undefined. Как добавить контекст после встраивания canvas? Использую sketch.js. http://intridea.github.io/sketch.js/ Подключаю так:

    <script type="text/javascript">
       $(function() {
            $('.sig-canvas').sketch();
       });
    </script>   

Это все перед закрывающим тегом body

2
  • Для того чтобы рисовать в тексте. 8 ноя 2015 в 9:03
  • А что конкретно не работает? Что пишет консоль? В какой момент вы и как пользуетесь канвасом? 8 ноя 2015 в 9:24

2 ответа 2

0

Из MDN следует, что contentEditable работает почти для всех HTML элементов, хотя в данной ситуации canvas хорошо работает внутри contentEditable.

Стоит смотреть логи в момент, когда "не работает", и вероятнее всего он не работает, потому, что к нему не привязаны никакие обработчики событий

4
  • Canvas в contentEditable, если прописывать сразу в html, работает. А вот как его туда вставить уже после загрузки? 8 ноя 2015 в 9:08
  • в чем заключается такая надобность? Пользователь сам может вставлять сколько хочет canvas'ов и рисовать в них?
    – Ni55aN
    8 ноя 2015 в 9:15
  • Да именно так. Идея в том чтобы не использовать дополнительные страницы и прочие отображения. 8 ноя 2015 в 9:22
  • И как определяется, что canvas отвечает действиям пользователя? В примере выше никаких обработчиков событий не замечено
    – Ni55aN
    8 ноя 2015 в 9:29
0

Разобрался. Всем спасибо за участие. И все таки canvas внутри contenteditable работает.

    $('div[contenteditable=true]').keydown(function(e) {
          if (e.keyCode == 13) {
                  document.execCommand('insertHTML', false, '<canvas class="sig-canvas" width="620" height="160"></canvas>');
                  $(function() {
                        $('.sig-canvas').sketch();
                  });
                  return false;
         }
    });

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.