for example, I have following content will be used:
<div class="h21copy">
<p>123</p>
</div>
When I initialize with CKEditor, it will become to:
<p>123</p>
screenshots blow:
paste in your config.js
config.allowedContent = true;
Further reading:
https://ckeditor.com/docs/ckeditor4/latest/guide/dev_allowed_content_rules.html
Related
I want to add a div-container with the ace-code editor.
For that I've create this
<div id="editor" class="codeeditor">
<div id="editor-nav" class="codeeditor-nav">HTML | Javascript | CSS | PHP </div>
<div id="editor-code" class="codeeditor-codearea"></div>
</div>
I want to use the sourcecode of another div for the ace-editor
<div id="mycontent">That the code i want to edit</div>
I setup the ace with this
var editor = ace.edit("codeeditor-codearea");
editor.session.setMode("src-min-noconflict/mode/javascript';?>");
How I must setup the ace that
Does it take the content from the "mycontent"?
and show the ace-editor in "editor-code"?
Also, I have the problem, that my content will look unpretty after adding by the editor - is there a way to prevent that?
you can setup the editor like this
var editor = ace.edit("codeeditor-codearea", {
mode: "ace/mode/javascript",
value: document.getElementById("mycontent").textContent
});
?>");
or if you are using an older version of ace
editor.session.setValue(document.getElementById("mycontent").textContent)
Sometimes it is needed to comment out some element attribute without having to remember it in order to restore it quickly after some tests.
Commenting out whole element is achievable with HTML commenting syntax
<div>
<!-- <h2>Hello</h2> -->
<span>hi</span>
</div>
However this won't work with a single attribute (causes rendering error)
<my-comp id="my_comp_1"
v-model="value"
<!-- :disabled="!isValid" -->
#click="handleClick">
</my-comp>
The best approach I could see and used before was to make a tag backup by copying whole element and settings v-if="false" for it (or comment out whole copied element) and continue to experiment with original one
I don't think you can put an HTML comment inside a component tag, for much the same reason you can't put comments inside an HTML element opening tag. It's not valid markup in either situation. I think the closest you could come would be to place the comment in the quotes:
:disabled="// !isValid"
Which would have the same effect as:
:disabled=""
Depending on whether your component can handle that value being missing, that might fit your needs.
Prefix the attribute value with data- or Wrap with data attribute.
<my-comp id="my_comp_1"
v-model="value"
data-:disabled="!isValid"
data-_click="handleClick"> # `#` could not be used
</my-comp>
or
<my-comp id="my_comp_1"
v-model="value"
data='
:disabled="!isValid"
#click="handleClick">
'>
</my-comp>
I'll with the attribute set to something like data-FIXME.
I got these solutions to work. I thought of solution 1.
Starting code:
<div
v-for="foo in foos"
:key="foo.id"
#click="foo.on = !foo.on /* JavaScript comment. */"
>
<label>
{{ foo.name }} {{foo.on}}
</label>
</div>
The Vue directive HTML attribute that needs to be disabled: #click="foo.on = !foo.on"
How the final div tag will run:
<div
v-for="foo in foos"
:key="foo.id"
>
Solutions 1 and 2 keep the disabled attribute inside its tag. I didn't find a good way to make a "raw string". To keep the attribute in the tag, the outer and inner quotes must be different.
sol. 1: I made a new v-bind attribute (:lang) to put the disabled attribute in.
:lang='en /* #click="foo.on = !foo.on" */'
Sol. 2: Pick a Vue directive. Put the attribute in.
v-for="foo in foos /* #click='foo.on = !foo.on' */"
Solutions 3 and 4 put the attribute outside the tag.
Sol. 3:
<div v-if="false">
#click="foo.on = !foo.on"
</div>
Sol. 4: <!-- #click="foo.on = !foo.on" -->
One way to remove/hide component attributes is to create a custom directive for it.
Let's say you create a directive called v-hide and put it in your component as:
<my-comp v-model="value" #click="handleClick" v-hide :disable='true'></my-comp>
And the output would be:
<my-comp v-model="value" #click="handleClick"></my-comp>
Here is a working example:
Vue.component ('my-component', {
template: `<p> A custom template </p>`
})
Vue.directive('hide', {
inserted: function (el) {
console.log('el before hide', el)
while(el.attributes.length > 0)
el.removeAttribute(el.attributes[0].name);
console.log('el after hide', el)
}
})
new Vue({
el: '#app',
data () {
return {
someValue: 'Hello'
}
}
})
<script src="https://unpkg.com/vue#2.5.3/dist/vue.js"></script>
<div id="app">
<my-component v-model='someValue' v-hide :disable='true'></my-component>
</div>
In previous versions(3.5) of CKEditor I was able to enter:
<br style="page-break-after: always;" />
However, after upgrading to 4.4.5, I noticed that the RTE no longer shows this HTML source, from the Database column, and so if one resaves the form with this RTE on it, then NULL is saved back to the database. It seems that CKEditor is stripping this HTML out for some reason.
How can I prevent this?
Many thanks.
EDIT 1
Discovered this to be added to config.js:
config.allowedContent = 'br {page-break-after}';
But does not work, although it should do....
EDIT 2
Link for above config setting
EDIT 3
I can try to enter the above HTML, in HTML Source View, but if I toggle the HTML Source button, and go back to Source View, it is now gone. So CKEditor is stripping this HTML out for some reason.
EDIT 4
Removed as now irrelevant
EDIT 5
Looking at the Browser source I see:
<textarea class="RuleRTE" cols="20" id="myCk" rows="2"><br style="page-break-after: always;" /> </textarea>
So clearly the data is there and being retrieved, but being converted which prevents me seeing it in the HTML Source view.
I have now found this is irrelevant as <p>test</p> test fine and it gets converted as well, I guess to prevent it being rendered like normal HTML in the page. So it seems the CKEditor does not like the tag ???
EDIT 6:
Removed as now irrelevant to question.
EDIT 7:
Debug JS:
<script type="text/javascript" language="javascript">
var editor = CKEDITOR.replace('Content', {
allowedContent: 'br[*]'
});
editor.on('instanceReady', function () {
console.log(editor.filter.allowedContent);
});
Results seem to show allowedContent is working fine, but BR element still invisible.
[Object, Object]
0: Object attributes: true
classes: null
elements: Object br: true
I suspect that there's a syntax or usage error with the way you're attempting to modify the allowedContent setting. Try doing something more simple along these lines: (do it in code rather than the config file)
var your_ck_editor = CKEDITOR.replace( 'your_ck_element_id', {
allowedContent: 'br[*]'
} );
The br[*] setting should allow any <br /> element with any attribute.
For troubleshooting purposes try this:
console.log( your_ck_editor.filter.allowedContent );
If this code does not work for you please post all the code that you use to set up your CKEditor as well as the output of your console.log call.
I try to read pics (for a slider) from a folder. I have a marker called ###SLIDER### and my images are in the fileadmin/sliders/ folder.
I would like to achieve the following output as in the template that I bought:
<div class="camera_wrap">
<div data-src="fileadmin/sliders/slider_1.jpg">
<div class="camera-caption fadeIn">Text_1</div>
</div>
<div data-src="fileadmin/sliders/slider_2.jpg">
<div class="camera-caption fadeIn">Text_2</div>
</div>
<div data-src="fileadmin/sliders/slider_3.jpg">
<div class="camera-caption fadeIn">Text_3</div>
</div>
</div>
How can I load the images from a folder using Typoscript and display it this way?
The following code will give you what you want but without the captions. It works in TYPO3 4.5.x. I'm not sure that it works in higher versions as the description of filelist in the current (as of 16/10/2013) manual is somewhat confusing so I don't know if something has changed in the newer versions.
YOUR_MARKER = TEXT
YOUR_MARKER {
filelist = fileadmin/sliders/
split {
token = ,
cObjNum = 1
1 {
current = 1
wrap = <div data-src="fileadmin/sliders/|"></div>
}
}
wrap = <div class="camera_wrap">|</div>
}
NOTE: This is a very simple example that presumes that all the images in the folder are already resized to appropriate dimensions and that all the files within the folder are images. To make it better, the first (1) object of the split might be set to be IMG_RESOURCE. This way it would check that only images are outputted and it would allow you to use GIFBUILDER to resize the images if needed.
I have a issue with html2canvas showing the screenshot in a canvas div.
Actually the picture will be show in
<div id="content"> </div>
But i like to show the code in my canvas
<div id="content">
<canvas id="myimage"> HERE I LIKE TO SHOW THE IMAGE</canvas>
</div>
In the inline javascript i can change the div container-id, but i dont know how to change the code to get the image in the canvas element.
<script type="text/javascript">var date=new Date();var message,timeoutTimer,timer;var proxyUrl="http://urlcanvas.appspot.com";function addRow(a,c,d){var b=$("<tr />").appendTo($(a));b.append($("<td />").css("font-weight","bold").text(c)).append($("<td />").text(d))}function throwMessage(b,a){window.clearTimeout(timeoutTimer);timeoutTimer=window.setTimeout(function(){message.fadeOut(function(){message.remove()})},a||2000);$(message).remove();message=$("<div />").html(b).css({margin:0,padding:10,background:"#000",opacity:0.7,position:"fixed",top:10,right:10,fontFamily:"Tahoma",color:"#fff",fontSize:12,borderRadius:12,width:"auto",height:"auto",textAlign:"center",textDecoration:"none"}).hide().fadeIn().appendTo("body")}$(function(){$("#recommended a").click(function(c){c.preventDefault();$("#url").val(this.href);$("button").click()});var a,b;$('input[type="button"]').click(function(){$(a.contentWindow).unbind("load");$(a).contents().find("body").html2canvas({canvasHeight:b.body.scrollHeight,canvasWidth:b.body.scrollWidth,logging:true})});$("#getscreenshot").click(function(d){d.preventDefault();$(this).prop("disabled",true);var c=$("#url").val();$("#contentx").append($("<img />").attr("src","loading.gif").css("margin-top",40));var f=document.createElement("a");f.href=c;$.ajax({data:{xhr2:false,url:f.href},url:proxyUrl,dataType:"jsonp",success:function(e){a=document.createElement("iframe");$(a).css({visibility:"hidden"}).width($(window).width()).height($(window).height());$("#contentx").append(a);b=a.contentWindow.document;b.open();$(a.contentWindow).load(function(){var g=$(a).contents().find("body"),h={onrendered:function(j){$("#contentx").empty().append(j);$("#getscreenshot").prop("disabled",false);$("base").attr("href","")},allowTaint:true,taintTest:false,flashcanvas:"src/flashcanvas.min.js"},i=html2canvas(g,h)});$("base").attr("href",f.protocol+"//"+f.hostname+"/"+f.pathname);e=e.replace("<head>","<head><base href='"+f.protocol+"//"+f.hostname+"/"+f.pathname+"' />");if($("#disablejs").prop("checked")){e=e.replace(/\<script/gi,"<!--<script");e=e.replace(/\<\/script\>/gi,"<\/script>-->")}b.write(e);b.close()}})})});</script>
Here is a good reference create screenshot of webpage using html2canvas (unable to initialize properly) Hope it will help.
If i understood well you need to append the canvas like this:
html2canvas(document.getElementById("content"), {
onrendered: function(canvas) {
document.getElementById("content").appendChild(canvas);
}
});