Question

我是CKeditor的新手，希望在我的页面上设置它。我有一个精心设计的HTML表单，其中包含大约13个textareas。我尝试在页面上加载了13个编辑器，但这对于用户而言只是凌乱而且势不可挡。我希望如果编辑器的工具栏只显示用户在textarea框上单击（焦点）然后在他们点击时隐藏工具栏。

我真的很喜欢他们所拥有的内联编辑器，这正是我所寻找的，但一直在努力让ckeditor通过内联来定位并加载我所有的13个文本区域元素。我已经阅读了很多网站，但无法找到问题的解决方案。我已经尝试了下面的公式，它应该通过他们的类来定位元素，但似乎内联不能同时容忍多个实例。有人知道如何在页面上的所有textareas元素上内联工作吗？

这是我尝试过的代码但不好。

var elements = CKEDITOR.document.find( '.foo' ),
    i = 0,
    element;

while ( ( element = elements.getItem( i++ ) ) {
    CKEDITOR.inline( element );
}

Answer 1

您可以使用＆＃34;每个＆＃34; jquery中的方法循环遍历每个textarea并为其分配内联编辑器。我知道这很有效，因为我刚刚在一个工作项目中实现了它。像这样：

$("textarea").each(function(){
    CKEDITOR.inline( this );
});

Answer 2

作为解决方法，我使用下面的脚本为每个textareas元素加载一个实例。如下所示，每个textarea元素都有一个唯一的ID，到目前为止，这似乎是解决我问题的唯一方法。

<script>
CKEDITOR.inline( 'inline_editor1' );
CKEDITOR.inline( 'inline_editor2' );
CKEDITOR.inline( 'inline_editor3' );
CKEDITOR.inline( 'inline_editor4' );
CKEDITOR.inline( 'inline_editor5' );
CKEDITOR.inline( 'inline_editor6' );
CKEDITOR.inline( 'inline_editor7' );
CKEDITOR.inline( 'inline_editor8' );
CKEDITOR.inline( 'inline_editor9' );
CKEDITOR.inline( 'inline_editor10' );
CKEDITOR.inline( 'inline_editor11' );
CKEDITOR.inline( 'inline_editor12' );
CKEDITOR.inline( 'inline_editor13' );
</script>

Answer 3

这样可行......它适用于我...

＆＃13;

<html>
<head>
<title>Untitled Document</title>
</head>
<body>

<form id="form1" name="form1" method="post" action="">

  <table width="90%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><textarea name="editor1" id="editor1" cols="45" rows="5" class="editor"></textarea></td>
    </tr>
    <tr>
      <td><textarea name="editor2" id="editor2" cols="45" rows="5" class="editor"></textarea></td>
    </tr>
    <tr>
      <td><textarea name="editor3" id="editor3" cols="45" rows="5" class="editor"></textarea></td>
    </tr>
  </table>
</form>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
 <script type="text/javascript">

   $("textarea.editor").each(function(){
     var txt = $( this ).attr('name');
     CKEDITOR.replace(txt , {
       extraPlugins : 'tableresize',
       toolbar : 'Full',
       skin: 'v2',
       enterMode		: 1,
       shiftEnterMode	: 2,
       height :'400',
     });
   });
		
    </script>
</body>
</html>

＆＃13;

如何为CKeditor Inline定位所有textarea元素

3 个答案: