2路有约束力的textarea ractive JS

问题描述：

我目前所面临2的问题，我是新来Ractive JS
1）由于我使用type="text/ractive"，并试图用的CKEditor我textarea，这是不显示，如果我删除type="text/ractive"然后ckeditor显示，我怎么能使用两个？
2路有约束力的textarea ractive JS

2）我使用两路为textarea，这似乎是做工精细，但当textarea被替换ckeditor textarea插件双向绑定，因为变化在ckeditor textarea发生不工作，我认为它会更新值绑定基于某些事件，因为我不直接更改textarea，它正在由ckeditor更新。

<script id="edit-template-quick" type="text/ractive"> 
     // this is returning me the form 
    drupal_render(drupal_get_form('xyz')); ?> 
</script> 

function xyz($form_id, $form_ids, $value) { 
    $form[$value] = array(
    '#type' => 'text_format', 
    '#wysiwyg' => TRUE, 
    '#attributes' => array(
     'value' => "{{ $value }}", 
    ), 
); 
    return $form; 
} 

    ractive = new Ractive({ 
     el: 'container-quick', 
     template: '#edit-template-quick', 

     data: { 
       slides: json 
     } 
    });

答

1）使用type=text/ractive或type=text/html的目的是保持从浏览器试图解析内容的JavaScript。它可以用来提供模板：

<script id="edit-template-quick" type="text/ractive"> 
    <p>hello {{place}}</p> 
</script>

它看起来像你的意图是让服务器把HTML放入脚本标记？我会在浏览器中查看实际发送的内容，我怀疑它在某个地方失败。如果是想要在浏览器中运行某个功能，请删除type规范。

2）你可以使用一个装饰，但我认为一个组件需要更好的封装编辑：

：

var CKEditor = Ractive.extend({ 
    template: '<textarea>{{{text}}}</textarea>', 
    onrender() { 
     var editor = this.editor = CKEDITOR.replace(this.find('textarea')); 

     editor.on('change', evt => { 
      this.set('text', evt.editor.getData()); 
     }); 
    }, 
    onteardown() { 
     this.editor.destroy(); 
    } 
});

然后，假设像components: { 'ck-editor': CKEditor }在你的设置，你可以通过使用它

<pre>{{doc}}</pre><ck-editor text="{{doc}}"></ck-editor>

例如见http://jsfiddle.net/martypdx/jv15gjpr/

感谢您的快速回复，在第二个方案中的问题是'Ractive组件的双向binding'，textarea的是获得upda因为我可以看到更改，但是值不具有约束力，我认为它只会绑定在textarea上的某种事件上，比如'change'或'on'。 – mks

>数值没有约束力 - 不确定我关注，你能举个例子吗？ – martypdx

我正在尝试双向绑定'textarea' http://docs.ractivejs.org/latest/two-way-binding，但它没有绑定，因为它嵌入了ckeditor。 – mks

2路有约束力的textarea ractive JS

相关推荐