时间戳

首页 > 解决方案 > 将 HTML 内容导入 TinyMCE 编辑器

javascript - 将 HTML 内容导入 TinyMCE 编辑器

问题描述

我正在使用 TinyMCE 编辑器。尽管我在网站上查看了 Stackoverflow 中的所有主题，但我无法使用“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>

输出如下：

标签： javascriptlaraveltinymce

解决方案

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

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

您不需要在 javascript 中初始化内容

推荐阅读