2 种方式与 textarea ractive js 绑定

Question

我目前面临 2 个问题，我是 Ractive js 的新手
1) 当我使用 type="text/ractive" 并尝试为我的 textarea 使用 ckeditor 时，它没有显示，如果我删除 type="text/ractive" 然后显示 ckeditor，我如何同时使用两者？

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
       }
   });

Answer 1

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/

2 种方式与 textarea ractive js 绑定

2 way binding with textarea ractive js

javascript

jquery

drupal-7

ractivejs