正在将 HTML 内容导入 TinyMCE 编辑器

Question

我正在使用 TinyMCE 编辑器。虽然我在网站上查看了 Whosebug 中的所有主题，但我无法用 "setContent" 显示我的 HTML 内容。我的内容包含为 HTML，但它似乎是纯文本。

脚本代码如下：

<script type="text/javascript">
    tinymce.init({
        setup: function (editor) {
            editor.on('init change', function () {
                editor.setContent('{{ @$post->body }}');
                editor.save();
            });
        },
        height: 400,
        branding: false,
        selector: '#sy-editor',
        element_format : 'html',
        plugins: 'print preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap emoticons',

        menubar: "",
        toolbar: 'image media link | formatselect | bold italic underline | forecolor | alignleft aligncenter alignright | bullist numlist | table charmap emoticons | fullscreen',
        save_enablewhendirty: true,
        save_onsavecallback: function () {
            var body = tinymce.activeEditor.getContent();
        },
        automatic_uploads: true,
        image_title: true,
        images_upload_url: '{{ route('news.image.upload') }}',
        file_picker_types: 'image',
        file_picker_callback: function (cb, value, meta) {
            var input = document.createElement('input');

            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');

            input.onchange = function () {
                var file = this.files[0];
                var reader = new FileReader();

                reader.readAsDataURL(file);

                reader.onload = function () {
                    var blobCache = tinymce.activeEditor.editorUpload.blobCache;
                    var base64 = reader.result.split(',')[1];
                    var blobInfo = blobCache.create(file.name, file, base64);

                    blobCache.add(blobInfo);
                    cb(blobInfo.blobUri(), {title: file.name});
                };
            };
            input.click();
        },
        language_url : '{{ asset('scripts/tinymc-lang-tr_TR.js') }}',
        language: 'tr_TR',
        content_css: [
            '{{ asset('styles/panel.css') }}'
        ],
    });
</script>

The output is as follows:

Answer 1

如果你在 Larvel blade 中需要一些 HTML 内部输入（你添加了一个 laravel 标签所以我假设你在这里使用 laravel blade）你可以这样做：

  <textarea id="sy-editor">
      {{ $post->body }}
  </textarea>

您不需要初始化 javascript

中的内容

正在将 HTML 内容导入 TinyMCE 编辑器

Importing HTML Content to TinyMCE Editor

javascript

tinymce

laravel