javascript - 将HTML内容导入TinyMCE编辑器(Importing HTML Content to TinyMCE Editor)

Question

I am using TinyMCE editor.

(我正在使用TinyMCE编辑器。)

Although I reviewed all the topics in Stackoverflow on the website, I could not show my HTML content with "setContent".

(尽管我查看了网站上Stackoverflow上的所有主题，但无法使用“ setContent”显示HTML内容。)

My content was included as HTML, but it appears to be plain text.

(我的内容已包含为HTML，但似乎是纯文本。)

Script code is as follows:

(脚本代码如下：)

<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:

(输出如下：)

  ask by Sinan Yorulmaz translate from so

Answer 1

if you need some HTML inside input in Larvel blade(you added a laravel tag so i assumed you work with laravel blade here) you can do it like so:

(如果您需要在Larvel刀片中的输入中添加一些HTML（您添加了laravel标签，因此我假设您在这里使用laravel刀片），则可以这样做：)

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

You dont need to initialize content in javascript

(您不需要初始化javascript中的内容)