标签: tinymce-4

我在弹出窗口中使用tinyMCE编辑器，弹出窗口是由ajaxcall构建的。仅当 ajaxcall 调用弹出窗口时，编辑器才第一次正确呈现。关闭弹出窗口后，当我再次打开弹出窗口时，编辑器不会渲染，它只会显示带有 HTML 代码的文本区域？有什么办法解决这个问题吗。

小MCE 4.1.3

没有显示错误！

目前我使用的是非常旧的版本（2.8），tinymce现在我正在尝试将其升级到最新版本（4）。在那个过程中，我遇到了一些麻烦，主要的问题是<![if !mso]>在旧版本中隐藏的 html 查看器中显示，

我使用这个编辑器作为我的邮件编辑器，所以基本上我正在将响应式 html 邮件文本加载到编辑器中。但它<![if !mso]>在整个 html 查看器中都显示了这段代码，但没有解释为注释。

我使用的代码，（根据示例）

tinymce.init({
  selector: 'textarea',
  height: 500,
  theme: 'modern',
  plugins: [
    'advlist autolink lists link image charmap print preview hr anchor pagebreak',
    'searchreplace wordcount visualblocks visualchars code fullscreen',
    'insertdatetime media nonbreaking save table contextmenu directionality',
    'emoticons template paste textcolor colorpicker textpattern imagetools codesample'
  ],
  toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent …

你能告诉我如何将表单上的所见即所得内容提交到相应的文本区域吗？

我对表单提交进行了 javascript 验证，但是当验证代码被触发时，编辑器 textareas 为空。所以我仍然收到错误“需要字段...”。我不明白 TinyMCE 如何处理这个问题，但这毫无意义。我的 js 验证事件侦听器位于脚本的最后，但 textareas 仍然是空的。

是否有一些触发器可以强制 TinyMCE 在提交时使用内容填充文本区域？

我在 Angular 5 项目中使用 TinyMCE 编辑器，并且想要处理图像上传，但我目前无法做到这一点。这是我当前的代码：

<editor 
  name="questionStatement" 
  apiKey="somekey" 
  [init]='{
    plugins : [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern"
      ],
      toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 
      past_date_images: true,
      external_plugins: { tiny_mce_wiris: "https://www.wiris.net/demo/plugins/tiny_mce/plugin.js" },
      toolbar: "tiny_mce_wiris_formulaEditor, tiny_mce_wiris_formulaEditorChemistry"
    }'
  </editor>

我正在遵循此代码示例https://codepen.io/nirajmchauhan/pen/EjQLpV …

我已经设置 tinyMCE 来进行图像上传，它在编辑器中显示上传的图像，但是在检查编辑器 HTML 的源代码时，我可以看到 src 属性被设置为文件路径：

<img src="../../../api/images/1"/>

我有一个 file_picker_callback，它将图像发布到我的后端服务器以保存图像，并在 tinyMCE 文档中指定的“位置”键中返回一个绝对 URL：https ://www.tiny.cloud/docs/configure/file -image-upload/#images_upload_url

但我不确定为什么无论提供绝对 URL，图像上设置的 src 都以“../../../”开头。

相关的 tinyMCE 配置：

  tinymce.init({
      file_picker_types: 'file image',
      file_picker_callback: function(cb, value, meta) {
        let tinyMCE = this;
        var input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*,.doc,.docx,.txt,.rtf,.odt,.pdf');

        input.onchange = function() {
          var file = this.files[0];
          var reader = new FileReader();
          reader.onload = function () {
            // Register the blob in TinyMCEs image blob registry.
            var id = 'blobid' + (new Date()).getTime();
            var …

将tinyMCE 与Angular 结合使用，我需要在光标位置插入文本，最好使用工具栏按钮。

据我了解，我需要onExecCommand通过命令使用该事件mceInsertContent。

我查看了以下内容：

• 如何在TinyMCE编辑器中光标所在位置插入文本？
• 在 TinyMCE 编辑器中光标所在位置插入文本

但这些解决方案在这种情况下没有帮助。

这是文档

编辑器-dialog.component.html

<editor [init]="tinyMceConfig"
  [formControl]="data.formControl">
</editor>

编辑器-dialog.component.ts

/* ... */

export class EditorDialogComponent implements OnInit {
  tinyMceConfig: any;

  constructor(
    /* ... */
  ) { }

  ngOnInit() {
    this.configureTinyMce();
  }

  configureTinyMce() {
    this.tinyMceConfig = {
      theme: 'modern',
      menubar: false,
      branding: false,
      height: 400,
      skin_url: 'assets/tinymce/skins/lightgray',
      inline: false,
      plugins: [
        'advlist lists link image directionality',
        'searchreplace visualblocks visualchars media table contextmenu paste textcolor colorpicker pagebreak code'
      ],
      // …