Question

您已经阅读了TinyMCE的文档，但无法找到为什么TinyMCE在iframe中删除了allowfullscreen属性？当我插入并重新编辑它时剥离。尝试了iframe网址

<style>
   /* I put the style outside the element 
    * so if I need to change a value, the
    * changes will apply to all the elements 
    * that has this class.
    */

    * {color: black;}

    .w-80 {
        width: 80px;
    }
    
    p {text-transform: uppercase; font-weight: bold;}
    .color-0 {background-color: #0FA;}
    .color-1 {background-color: #FF0;}
    .color-2 {background-color: #F0F;}
    .color-3 {background-color: #0F0;}
    .color-4 {background-color: #00F;}
</style>
<div class="container">
    <!-- Here are the three input on which I added -->
    <!-- the "data-enter-target" attribute -->
    <input type="text" data-enter-target id="input-1" class="w-80" value="Value Here"  />
    <input type="text" data-enter-target id="input-2" class="w-80" value="Second value"  />
    <input type="text" data-enter-target id="input-3" class="w-80" value="Third value"  />

    <!-- Other elements like paragraphs -->
    <p></p>
    <p></p>
    <p></p>
    <p>Click several times</p>
    
    <!-- Add the submit button and add it an onclick function -->
    <input type="button" id="myButton" value="Submit" onclick="btnSubmit()"/>
</div>
<script>
    // Retrieve all the elements that contains the attribute
    // and store them in a variable as an array.
    var targets = document.querySelectorAll('input[data-enter-target]');
    
    // Then for each element
    targets.forEach(function(current_element, index) {
        // Add the event listener on the element
        current_element.addEventListener("keydown", function(event) {
            // Check if the key pressed is 'Enter'
            if(event.key == "Enter") { // You could also use the keycode (Enter=13)
                // Do the thing you wanna do when Enter is pressed
                // In this case we wanna trigger the onclick event of the submit button
                document.getElementById('myButton').click();
            }
        });
    });
    
    // Add the function called when the button is clicked
    function btnSubmit(event) {
        // Do whatever you want when the button is clicked
        alert('Hey!!! The button has been clicked!');

        // Ex: You could replace or add content to an existing element
        document.querySelectorAll('p').forEach(function(element) {
            element.innerHTML='<span class="color-'+parseInt(Math.random()*5)+'">Bob loves potatoes!</span>';
        });
    }
</script>

Live Fiddle code。谢谢你的帮助

Answer 1

您可以使用valid_elements属性告诉TinyMCE编辑器中允许哪些有效的元素和属性。

我使用以下配置行更新了您的小提琴：http://fiddle.tinymce.com/8Lfaab/1：

valid_elements: "*[*]"

不可否认，您可能不希望包含所有标记和所有属性，但这表明您可以使其正常工作。

请注意您的小提琴正在使用TinyMCE 3.5.x - 该版本的TinyMCE已不再开发中。转移到当前版本和正在积极开发的TinyMCE 4.5将是一个非常好的主意。如果您使用TinyMCE 4.5，则可以使用extended_valid_elements而不是valid_elements。

TinyMCE在iframe中删除了allowfullscreen属性？

1 个答案: