Question

我目前面临2个问题，我是Ractive js的新手 1）当我使用type="text/ractive"并尝试将ckeditor用于我的textarea时，如果我删除了type="text/ractive"然后ckeditor显示，我怎么能同时使用这两个？{br} />

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/

与textarea ractive js

1 个答案: