Question

在TinyMCE中，我可以插入图像并将其居中。生成的代码如下：

ionic start myapp

但是，当我保存textarea时，<img height="684" src="/static/media/uploads/about.jpg" style="margin-left: auto; margin-right: auto; display: block;" width="938" />样式将被删除。

我也尝试了以下方法，但都是徒劳的：

设置display: block;：
```

```
当我保存textarea的内容时，<img ... >的样式被删除。
在中，设置：
```
tinymce.init
```
在verify_html: false中设置valid_children: "+body[style]"并在textarea中添加以下内容：
```
tiymce.init
```

在tinymce.init中设置以下内容：

<style>
p img {
  display: block;
}
</style>

那么，我如何将图像置于TinyMCE中心呢？

Answer 1

编辑CSS

如果您能够在页面中插入css，只需将images属性设置为display: block：

p img {
    display: block;
}

编辑TinyMCE

如果你不能超过css文件，你可以以某种方式编辑TinyMCE编辑器，这样你就可以在text-align: center按钮中使用它的构建，它应该像你的代码那样使用？

您可以像这样设置TinyMCE的工具栏：

$('#your_editor').tinymce({
    plugins: 'link,code,preview,autolink',             
    height: 350,
    width: 750,
    toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image | preview code"
});

在toolbar:中，您可以选择要添加的按钮。使用aligncenter，您可以创建一个按钮，您可以使用该按钮将图像与中心对齐。

Answer 2

我想出了一个解决方案：

修改tinymce.init：

（a）添加格式：将类center和必要的styles添加到包含img的每个居中的块元素。

formats: {
    aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'center',
                  styles: {display: 'block', margin: '0px auto', textAlign: 'center'}},
}

（b）添加JavaScript以在编辑窗口中正确显示居中元素：将以前添加的margin: 0px auto;替换为margin: 0px auto; display:block; text-align: center;：

var value = $('textarea').val();
value = value.replace('margin: 0px auto;', 'margin: 0px auto; display:block; text-align: center;');
$('textarea').val(value);

然后在我们自己的CSS文件中添加以下内容，以在HTML页面中正确显示居中元素：

.center {
    display: block;
    margin: 0 auto;
    text-align: center;
}

上面的解决方案花了我几个小时才搞清楚，因为TinyMCE不想保存自己创建的样式display: block;！

TinyMCE：如何使图像居中？

2 个答案: