Tinymce

Question

我很难理解我需要做什么，才能让 getcontent 生成 html 与 tinymce window/frame/area.

中显示的内容相同

我试过内联和 iframe，但它们 return 结果相同。

我已经开始使用皮肤，以尝试确保 formatting/styling 在加载时应用，但这没有什么区别。

谁能告诉我我需要做什么，这样当我（在网络浏览器中）查看由 getcontent 生成的 html 时，结果在视觉上与我在 tinymce 中看到的完全相同观众？值得注意的是，字体设置没有被保留。（例如，通过从 getcontent 结果创建一个文件并在浏览器中打开它）。

注意.. 正在从 Filemaker 数据库加载 Tinymce（文件 = Notes::Notes_RTE_html）

<!DOCTYPE html>
<html lang=’en’>
<head>
<meta charset=’utf-8’>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='https://website/TINY/tinymce/js/tinymce/tinymce.min.js'></script>
<script>
tinymce.init({
selector: '#GSNotes',
skin_url: 'https://website/TINY/GSNotes-skin/skins/ui/GSNotes-skin/',
content_css : 'https://website/TINY/GSNotes-skin/skins/content/GSNotes-skin/content.min.css',
inline: true,
inline_styles : true,
menubar: false,
statusbar: false,
contextmenu: false,
toolbar_location: 'bottom',
paste_data_images: true,
inline_boundaries: false,
link_context_toolbar: true,
toc_depth: 4,
toc_header: 'h3',
autosave_interval: '5s',
fontsize_formats: '0.5rem 0.75rem 0.85rem 0.9rem 1rem 1.1rem 1.2rem 1.4rem 1.7rem', 
insertdatetime_formats: ['✏️ (%d/%m/%Y  -  %Hh%M)'],

plugins: 'table image imagetools quickbars searchreplace lists link autolink autosave paste media hr codesample insertdatetime toc blockquote ',

quickbars_insert_toolbar: '',
quickbars_selection_toolbar: ' bold italic underline strikethrough | blockquote | forecolor backcolor |  link  |  removeformat',

toolbar: 'searchreplace insertdatetime  | bullist numlist | hr |  paragraphgroup fontgroup insertgroup | tocupdate | print preview restoredraft ',
toolbar_groups: {
    fontgroup: {
    icon: 'change-case',
            tooltip: 'Fonts',
            items: ' fontsizeselect '
    },
        paragraphgroup: {
            icon: 'visualchars',
            tooltip: 'Paragraph format',
            items: 'h1 h2 h3 h4 | toc | alignleft aligncenter alignright alignjustify | indent outdent'
        },
        insertgroup: {
            icon: 'image',
            tooltip: 'Insert',
            items: 'image media table paste codesample'
        }
    },

codesample_languages: [
        {text: 'HTML/XML', value: 'markup'},
        {text: 'JavaScript', value: 'javascript'},
        {text: 'CSS', value: 'css'}
    ],

});

</script>
</head>
<body>

<div id= 'GSNotes' style='min-height: 550px; height: 98% ; font-family: Avenir Next ; font-size: 0.9rem ; line-height: 1.2rem ; color : #1D273D ; ' > " & Notes::Notes_RTE_html & " </div>     

<script>

const saveTEXT = function() {
        const textPlain = tinymce.get('GSNotes').getContent({ format: 'text' });
        const textHTML = tinyMCE.get('GSNotes').getContent();
        const jsonARR = { textPlain, textHTML};
        FileMaker.PerformScriptWithOption ( 'RTE-exit' , JSON.stringify(jsonARR) , '5' ); }
</script>
</body>
</html>

Answer 1

TinyMCE 在 getContent() 查询的结果中不包含附加的 CSS。编辑器的工作方式有点不同。

默认情况下，它会输出“干净”HTML，假设您在定义其外观的平台上有一些 CSS。要使编辑器中的内容与平台上的内容外观相同，请使用 content_css 参数。

因此，如果您需要内容在从 TinyMCE 导出后具有一些样式，则需要在导出后在您这边添加相同的 CSS。例如，添加

<link rel="stylesheet" href="https://website/TINY/GSNotes-skin/skins/content/GSNotes-skin/content.min.css">

Tinymce - 我需要更改什么 - getcontent - 以包含所有 css 样式？

Tinymce - what do I need to change for - getcontent - to inlcude all css styling?

html

javascript

css