Вставка многострочной строки PHP в переменную Javascript

Мой вопрос
Мой вопрос касается правильного разбора HTML из php в переменную внутри объекта javascript (который в данном случае является переменной-значением ace-editor)

Моя проблема

У меня есть текстовая область для HTML и CSS, HTML извлекается из базы данных и должен быть вставлен в поле croppie, в настоящее время я использую PHP json_encode функциональность, чтобы поместить его в переменную, но, похоже, все еще уходит от значения.

Мой код

<?php

$css = ($modify) ? trim($template->style()) : "";
$html = ($modify) ? trim( $template->html() ) : "";

$html = json_encode($html);
$css = json_encode($css);?>
YUI().use(
'aui-ace-editor',
function(Y) {
var editorhtml = new Y.AceEditor({
boundingBox: '#editor-html',
height: '400',
mode: 'html',
value: '<?php echo substr( $html, 1, -1 ); ?>',
width: '100%',
showPrintMargin: false
}).render();

var editorcss = new Y.AceEditor({
boundingBox: '#editor-css',
height: '400',
mode: 'css',
value: '<?php echo substr( $css, 1, -1 ); ?>',
width: '100%',
showPrintMargin: false
}).render();
}
);

Что просходит
Когда я использую это и открываю определенный шаблон, которым можно управлять, я не смогу увидеть текстовую область (потому что редактор ace не мог быть загружен), я получаю случайные ошибки, относящиеся к строке 666, которая является точной строкой HTML хранится в. Я правильно обработал выходные данные в json_encode .. верно?

на этом скриншоте вы можете увидеть HTML / CSS, который вставляется. Но проблема возникает в строке 666, в которой находится HTML.

Нажмите здесь, если скриншот не читается для вас

Так что мой вопрос ..

Почему именно он не анализирует HTML в объект правильно? Я не дезинфицирую это правильно или я что-то упускаю?