2015-06-29 46 views
0

我有以下代码:TinyMCE的文本对齐按钮不在线上编辑工作

HTML:

<p id="edit">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

JS:

<script type="text/javascript"> 

    $(document).ready(function(){ 
     tinymce.init({ 
     inline : true, 
     selector : 'p#edit' 
     }); 
    }); 
</script> 

,这是工具栏看起来怎么样:

tinymce toolbar

文本对齐按钮和子弹列表按钮,也缩进按钮不起作用

这是怎么回事?

回答

0

我还没有尝试制作一个p元素作为编辑器,但这里是我的代码与textarea。关键是你使用了正确的选择器和正确的模式。

HTML:

<div class="form-group"> 
    <div class="col-sm-12"> 
     @Html.TextAreaFor(m => m.MarketingInformation, new { @class = "form-control mceEditor" }) 
    </div> 
</div> 

JS:

<script type="text/javascript"> 
     tinymce.init({ 
      mode: "specific_textareas", 
      editor_selector : "mceEditor", 
      height: 100, 
      plugins: [ 
       "advlist autolink lists link charmap print preview anchor textcolor", 
       "searchreplace visualblocks code fullscreen", 
       "insertdatetime table contextmenu paste textcolor" 
      ], 
      toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | forecolor backcolor" 
     }); 

</script> 

我认为,如果你使用的模式为 '精确' 它应该工作,但我还没有尝试过; http://www.tinymce.com/wiki.php/Configuration3x:mode

+1

哦,你拯救了我的生命,我在这个问题上挣扎了很长时间,问题在于它不起作用,因为我将编辑器应用到了p标记,我和ckeditor有同样的问题,而且我想知道为什么所有的编辑不工作大声笑。现在我将它应用于div父项并且它可以工作。非常感谢 – medBo

+0

没问题。只是将其标记为接受的答案。 –

+1

是的,当然,这是我之前发布的另一个问题,你可以回答它,我提供50分的奖励,你应得的:) http://stackoverflow.com/questions/31055735/ckeditor-toolbar-is-not - 完全显示 – medBo