저는 CKEditor로 인라인 편집을 사용하고 있으며 요소를 각도 범위 값에 바인딩하고 싶습니다.인라인 ckeditor 내부의 각도 바인딩
<div contentEditable="true">
<p>Here is the value: {{testval}}</p>
</div>
testval은 편집기 외부에서와 동일한 방식으로 업데이트해야합니다.
편집기에서이 텍스트를 보호하려면 placeholder plugin과 비슷한 것을하고 싶습니다. 즉, 자리 표시 자 대신 동적 텍스트를 동적으로 표시하는 자리 표시자를 사용할 계획입니다.
전체 내용을 각진 요소로 묶는 방법에 대한 몇 가지 예를 보았지만 개별 요소는 포함하지 않았습니다. 나는 각도와 ckeditor에 대해 아직 상당히 익숙하므로 도움이나 조언을 많이 주시면 감사하겠습니다.
원하는대로 지시어를 사용해야하는 것처럼 들립니다. 내가 완전히 익숙하지 않기 때문에 나는 어색해 할 수도 있지만, 당신이 제공 한 것에 의해 goigg이 예제를 가정 해 봅시다.
HTML
<body ng-app="myApp">
<div content-editable content="content"></div>
</body>
여전히 자바 스크립트
angular.module('myApp', [])
.directive('contentEditable', function() {
restrict: 'A',
replace: true,
scope: {
// Assume this will be html content being bound by the controller
// In the controller you would have:
// $scope.content = '<div>Hello World</div>'
content: "="
},
template: '<div contentEditable="true"><p>Here is the value {{ content }}</p></div>'
});
내가 완전히 이해 확실하지만, 내가 더 가까워지고있어 알려 주시기 없습니다.
모델의 HTML 텍스트를 요소에 바인딩한다고 가정합니다. 모델에있는 것을 렌더링하기 위해 ng-bind-html을 사용했고 인라인 기능을 추가하고 모델을 인라인 편집기에서 발생하는 변경 사항에 바인딩하기 위해 ck-inline 지시문을 만들었습니다. 이 지시문은 ng-bind-html이 작동하도록 요구하며 모듈에 ngSanitize를 추가해야합니다. 요소에 지시문 ck-inline을 추가하십시오.
텍스트를 렌더링하지 않으면 ckeditor가 어떻게 든 모델을 망가 뜨리는 모든 값을 삭제한다는 것을 알아 냈으므로 $ timeout을 사용합니다. 비 인라인 옵션). 여기에 코드가 있습니다.
yourModule.directive('ckInline', ['$sce', '$timeout', function($sce, $timeout){
return{
require : '?ngBindHtml',
scope:{value:"=ngBindHtml"},
link : function(scope, elm, attr, ngBindHtml)
{
$timeout(function()
{
var ck_inline;
elm.attr("contenteditable", "true");
CKEDITOR.disableAutoInline = true;
ck_inline = CKEDITOR.inline(elm[0]);
if (!attr.ngBindHtml)
return;
ck_inline.on('instanceReady', function()
{
ck_inline.setData(elm.html());
});
function updateHtml()
{
scope.$apply(function()
{
scope.value = $sce.trustAsHtml(ck_inline.getData());
});
}
ck_inline.on('blur', updateHtml);
ck_inline.on('dataReady', updateHtml);
});
}
};
}]);
내가 무엇을 하려는지 완전히 이해하고 있는지 확실하지 않습니다. 그러나 자바 스크립트 (각도)를 인라인 WYSIWYG 편집기에 바인딩하려는 의도가있는 경우 XSS 및 CSRF 공격에 대해 웹 사이트를 열어두기 때문에 나쁜 생각 일 수 있습니다. 그러나 다시, 어쩌면 나는 이해하지 못하고있다 ... –
코멘트 주셔서 감사 드리며, 당신이 옳다; 인라인 WYSIWYG 편집기에 각을 바인딩하고 싶습니다. 그러나 편집기의 목적은 실시간 편집 가능한 구조화 된 보고서 (기본적으로 편지 병합)를 제공하는 것입니다. 즉, 우리는 편집자의 결과를 다시 데이터베이스에 기록 할 계획이 없으며 사용자 세션에서만 사용되며 편집 된 문서를 인쇄합니다. – Geoff